标准和模型
margin
多值书写：
一个值：上 右 下 左
两个值：上下 和 左右
三个值：上 和 左右 和 下
四个值：上 和 右 和 下 左
指定方向：
- 上：margin-top
- 下：margin-bottom
- 左：margin-left
- 右：margin-right
margin可以接受正负值
好用的margin:auto
margin-top问题
除了margin-top 会传递 margin-bottom 同样也会传递
解决方案：
-
- 给父级的红色盒子加padding，使红、绿两个盒子顶部保持间隙
-
- 给父级加边框（有种弄个栅栏不让子级margin跑出去的感觉）
-
- 用一个并列同级元素，代替margin距离。
并列同级元素的height = margin-top / margin-bottom
怪异盒模型
- box-sizing 用于定义元素的可视宽高的计算方式（IE8以下不可使用）
- content-box（默认情况：标准盒模型） 把content起始的 对应 width / height
- border-box（怪异盒模型） 把border起始的 对应 width / height
怪异盒模型可视宽高计算公式： 可视宽高 = width / height;
Content区域计算公式： Content = width / height - border - padding
box-shadow 盒模型阴影
box-shadow:inset x y 模糊半径 扩展 颜色;
- inset 内阴影
- x 距离左侧
- y 距离顶部
- 模糊半径
- 扩展：扩展到一个位置之后，在进行模糊
- 颜色：盒模型阴影的颜色
添加多层box-shadow，可以用“，”进行间隔
可以给多方向添加阴影
- 单边阴影
- 多边阴影
a标签
伪类：hover 鼠标悬停样式
