CSS 布局
- 左右布局(两列自适应)
- 左中右布局(三栏布局)
- 水平居中
- 垂直居中
- 等高布局
- 粘连布局
1 - 左右布局(两列自适应)
一列由内容撑开,另一列撑满剩余宽度
1.1 float + overflow:hidden
如果是普通的布局,浮动 + 元素 margin 就可以实现,但是如果是自适应撑满的两列布局,用 float + overflow:hidden
可以实现。
此方法通过 overflow
触发 BFC,而 BFC 不会重叠浮动元素。由于设置 overflow: hidden
并不会触发 IE-6 的 haslayout
属性,所以需要设置 zoom: 1
来兼容 IE-6。代码:
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
<p>right</p>
</div>
</div>
.parent {
overflow: hidden;
zoom: 1;
}
.left {
float: left;
margin-right: 20px;
}
.right {
overflow: hidden;
zoom: 1;
}
注意:如果侧边栏在右边,注意渲染顺序。
1.2 Flex 布局
弹性布局,很简单就能实现:
.parent {
display:flex;
}
.right {
margin-left:20px;
flex:1;
}
1.3 Grid 布局
Grid 二维布局系统
.parent {
display:grid;
grid-template-columns:auto 1fr;
grid-gap:20px
}
2 - 三栏布局(圣杯/双飞翼)
利用 Flex 和 Grid 可以迅速进行三栏布局,和上面两列布局类似
这里我们重点讨论一下 中间自适应,两侧固定的圣杯布局和双飞翼布局
2.1 圣杯布局
介绍
比较特殊的三栏布局,同样也是两边固定宽度,中间自适应,唯一区别是 DOM 结构必须是先写中间的部分以确保中间列可以优先加载。
<article class="container">
<div class="center">
<h2>圣杯布局</h2>
</div>
<div class="left"></div>
<div class="right"></div>
</article>
.container {
padding-left: 220px;//为左右栏腾出空间
padding-right: 220px;
}
.left {
float: left;
width: 200px;
height: 400px;
background: red;
margin-left: -100%;
position: relative;
left: -220px;
}
.center {
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
position: relative;
right: -220px;
}
原理
- 三列都设置为左浮动,使得三列保持在一行
- 设置中间列宽度为 100% (自适应的关键),这时候左右会自动流动到下一行
- 设置
margin-left
为负值,使得左右两列回到中间列一行 - 设置大容器的 padding,为左右两列留出空间
- 通过
position: relative
调整左右两列
缺陷
center
的min-width
不能小于left
的width
- 三列中任何一列高度边长,其他两列不会自动填充
2.2 双飞翼布局
介绍
优化了圣杯布局,解决圣杯布局错乱问题,实现内容与布局分离,而且没有高度适应问题
<article class="container">
<div class="center">
<div class="inner">双飞翼布局</div>
</div>
<div class="left"></div>
<div class="right"></div>
</article>
.container {
min-width: 600px;//确保中间内容可以显示出来,两倍left宽+right宽
}
.left {
float: left;
width: 200px;
height: 400px;
background: red;
margin-left: -100%;
}
.center {
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.center .inner {
margin: 0 200px; //新增部分
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
}
原理
- 三列都设置为左浮动,使得三列保持在一行
- 设置中间列宽度为 100% (自适应的关键),这时候左右会自动流动到下一行
- 设置
margin-left
为负值,使得左右两列回到中间列一行 - 在
center
新增inner
子容器,样式margin: 0 200px;