CSS布局 - 三栏布局
2017-01-01 00:26
225 查看
CSS布局技术可谓是前端技术中最基础的技术，就是因为基础，所以我认为要更加熟练，深入的去掌握，去梳理。
一、 传统 ---> 浮动实现的三栏布局
采用浮动实现的三栏布局有以下特点及注意事项：· 注意DOM结构的排列顺序。
因为左右两侧的DOM都是浮动布局，而中间的DOM则是普通的文档流，所以为了规避浏览器正常的页面渲染，即先解析左侧DOM(浮动)，再解析中间的DOM(普通文档流，宽度100%)而导致解析最后的右侧DOM(浮动)时因为宽度的问题，而掉到下一行的情况。
· 因为DOM结构顺序实际内容反而最后渲染出来。
· 左右两栏高度无法做到100%，除非设置body, html高度为100%。
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
min-width: 320px;
}
.left {
float: left;
width: 150px;
height: 100%;
background: #aaa;
}
.right {
float: right;
width: 150px;
height: 100%;
background: #aaa;
}
.main {
background: #eee;
}
</style>
</head>
<body>
<div class="left">This is Left</div>
<div class="right">This is Right</div>
<div class="main">
This is Main
</div>
</body>
</html>二、传统 ---> 定位实现的三栏布局
通过定位实现的三栏布局，其实现方式与浮动相类似，与浮动相比，它具有以下特点：· 无需手动更改DOM结构的顺序
· 左右两栏可以实现100%高度，无需手动定高，但只支持IE7+
定位方式也有它的缺点，比如当给中间DOM定义了最小宽度时，左右两栏会盖在中间的DOM上。
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
}
.left {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 150px;
background: #eee;
}
.right {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 150px;
background: #eee;
}
.main {
background: #aaa;
padding: 0 150px;
min-width: 300px;
}
</style>
</head>
<body>
<div class="left">This is Left</div>
<div class="main">
This is Main
</div>
<div class="right">This is Right</div>
</body>
</html>三、 传说 ---> 圣杯布局
圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一种布局模型概念，在国内最早是由淘宝UED的工程师传播开来。圣杯布局的特点是：
1、三列布局，中间宽度自适应，两边定宽；
2、中间栏要在浏览器中优先展示渲染；
3、允许任意列的高度最高；
4、要求只用一个额外的DIV标签；
5、要求用最简单的CSS、最少的HACK语句；
实现圣杯布局的核心技术就是浮动与定位相结合使用。
从最简单的圣杯布局开始着手：
3.1 两栏-左侧定宽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0px;
padding: 0px;
}
.wrap {
padding-left:150px;
overflow: hidden;
}
.main {
float: left;
width: 100%;
height: 500px;
background: #eee;
}
.left {
float: left;
position: relative;
width: 150px;
height: 500px;
margin-left: -100%;
left: -150px;
_left: 150px;/* 解决IE6下的兼容性问题 */
background: #aaa;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main"></div>
<div class="left"></div>
</div>
</body>
</html>仔细看代码，我可以得出一个结论，圣杯布局的HTML结构就是一个包裹层(.wrap)，然后里面是我们所要放的结构：左侧栏(.left) 和 主栏(.main) 。为了能让主栏优先解析渲染，所以将其HTML结构放在最前面。
在CSS上，结构相关的HTML标记都要进行浮动，使他们进行一行并排开来，但由于主栏的宽度已经是最外包裹层最大的宽度（去除padding），所以左侧栏会掉到第二行，因此需要为其设置:
margin-left:-100% position:relative; left:-150px;
通过margin负值浏览器会将侧栏从第二行拉向第一行，而这里的-100%，指的就是侧栏所在父容器的宽度，所以最终侧栏会被拉向父容器第一行的最左侧。接着再进行相对定位（不会脱离文档流），最后通过左侧偏移值(left)将其拉回到浏览器的最左边。
3.2 两栏-右侧定宽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0px;
padding: 0px;
}
.wrap {
padding-right: 150px;
overflow: hidden;
}
.main {
float: left;
width: 100%;
height: 500px;
background: #eee;
}
.right {
float: right;
position: relative;
width: 150px;
height: 500px;
margin-right: -150px;
_left: -150px;/* 解决IE6下的兼容性问题 */
background: #aaa;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main"></div>
<div class="right"></div>
</div>
</body>
</html> 左侧定宽与右侧定宽最大的不同就是右侧栏可以有浮动，然后设置margin-right:-150px便可以实现。
为什么可以这么做呢？其实很简单因为我们的包裹成(.wrap)设置了右间距，而当我们的右侧栏向右偏移了150px时，便已经脱离了.wrap包裹层。相当于脱离了BFC的环境，此时右侧栏由于浮动便会自动上浮。
3.3 圣杯布局 - 侧边栏都在左边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0px;
padding: 0px;
}
.wrap {
padding-left: 300px;
overflow: hidden;
}
.main {
float: left;
width: 100%;
height: 500px;
background: #eee;
}
.left {
float: left;
position: relative;
width: 150px;
height: 500px;
margin-left: -100%;
left: -300px;
_left: 0px; /* 解决IE6下的兼容性问题 */
background: red;
}
.right {
float: left;
position: relative;
width: 150px;
height: 500px;
margin-left: -100%;
left: -150px;
_left: 150px;/* 解决IE6下的兼容性问题 */
background: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>3.4 圣杯布局-侧边栏都在右边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0px;
padding: 0px;
}
.wrap {
padding-right: 300px;
overflow: hidden;
}
.main {
float: left;
width: 100%;
height: 500px;
background: #eee;
}
.left {
float: left;
position: relative;
width: 150px;
height: 500px;
margin-left: -150px;
right: -150px;
/* 解决IE6下的兼容性问题 */
background: red;
}
.right {
float: left;
position: relative;
width: 150px;
height: 500px;
margin-left: -150px;
right: -300px;
background: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>3.5 圣杯布局-两侧定宽
由以上的基础认识后，我们就可以很容易的写出两栏定宽，共计3栏的“圣杯布局”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
padding: 0;
margin: 0
}
.wrap {
padding: 0 150px;
overflow: hidden
}
.main {
float: left;
width: 100%;
height: 500px;
background: #eee;
}
.left {
float: left;
position: relative;
width: 150px;
height: 500px;
background: #aaa;
margin-left: -100%;
left: -150px;
}
.right {
float: right;
width: 150px;
height: 500px;
background: #aaa;
margin-right: -150px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>四、传说 --> 双飞翼布局
双飞翼布局实际上是对圣杯布局的改进版，相比于圣杯布局，它减少了相对定位，控制偏移值等CSS控制，而相应的双飞翼布局也则增加了html结构。双飞翼的核心思路就是为主栏增加一个包裹成，然后让这个包裹成与左右两个侧栏同时进行浮动，最后通过设置与圣杯布局相似的负边距值(margin)，便可以实现三栏布局，从而实现不需要定位进行辅助。
详细代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0px;
padding: 0
}
.wrap {
overflow: hidden;
}
.box {
float: left;
width: 100%;
background: #eee;
}
.main {
height: 500px;
margin: 0 160px;
}
.left {
float: left;
height: 500px;
background: #aaa;
width: 160px;
margin-left: -100%
}
.right {
float: left;
height: 500px;
width: 160px;
background: #bbb;
margin-left: -160px;
}
</style>
</head>
<body>
<div class="wrap">
<!-- 为主栏再包裹一层 -->
<div class="box">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>五、 新时代 ---> Flex布局
Flex 布局是CSS3推出的一种可塑布局方案，其功能强大且灵活。flex盒子默认情况下会将其内部的子元素按照HTML结构的顺序并排一行来排列展示。如果所有子元素的宽度之和大于当前的flex盒子的宽度时，flex盒子会自动调整每个子盒子的宽度。
也是利用这个特性，我们可以很方便的实现通过Flex进行的三列布局。
PS：Flex 再PC端上只有IE10+ Chrome21+ Firefox 22+ 才被支持，但是在手机端上目前基本已经可以被全部支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0px;
padding: 0
}
.wrap {
display: flex;
}
.main {
width:100%;
height: 400px;
background: #eee;
order:2;
}
.left {
width: 150px;
height: 400px;
background: #aaa;
order:1;
}
.right {
width: 150px;
height: 400px;
background: #ddd;
order:3;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>说明：order 是CSS3的一个新属性，其值为整数值，用于设置flex子元素的排列顺序，值越小的子元素越排在前面。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- flex 布局下，css 设置文本不换行时，省略号不显示的解决办法
- css上下布局铺满屏幕
- div+css 布局浏览器兼容
- 常见CSS布局
- div+css布局技巧博览
- css的布局模型（一）—-流动模型
- HTML+CSS编写静态网站-38 Vedio页面适配桌面布局
- CSS负边距自适应布局三例
- CSS100%布局小事例
- css的布局模型(二)---浮动模型
- 简单CSS 布局
- 【转】CSS网页布局DIV水平居中的各种方法
- CSS--沃顿商学院网页布局
- css+div布局----典型布局基本框架
- DIV+CSS网页布局常用的一些基础知识整理
- CSS学习笔记：布局(内外边距与漂浮)与定位
- CSS_绝对布局
- CSS布局总结
- CSS 页面布局
- 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）