1. 盒模型
先来看个图
这个盒子有个两种类型，一个是标准盒模型，另一个是替代（IE）盒模型，然后分别的说一下区别：
一、标准盒模型
在这种情况下，设置的 width 和 height 只是设置的上图中的 content 的宽高，那么这个盒子的实际宽度是 width + padding-left + padding-right + border-left + border-right。
二、替代（IE）盒模型
这种情况就好理解了，不管 width 和 height 设置的是多少，就是盒子的大小，如果设置了 border 和 padding 值，浏览器会自动计算。
那么问题来了，我们平时在写页面的时候怎么使用这两种盒模型呢？其实我们在什么都没有设置的时候使用的就是 标准盒模型，也就是 box-sizing: content-box; 如果想使用 替代（IE）盒模型，也就是需要设置为 box-sizing: border-box; 就可以了。
2. margin 的一些小细节
一、父子元素嵌套的结构时（上下 margin 的传递）
子元素的 margin-top 值会传递给父元素
如何防止出现传递问题？
- 给父元素设置
padding-top - 给父元素设置
border - 触发
BFC
二、垂直方向相邻的两个元素（上下 margin 的重叠）
如果一个有 margin-bottom，一个有 margin-top，那么他们两的值会被重叠，取最大值
3. 行内非替换元素的一些小细节
使用以下属性会怎么样？
一、 width / height： 不生效
二、padding：上下左右都会被撑起来，但是上下撑起来是不会占据空间的，如果下边还有元素，那么会紧挨着此元素的
三、border：同 padding 一样
四、margin：上下 margin 不生效，左右 margin 生效
