2020-01-06 深入理解盒模型

• 盒模型
  标准盒模型
  

content区域（由width和height组成）可以显示文字、子元素
子元素div的可视宽高（border+padding+content）会撑满父级content区域

标准盒模型的可视宽高计算公式：
标准盒模型的可视宽高 = border + padding + width/height（content）

- padding
内填充: 边框以内填充的距离（在选中的时候呈现绿色）
填充的位置 -> border 到 content之间

注意事项：
★ 添加padding，会导致div元素的宽高发生变化

★ 背景图片依旧默认在元素的左上角，并不是content区域的左上角，padding并不影响背景图片

多值书写：
一个值：上 右 下 左
两个值：上下 和 左右
三个值：上 和 左右 和 下
四个值：上 和 右 和 下 左

指定方向：

• 上：padding-top
• 下：padding-bottom
• 左：padding-left
• 右：padding-right

margin

外填充：作用在当前元素边框以外区域，通常用来控制元素和元素之间的间隔
注意事项：

★ 因为margin是在元素可视区以外区域，所以不会影响元素的可视宽高
★ 因为margin是在元素可视区以外区域，所以不会影响背景图片，背景从元素左上角开始。

多值书写：
一个值：上 右 下 左
两个值：上下 和 左右
三个值：上 和 左右 和 下
四个值：上 和 右 和 下 左

加粗样式指定方向：

• 上：margin-top
• 下：margin-bottom
• 左：margin-left
• 右：margin-right

margin可以接受正负值

margin里超好用的auto

◥ margin: auto;

左右两边设置auto，可以让一个元素居中，a = b的距离
◥ margin-left: auto;
只有左边设置auto，可以让一个元素靠右
◥ margin-right: auto;
只有右边设置auto，可以让一个元素靠左（其实也就没有设置的必要，因为默认情况就是靠左的）

正常情况下，margin-top:auto; / margin-bottom:auto; 是无效的

margin的问题

★ margin传递的问题

除了margin-top 会传递 margin-bottom 同样也会传递

解决方案：

1.给父级的红色盒子加padding，使红、绿两个盒子顶部保持间隙
2.给父级加边框（有种弄个栅栏不让子级margin跑出去的感觉）
3.用一个并列同级元素，代替margin距离。
并列同级元素的height = margin-top / margin-bottom

★ magin叠加问题

解决方案：
给红色直接把底部margin定为 150px，或者给绿色顶部 定为150px
把总得margin加给一个元素身上

padding适合用在嵌套标签之间，margin 间

• 怪异盒模型
• 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 距离顶部
• 模糊半径
• 扩展：扩展到一个位置之后，在进行模糊
• 颜色：盒模型阴影的颜色