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