⭐️ 盒模型

种类

• 标准盒模型（W3C标准）：
  • 一个块的总宽度 = 内容宽度 + 左右内边距 + 左右边框宽度
• 怪异盒模型（IE标准）：
  • 一个块的总宽度 = 内容宽度（包含了左右内边距 和 左右边框宽度）

怪异盒模型触发条件

如果 HTML 文件最顶部 doctype 缺失，则在 ie6、7、8 将会触发怪异模式(quirks);

通过 css 来设置盒模型

box-sizing: content-box; <!-- 标准模型 -->
box-sizing: border-box;  <!-- IE 模型 -->
box-sizing: inherit;     <!-- 从父元素来继承 box-sizing 属性的值 -->

⭐️ block，inline 和 inline-block 的区别

• 行内元素 inline
  • 不会独占一行；相邻的排同一行；一行排不下会换行
  • 不可设置宽高
  • pending、margin 水平方向上设置有效，垂直方向上无效
• 行内块元素 inline-block
  • 和其他元素同一行（行内元素特点）
  • 可以设置宽高（块级元素特点）
  • pending、margin 设置有效
• 块级元素 block
  • 独占一行
  • 可以设置宽高
  • pending、margin 设置有效

margin、padding

margin 和 padding 适合场景

何时应当使用 margin

• 需要在 border 外侧添加空白时。
• 空白处不需要背景（色）时。
• 上下相连的两个盒子之间的空白，需要相互抵消时。如 15px + 20px 的 margin ，将得到 20px 的空白。

何时应当时用 padding

• 需要在 border 内测添加空白时。