这是我参与「第五届青训营」伴学笔记创作活动的第13天
本篇文章将继续对css内容做复习和巩固。主要介绍的是圣杯布局。
圣杯布局要求
header和footer各自占领屏幕所有宽度，高度固定。
中间的container是一个三栏布局。
三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度。
圣杯布局的三种实现
1、浮动
- 先定义好header和footer的样式，使之横向撑满。
- 在container中的三列设为浮动和相对定位(后面会用到)，center要放在最前面，footer清除浮动。
- 三列的左右两列分别定宽200px和150px，中间部分center设置100%撑满
- 这样因为浮动的关系，center会占据整个container，左右两块区域被挤下去了。
- 接下来设置left的 margin-left: -100%;，让left回到上一行最左侧
- 但这会把center给遮住了，所以这时给外层的container设置 padding-left: 200px;padding-right: 150px;，给left和right空出位置
- 这时left并没有在最左侧，因为之前已经设置过相对定位，所以通过 left: -200px; 把left拉回最左侧
- 同样的，对于right区域，设置 margin-left: -150px; 把right拉回第一行
- 这时右侧空出了150px的空间，所以最后设置 right: -150px;把right区域拉到最右侧就行了。
2、flex弹性盒子
- header和footer设置样式，横向撑满。
- container中的left、center、right依次排布即可
- 给container设置弹性布局
display: flex; - left和right区域定宽，center设置
flex: 1;即可
3、grid布局
如上图所示，我们把body划分成三行四列的网格，其中有5条列网格线
- 给body元素添加display: grid;属性变成一个grid(网格)
- 给header元素设置grid-row: 1; 和 grid-column: 1/5; 意思是占据第一行网格的从第一条列网格线开始到第五条列网格线结束
- 给footer元素设置grid-row: 1; 和 grid-column: 1/5; 意思是占据第三行网格的从第一条列网格线开始到第五条列网格线结束
- 给left元素设置grid-row: 2; 和 grid-column: 1/2; 意思是占据第二行网格的从第一条列网格线开始到第二条列网格线结束
- 给center元素设置grid-row: 2; 和 grid-column: 2/4; 意思是占据第二行网格的从第二条列网格线开始到第四条列网格线结束
- 给right元素设置grid-row: 2; 和 grid-column: 4/5; 意思是占据第二行网格的从第四条列网格线开始到第五条列网格线结束
