⭐️ 盒模型

种类

• 标准盒模型（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 设置有效

⭐️ display: none、visibility: hidden 和 opacity: 0 的区别

• display: none 不占空间，不可点击 （回流 + 重绘）
• visibility: hidden 占据空间，不可点击 （重绘）
• opacity: 0 占据空间，可以点击 （重建图层，性能较高）

更多：分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

margin、padding

margin 和 padding 适合场景

何时应当使用 margin