盒子模型
### 1. 盒尺寸四大家族
每个元素的盒模型都包括四个部分。包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）。
- 一个元素实际占地宽度：
左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
- 一个元素实际占地高度：
上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距
### 2. 元素内容
元素的内容可以是元素内的文字，也可以是元素的宽度和高度，大部分内联元素设置宽高无效，只能依靠内容撑开，因此内容就是内联元素中的文字。
### 3. 内边距
#### (1) 内边距的属性
- padding指盒子的“内补间”，宽高之外到边框以内的距离。
- 可以设置长度，如px、em、rem等,且不支持负值
- padding有四个方向分别是上、右、下、左
- padding-top 上内边距
- padding-right 右内边距
- padding-bottom 下内边距
- padding-left 左内边距
#### (2) 内边距的值
- `padding:10px;` padding:10px 20px; padding:10px 20px 30px;
- 1个值，将用于全部的四边。
- 2个值，第一个用于上、下，第二个用于左、右。
- 3个值，第一个用于上，第二个用于左、右，第三个用于下。
- 4个值，将按上、右、下、左的顺序作用于四边。
### 4.外边距(!!!重点!!!)
外边距的使用场合：元素的位置微调(上下左右)，元素之间的距离调整
#### (2) 外边距的属性
- margin指盒子的外边距，外边距是当前元素和其他元素之间的距离。
- 可以设置长度，如px、em、rem，%等,%取值都是父元素宽度的百分比取值。
- 正值时是增大该方向外边距，负值时是缩小该方向外边距。
- margin有四个方向分别是上、右、下、左
- margin-top 上外边距
- margin-right 右外边距
- margin-bottom 下外边距
- margin-left 左外边距
#### (3) 外边距的值
和内边距一样，外边距可以简写1～4个值，下和右不会产生效果的原因，是因为外边距其实是当前元素与同级元素之间的距离。
margin:5px; //上右下左 margin:0 0 5px 5px;
- 1个值，将用于全部的四边。
- 2个值，第一个用于上、下，第二个用于左、右。
- 3个值，第一个用于上，第二个用于左、右，第三个用于下。
- 4个值，将按上、右、下、左的顺序作用于四边。
#### (5) margin的auto取值
margin有一个特殊的取值是auto，auto对上下外边距无效，左右取相同的值，使当前元素在父元素内左右居中。
- 块级元素在父元素中水平居中`margin:上下距离 auto;`
- 上下距离在没有的时候可以写0
- 内联素使用margin：auto，不能完成居中效果
#### (5) 自带外边距的元素
因不同浏览器对元素的默认渲染样式不同，所以默认的内外边距也可能不同。因此要在编写样式之前使用
- css reset 进行样式统一 * {margin：0；padding：0;}
- body : 四个方向各8px
- ul ： 上下16px外边距，“左内边距”40px
#### (6) 外边距合并现象
- 兄弟元素之外边距合并
- 两个在文档流中（垂直相邻）兄弟之间外边距，同时存在的时候，取最大的值。
#### (7) 外边距溢出(特殊!!!)
- 外边距溢出是父元素中在文档流里的第一个和最后一个子元素会和父元素的上下边界产生合并现象。
- 原因是外边距其实设置的是元素与同级兄弟元素之间的距离。因此第一个和最后一个子元素的外边距会被浏览器会认为你定义的是其父级元素的边。
- 解决方案
- 父元素增加`padding-top` 缺点：增加了父元素实际高度
- 增加父元素的边框， 缺点：增加了父元素实际高度
- 父元素增加`overflow: hidden/auto;`，缺点，父元素就不能溢出显示内容了
- 使用空``放在第一个子元素前和最后一个子元素后，作用是分隔与父级的粘连
- 使用CSS3伪元素`::before`给父元素添加内容,源于增加空``
```css
.box::before{
content:"";
display:table;
}
```
### 6. 盒子模型的计算方式
- `box-sizing: content-box;` 标准盒子模型 (标准)
- 元素所占宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
- 元素所占高度=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距
- `box-sizing:border-box` 改变盒子模型计算方式 (优选项)
*｛padding:0;margin:0;box-sizing:border-box｝
- 设置的宽度width = 左右border + 左右padding + 内容的宽度
- 设置的高度height = 上下border + 上下padding + 内容的高度
- 注意：可能会导致内容溢出，需要时再使用
## 流
### 1. 默认文档流
（css 层叠样式表）多层网页内容最终用户看到精美结果
文档流(多层结果中最底一层:称 文档流)
- 流就是文档布局的自身特性,而定位机制可能就会打破原有流的特性
- 默认文档流,画格子,内联和块级
- 内联元素，从左向右排列
- 块级元素，从上向下排列
### 2. 脱离文档流 (搬家)
文档一旦脱离文档流，不受文档流的布局约束了，在算其父元素的高度时，就不包括其自身了。以下属会导致元素脱离文档流：
- float 浮动
- position 定位(绝对定位、固定定位)
### 2. 浮动 (提干过程序)
#结构简单(清晰)
#一但发生浮动(连带问题 影响后续元素位置)
#复杂少用 (如果网页复杂:弹性布局)
- 子元素在父元素中浮动，会使其脱离文档流，导致父元素对其的管理能力
- 浮动属性
- `float：none`默认不浮动
- `float：left`左浮动
- `float：right`右浮动
- 当元素左浮动或右浮动，首先脱离文档流不再撑起父元素， 高度塌陷
- 其次不再自独占一行，第三在元素浮动的“当前行”向左或向右对齐
- 父元素移动其子元素也会跟随移动
- 元素浮动对后面对兄弟元素有影响，对前面对元素没有影响
- 浮动元素的默认向前占位，后面元素则不能占据该位置
#### (1)浮动过程：
- 脱离文档流不再撑起父元素
- 不再自占一行
- 在元素浮动的“当前行”向左或向右对齐
#### (2)浮动特点
- 元素浮动，脱离文档流，元素不占页面空间，后续元素上前补位
- 元素浮动后，会按照浮动属性停在父元素的左侧或右侧，如果前面有浮动元素就跟在其后面
- 多个元素浮动，父元素放不下会折行
- 一个内联元素浮动，会变成块级元素
- 浮动元素向前占位
- 文本、内联元素、行内块，不会被浮动元素压住，会形成环绕
#### (3) 浮动元素的占位
当父元素400*400,每个子元素都宽度100,但高不同,并且子元素都浮动.这时候父元素宽度减少,浮动元素会折行,补位占位
#### （4）文字环绕
- 元素浮动会盖住下面没有浮动的元素，但文字不会受影响
- 内联元素和行内块，也都会形成环绕模式
- 解决方案包裹文字的元素浮动在前一个元素侧面
### 3. 清除浮动
- 清除浮动并不是去除浮动，而是将浮动带来的负面效果解决掉。因为浮动会产生高度坍塌
- 浮动的影响父元素无高度
- 父元素无高度后，父元素的兄弟元素会向上，发生被遮盖
#### （1）利用高度解决
给父元素高度，弊端是未必知道子元素的高度
#### （2）父元素也浮动
父元素浮动，会影响父元素的兄弟元素
#### （3）父元素溢出隐藏
overflow：hidden/auto，父元素中的子元素可能会被隐藏
overflow与BFC
- BFC块级格式化上下文，内部元素除了脱离文档流，之外无论如何设置都不会影响父级。（如同杯中水，如何改变也不会撒出）
- BFC元素不会让元素及元素内部的内容与外边有任何瓜葛。所以形成BFC的元素可以清除浮动带来的影响，不然的话，子元素浮动，父元素塌陷，父元素的兄弟元素会和父元素的子元素重叠，就违背了BFC的初衷，所以要清除浮动带来的影响。
- scroll、auto、hidden这三个可以触发元素的BFC特性。visible不会。
- 利用overflow形成BFC的应用：
- 清除浮动影响：父元素设置overflow：auto/scroll/hidden；可以清除子元素浮动带来的影响。（形成bfc结界，与外界隔绝，仅支持ie7+及现代浏览器）
- 避免margin穿透/重叠问题（形成bfc结界，与外界隔绝）
----
#### （4）增加一个clear：both的子元素
- clear：both清除两侧浮动
- 可以使用这个不展示的div元素放在所有(子)元素的最后，
这个元素可以作为一个专门清除子元素浮动给父元素带来影响的元素,
但弊端同样是多一个标签
```html
```
#### （5）用伪元素解决
给父元素增加一个在尾部的伪元素
```css
.clearfix:after { //通用浏览器 chrome ff ..
content:"";
display:block;
height:0;
clear:both;
}
.clearfix {*zoom:1;} /*IE/7/6*/ zoom放大网页元素倍:1
```
| ul( |
### 【练习】
```html
```