CSS经典布局--圣杯布局和双飞翼布局
圣杯布局与双飞翼布局,都是属于三列布局的经典布局。
双飞翼布局是圣杯布局的优化版,由淘宝UED提出;
它们的效果图类似,但是实现方法不同。
文章目录
- 一、圣杯布局和双飞翼布局的常规方法
- 1.圣杯 position 解决(不推荐):
- 2.双飞翼布局:
- 二、圣杯布局--flex实现(推荐)
一、圣杯布局和双飞翼布局的常规方法
首先打好底子(两者共用)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>1111</title>
</head>
<style>.header, .footer {height: 50px;background: lightblue;}.center {width: 100%;height: 500px;background: lightgray;float: left;}.left {width: 200px;height: 500px;background: lightpink;float: left;margin-left: -100%; /* 浮动,w100%,不在同行 */}.right {width: 300px;height: 500px;background: lightgreen;float: left;margin-left: -300px;}.clearfix::before,.clearfix::after {content: "";display: block;clear: both;}
</style><body><div class="header">头部</div><div class="main clearfix"><!-- 因为相对来说,center中为主要内容,所以写前边,这样也有利于SEO --><div class="center">中间自适应</div><div class="left">左列定宽</div><div class="right">右列定宽</div></div><div class="footer">底部</div>
</body></html>
此时 “center” 中间自适应 被遮挡
1.圣杯 position 解决(不推荐):
css
/* 圣杯 */.main {margin-left: 200px;margin-right: 300px;}.left {position: relative;left: -200px;}.right {position: relative;right: -300px;}
解决了遮挡,但是当屏幕缩小,布局会乱!!!
2.双飞翼布局:
html
// center 加个div 文字放里面
<div class="center"><div class="inner">中间自适应</div>
</div>
css
/* 双飞翼 */.inner {/* height: 100%; */margin:0 300px 0 200px;border: 2px solid red;}
二、圣杯布局–flex实现(推荐)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>圣杯-flex</title>
</head>
<style>#header, #footer {background: yellowgreen;height: 60px;line-height: 60px;}#container {display: flex;}#container .column {height: 300px;line-height: 300px;}#center {flex-grow: 1;background: gray;}#left {width: 200px;order: -1;background: beige;}#right {width: 200px;background:paleturquoise;}
</style><body><div id="header">#header</div><div id="container"><div id="center" class="column">#center</div><div id="left" class="column">#left</div><div id="right" class="column">#right</div></div><div id="footer">#footer</div>
</body></html>
CSS经典布局--圣杯布局和双飞翼布局相关推荐
- 我对双飞翼布局理解,以及双飞翼布局的好处
双飞翼布局对我这样的新手来说不太好理解,光靠死记不行,理解了以后就能轻易写出来.话不多说,请看代码: <!DOCTYPE html> <html lang="en" ...
- 浅谈面试中常考的两种经典布局——圣杯与双飞翼
圣杯和双飞翼布局介绍 最近正好碰到了写这种布局,一直没有总结过正好借这次机会总结一波,同时加强一下自己的理解. 博客链接:http://www.xluos.com/index.ph... 圣杯布局和双 ...
- 浅谈面试中常考的两种经典布局——圣杯与双飞翼 1
2019独角兽企业重金招聘Python工程师标准>>> 圣杯和双飞翼布局介绍 最近正好碰到了写这种布局,一直没有总结过正好借这次机会总结一波,同时加强一下自己的理解. 圣杯布局和双飞 ...
- CSS三栏布局的7种方式代码详解 | 圣杯布局 | 双飞翼布局 | 弹性盒子
CSS三栏布局代码详解 写在前面:博主最近在转头复习最前面学的CSS,整理一下CSS三栏布局的笔记,正好也捋顺自己的逻辑思路.解析我尽量按照思路详细的写了,代码均可正确运行,留给需要的小伙伴进行参考, ...
- css多栏布局(双栏布局、三栏布局、圣杯布局、双飞翼布局)
1.两栏布局 两栏布局的核心是左栏固定宽度,右栏宽度自适应 html结构为 <div class="outer"><div class="left&qu ...
- html双翼布局,第19题 CSS如何实现双飞翼布局?
双飞翼布局如下图所示: 有了圣杯布局的铺垫,双飞翼布局也就问题不大啦.这里采用经典的float布局来完成. HTML代码: 双飞翼布局 码云笔记 mybj123.com CSS代码: *{ margi ...
- 前端布局:圣杯布局/双飞翼布局(两者小小的区别)
今天逛知乎日常搜索了几个关于前端面试的问题,本以为学了react之类的框架就可以放弃css,现在想想自己真是太天真了.老前辈们说过:"Css你可以不把每一个属性全都记住,但是你一定要在你需要 ...
- 大厂面试必考题:三行布局之圣杯布局和双飞翼布局的区别
前言 今天给大家分享一个圣杯布局和双飞翼布局及他们之间的区别,这两个三行布局一直是一些大厂前端面试的高频考点,带你走进大厂面试题,活不多说,冲冲冲~ 布局效果 这两个种三行布局效果是一样的,实现的效果 ...
- 实现圣杯布局与双飞翼布局 原始实现-flex实现-grid实现
文章目录 实现圣杯布局和双飞翼布局 float + margin负值+relative/添加盒子 前期准备 圣杯布局 margin负值+relative 双飞翼布局 margin负值+添加盒子 fle ...
- 双飞翼 html 布局,css实现双飞翼布局的四种方法(附代码)
本篇文章给大家带来的内容是关于css实现双飞翼布局的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果 ...
最新文章
- python数据处理实例-Python数据分析实例操作
- 【机器学习入门笔记14:BP神经网络基础】20190218
- Linux内核编码风格
- windows快捷键命令汇总整理
- ps流 转发_RTP协议全解析(H264码流和PS流)(转)
- numpy pandas 查找在一个区间中的值
- 如何提高服务器网站网速,怎么提升服务器网速
- sql 列求和_图解面试题:累计求和问题如何分析?
- java.lang.OutOfMemoryError: PermGen space---先测试
- 推荐几个不错的技术公众号
- 阶段3 2.Spring_08.面向切面编程 AOP_8 spring中的环绕通知
- wps交叉表_WPS Office
- 已知圆上任意两点求圆心和半径_圆曲线(已知两点和半径)座标计算
- PROFINET工业以太网教程(10)——GSD文件
- 趣键盘霸榜App Store七天,下一个趣头条诞生?
- 在线二进制取余计算机,十进制转二进制和十六进制计算器
- 哈希表存储数据结构原理
- Prometheus-监控主机基础指标配置及告警
- 用VB.NET设计各种形状的窗体界面(图)
- 流式数据架构理论 ◆ 基本概念