# css 基础（二）
## 块级元素和内联元素
- 块级元素
- 特点：
- 盒子横向会占据父元素所有的空间，默认情况下，盒子会和父元素一样宽
- 每个盒子都会换行
- width和height 都可以发挥作用
- padding , margin, border 会将其他元素从当前盒子周围推开
- 内联元素
- 特点：
- 盒子不会换行
- width和height 不能发挥作用
- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 `inline` 状态的盒子推开。
- 水平方向的内边距、外边距以及边框会被应用且会把其他处于 `inline` 状态的盒子推开。
> 块级元素display默认属性值为 block
>
> 内联元素 dipslay的属性默认值为inline
>
> 块级元素和内联元素可以通过display="inline"/"block" 实现互相转换
## 盒模型 （box model）
css 盒模型包括如下要素
- 元素内容 （content）
- 内边距 （border）
- 边框（border）
- 外边距（margin）
> 上图中 最内层的蓝色色块是 元素内容（content）
>
> 蓝色外侧的 绿色的是内边距（padding）
>
> padding外侧的橙黄色的部分是边框（border）
>
> border 外侧 也就是最外侧的部分是外边框（margin）
盒模型计算元素的总宽度和总高度：
> 元素的总宽度= 元素的width+左右padding +左右margin+border的左右宽度
>
> 元素的总高度=元素的height+上下padding + 上下margin+border的上下宽度
## css外边距合并（叠加）
定义： 当两个元素垂直外边距相遇时，他们形成一个外边距，合并后的外边距等于两个发生合并的外边距较大的那个值，左右外边距不会合并
而且只在普通文档流中会发生外边距合并的状况。 行内，浮动，绝对定位的外边距不会合并
合并的结果计算：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
合并的原因：
而根据w3c规范，两个margin是邻接的必须满足以下条件
4.1、必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
4.2、没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
4.3、都属于垂直方向上相邻的外边距，可以是下面任意一种情况：
a:元素的margin-top与其第一个常规文档流的子元素的margin-top
b:元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
c:height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
d:高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom
出现的情况：
(一）
```
注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部
div 的上外边距合并（叠加）。
```
（二）
多个子元素外边距合并：
div11的高度为0 的时候，div1的margin值由 div1,div11,div12的margin合并结果决定
如此例中，div1的margin 值为30
```
盒子模型
```