本文详细介绍了HTML布局的几种经典方法，如圣杯布局、双飞翼布局、Flex布局和绝对定位布局，以及它们的优缺点。接着讨论了栅格系统的重要性和作用，特别是在提高生产力、灵活性和响应式设计方面的优势。文中提到了Bootstrap、ElementUI和AntD等UI框架的栅格系统，并提供了创建自定义栅格系统的基本步骤和响应式设计的实现。
布局方式
先聊聊布局方面的知识，先列据一个实现三栏水平布局(左右定宽，中间自适应)案列，目前有圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局。
圣杯布局 & 双飞翼布局(都是三列左右栏固定中间栏自适应的网页布局)。
相同点：
三列布局，两边定宽，中间自适应；
中间栏要在浏览器中优先展示渲染；
允许任意列的高度最高；
差异点：
双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了
DOM节点结构：
圣杯布局：
.container {
padding: 0 300px 0 200px;
}
.left, .main, .right {
position: relative;
min-height: 130px;
float: left;
}
.left {
left: -200px;
margin-left: -100%;
background: green;
width: 200px;
}
.right {
right: -300px;
margin-left: -300px;
background-color: red;
width: 300px;
}
.main {
background-color: blue;
width: 100%;
}
双飞翼布局：
.left, .main, .right {
float: left;
min-height: 130px;
text-align: center;
}
.left {
margin-left: -100%;
background: green;
width: 200px;
}
.right {
margin-left: -300px;
background-color: red;
width: 300px;
}
.main {
background-color: blue;
width: 100%;
}
.content{
margin: 0 300px 0 200px;
}
双飞翼布局比圣杯布局多使用了一个div，少用大致4个css属性，比圣杯布局思路更直接和间接一点。
Flex弹性布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局， Flex 布局将成为现代浏览器的首选方案。
.container{
display: flex;
min-height: 130px;
}
.main{
flex-grow: 1;
background-color: blue;
}
.left{
order: -1;
flex-basis: 200px;
background-color: green;
}
.right{
flex-basis: 300px;
background-color: red;
}
绝对定位布局
绝对定位position: absolute使元素的位置与文档流无关，因此不占据空间。PS：这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
