学前端的小伙伴们都知道，CSS学起来很容易，可是要学精通了却特别难。在前端市场需求火热的今天，竞争至关激烈，光是会使用或者一两种实现的方式是远远不够的。不只如此，还要深知各类解决方案的优劣，对各类特性了如指掌。css
本次介绍的内容是CSS响应式布局--三栏布局html
这是一道前端面试有关css内容的常考题。通常上来就会问：前端
请你实现一下三栏布局：
通常的同窗只是想到了一两种好比 float、absolute，可是光是拿这些来回答面试官的问题是远远不够的。css3
如今请跟本问来过一遍这道问题：面试
实现三栏布局通常能想到5种布局方案：浏览器
1. float布局
2. absoluteflex
3. flexbox优化
4. tableflexbox
5. grid
首先设置下全局的样式：
*, html {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
color: #ffffff;
}
下面是实例演示部分：
1、float布局
思路：
左右div一个左浮动，一个右浮动，固定宽度，中间就能自适应宽度了。
中间那栏div，是个块级元素，在不设宽度的前提下，会自动占满页面一整行。
因为左右div都设置了float，因此他们都会脱离文档流。也就是说，float元素在其父级article元素内不占据空间。
实际占据整个空间的是中间的div，而左右div则悬浮于中间div的上方，因此视觉上看起来左右div像是占据了左右两边栏。
浮动元素虽然脱离文档流，不受父级元素控制、不影响其它非浮动子元素的布局，可是它会对子元素的文本内容形成影响，其效
果也就是咱们日常使用的word中的文字环绕效果。
.layout.float .left {
float: left;
width: 300px;
background: #cecece;
}
.layout.float .right {
float: right;
width: 300px;
background: #00a8fe;
}
.layout.float .center {
background: yellowgreen;
}
Float Layout
不少文字
不少文字
不少文字
实际效果：
float 布局
问题：
1. 为何三个div是左、右、中这样排列？
若是是按照左中右排列的话，效果会变成这样。右边那列换到了下一行显示。
左中右按顺序排列
缘由在于浮动的框能够向左或向右移动，直到它的外边缘碰到包含框或另外一个浮动框的边框为止。
因为中间div先于右div渲染，以后的块级元素都会另起一行显示，因此右div会在下一行右浮动。
因此，为了解决此问题，先让左右div先浮动，顶格显示，而后再显示中间的div便可。
2. 清除浮动问题
此问题会在
优势：因为float布局很早就被普遍使用，因此兼容性比较好
缺点：须要清除浮动。
2、absolute布局
思路：article下的左中右三个div都设置position为absolute, 左右div定宽，left:0, right:0。中间div设置left和right各位左右
div的宽度。
absolute为绝对定位，若是子元素position为absolute，那么它会相对于对其position为relative或者absolute的父级元素进行
定位，若是父级元素都知足不了要求，最终会相对于整个浏览器窗口进行定位。
.layout.absolute article div {
min-height: 100px;
position: absolute;
}
.layout.absolute .left {
width: 300px;
left: 0;
background: #CECECE;
}
.layout.absolute .right {
width: 300px;
right: 0;
background: #9ACD32;
}
.layout.absolute .center {
left: 300px;
right: 300px;
background: #00A8FE;
}
Absolute Layout
不少文字
不少文字
不少文字
不少文字
不少文字
absolute布局
优势：使用快捷
缺点：可实用性不高，由于若是布局内部子元素多并且很复杂时，其内部布局须要涉及的相对计算比较多，致使其内部子元素也
须要设置为absolute，脱离了文档流。使整个页面布局，调试起来很是困难。
3、 flexbox布局
思路：article元素设置display为flex，其子元素左右div均为定宽，中间设置flex为1.
flexbox会将内部子元素(若是不设置宽高)，根据其所占比例(flex: 1)自动计算子元素的尺寸，均匀排列
.layout.flex article {
display: flex;
}
.layout.flex .left {
width: 300px;
background: #CECECE;
}
.layout.flex .right {
width: 300px;
background: #9ACD32;
}
.layout.flex .center {
flex: 1;
background: #00A8FE;
}
Flex Layout
不少文字
不少文字
不少文字
不少文字
不少文字
效果：
Flexbox 布局
优势：解决了上述两种布局的问题，实现了布局优化，所用于移动端
缺点：版本比较多，须要作兼容性处理
4、table布局
思路: table布局比较简单，这里只要设一行三列便可。整个table100%宽，左右两列定宽，中间自适应。
ps：这里换成table、tr、td元素效果相同
.layout.table {
margin-top: 10px;
}
.layout.table article {
display: table;
width: 100%;
height: 100px;
}
.layout.table div {
display: table-cell;
}
.layout.table .left {
width: 300px;
background: #CECECE;
}
.layout.table .right {
width: 300px;
background: #9ACD32;
}
.layout.table .center {
background: #00A8FE;
}
Table Layout
不少文字
不少文字
不少文字
不少文字
不少文字
效果：
table 布局
优势： 兼容性好，使用方便。
缺点： 其中一个 单元格高度变化，旁边也会随之高度变化。换句话说，不能自定义某一栏的高度，全部的单元格必须等高。
5、grid布局
思路：grid布局是css3新出的一种布局，经常使用于报刊杂志那种多栏目布局。经过对父元素article设置display: grid
再设置 grid-template-columns 及grid-template-rows便可。很是便捷。
.layout.grid {
margin-top: 10px;
}
.layout.grid article {
display: grid;
grid-template-columns: 300px auto 300px;
grid-template-rows: 100px;
}
.layout.grid .left {
background: #CECECE;
}
.layout.grid .right {
background: #9ACD32;
}
.layout.grid .center {
background: #00A8FE;
}
Grid Layout
不少文字
不少文字
不少文字
不少文字
不少文字
效果：
Grid 布局
优势：编写方便
缺点：因为是比较新，兼容性会是一个问题，好比ie10以前的版本不支持
以上就是三栏布局的五种写法，若是有疑问，请在下方留言。
扫一扫
686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
