布局

什么是布局

现有样式不能满足人们的需求

1. 文档流
2. 浮动
3. 定位

人们需要：

1. 导航栏+内容**
2. 导航栏+内容+广告栏
3. 从上到下、从左到右、定宽、自适应…
4. CSS 2 并没有提供原生支持，所以需要将一些属性组合起来，以实现布局

常见布局（PC）

1. 固定宽度布局
2. 弹性（float）布局
3. 响应式布局 —— 多终端（PC、Pad、Phone）

单列布局

demo1

demo2.

浮动 vs 负margin

对于相邻的两个浮动元素，如果因为空间不够导致第二个浮动元素下移，可以通过给第二个浮动元素设置 margin-left: 负值 来让第二个元素上移，其中 负值 大于等于元素上移后和第一个元素重合的临界值。demo.

圣杯布局

是三列布局，两边固定宽度，中间自适应
中间内容元素在 dom 元素次序中优先位置

demo.

双飞翼布局

demo.

Flex布局

Flex 布局教程：语法篇

float布局

不定宽：子元素加float：left；父元素：clearfix

.clearfix:after{
content:"";
display:block;
clear:both;
}

 //ie6
clearfix{
zoom:1
}

赏

×

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦