本文摘自PHP中文网，作者青灯夜游，侵删。
（学习视频分享：css视频教程）
栅格布局能将网页分成简单属性的行和列，CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。
圣杯布局
圣杯布局是一种三列布局，两边定宽，中间自适应：
css：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | * {
box-sizing: border-box;
}
html, body{
width: 100%;
height: 100%;
margin: 0;
}
.container{
width:100%;
}
.container:after{
display: table;
content:".";
clear:both;
}
.container .cl{
float:left;
border: 1px solid red;
height: 200px;
}
.main{
width:100%;
padding 0 290px 0 320px;
background-color: blue;
}
.sub{
width: 320px;
margin-left:-100%;
background-color: white;
}
.extra{
width: 290px;
margin-left:-290px;
background-color: yellow;
}
CSS
|
HTML：
1 2 3 4 5 6 7 8 | <body>
<div class="container">
<div class="cl main">
</div>
<div class="cl sub"></div>
<div class="cl extra"></div>
</div>
</body>
|
圣杯布局的原理就是当子元素处于浮动状态时，设置负margin，子元素会叠盖到兄弟元素之上。
那么能否用现在想要将其中蓝色区域再次划分成三个区域，相信有很多种办法。但能否通过嵌套的方式实现呢？我们可以试一下：
阅读剩余部分
相关阅读 >>
css如何使用计数器给元素自动编号？css计数器的使用（代码示例）
css无法显示图片怎么办
css如何解决图片底部空白缝隙问题
jq怎么恢复原来的css样式
css可以在html里面写吗
如何自定义video播放器样式？
css有哪几种样式
css怎么设置input颜色
利用css来画出各种样式不同的梯形
如何利用纯css实现图片轮播
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 谈谈css中的栅格布局（图文）
