Box Model ｜盒子模型

在CSS 中, 每个元素都是多个嵌套的盒子的组合

从内向外依次是 Content box, Padding box, Border box, Margin box

用画像来比喻就是, 人像, 画布, 相框, 相框与其他东西的间隙

Content box, 其大小根据内容或者width\height 设置

Padding box, 包裹Content, 用padding 相关属性设置(画布与内容的内边距, 紧贴着不好看😀)

Border box, 包裹Padding, 用border 相关属性设置

Margin box, 包裹Border, 用margin 相关属性设置, 只有空隙, 没有具体的视觉内容

两个元素Margin box 相遇时, 会重叠, 即大的那个有效

Block box 和 Inline box

行内盒子的width 和height 属性无效

盒子大小 - 默认盒子和非传统盒子

默认盒子的大小width\height + padding + border (content-box)

子元素若是100% 宽度, 加上padding 和border 后就会超出父元素范围

非传统盒子的大小就是width\height (border-box)

IE quirky 年代使用的模型, 如此直观, 若人喜爱, 在响应式设计中麻烦少

所以, 继续嫌弃IE 🙂

由box-sizing 属性切换盒子种类

该属性由CSS3 开始提供

下面的盒子和上面的Content 一样大小

所有元素都使用border-box

*, *:before, *:after {
  box-sizing: border-box;
}

可以使用其它盒子模型的最佳设置, 不用担心class 设置的值被* 覆盖(* 的优先级等同于行内样式)

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

参考

Inheriting box-sizing Probably Slightly Better Best-Practice

Box Sizing

Calculating CSS Specificity Value, 选择器优先级计算

box-sizing-polyfill