盒模型

一个盒子由四个部分组成：content、padding、border、margin
content，即实际内容，显示文本和图像
content 属性大都是用在::before/::after这两个「伪元素」中
padding，即内边距，内容周围的区域
内边距是「透明」的
取值「不能为负」
受盒子的background属性影响
padding 「百分比值」无论是水平还是垂直方向均是「相对于宽度计算」
boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成
margin，即外边距，在元素外创建「额外的空白」，空白通常指不能放其他元素的区域

1

标准盒模型

  • 盒子「总宽度」 = width + padding + border + margin;

  • 盒子「总高度」 = height + padding + border + margin

也就是，width/height 包含了 padding 和 border 值
2

更改盒模型

CSS 中的 box-sizing 属性定义了「渲染引擎」应该如何计算一个元素的「总宽度和总高度」
3

box-sizing: content-box|border-box

  1. content-box (「默认值」)，元素的 width/height 不包含padding，border，与标准盒子模型表现一致
  2. border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致