HTML栅格布局container,布局&栅格

布局方式

先聊聊布局方面的知识，先列据一个实现三栏水平布局(左右定宽，中间自适应)案列，目前有圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局。

圣杯布局 & 双飞翼布局(都是三列左右栏固定中间栏自适应的网页布局)。

相同点：

三列布局，两边定宽，中间自适应；

中间栏要在浏览器中优先展示渲染；

允许任意列的高度最高；

差异点：

双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了

DOM节点结构：

圣杯布局：

main

left

right

.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%;

}

双飞翼布局：

main

left

right

.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 布局将成为现代浏览器的首选方案。

main

left

right

.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：这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分