原文: https://zswfx.com/articles/5d…
起源来自于一次面试问题如何保证元素高度和宽度保持一致，虽然过去很久，可以深度看看这个问题。下面就说说盒子模型(box-model), padding
盒子模型(box-model)
盒子模型(box-model) 是浏览器渲染引擎进行的布局的标准之一。引擎会把页面所有元素当成一个矩形的盒子，通过 css 来决定这些盒子的大小，位置及其其他属性。
盒子模型示意图(侵删)
盒子模型拥有四个边界:
- 内容边界(content edge)
- 内边距边界(padding edge)
- 边框边界 (border edge)
- 外边框边界 (margin edge)
https://developer.mozilla.org…
内容边界是包含 元素的真实内容 的，例如文本，图像，视频等，内容边界的尺寸就是这些内容的宽度，可以通过 width, height, min-width, min-height等控制。内边距区域 是内容和边距之间 的距离，通常尺寸是 padding-box 宽度或者高度，由 padding 控制。边框是从内边距区域扩展，通过border-width 来控制，他的尺寸位于内外边距之间。最外一层则是外边距区域，通过 margin 来控制，从边框边界开始扩展，外边距的区域的尺寸通常会发生 外边距合并，这里外边距不容易搞清楚。
盒子模型(box-model) 控制属性 – box-sizing
box-sizing 决定用户浏览器如何计算元素总高度和总宽度, box-sizing 有两个取值:
content-box
元素的宽度值包含内容边界内的尺寸，任何新增的例如内边距，边框 都会被加入到元素的总体的宽度中
width = 内容的宽度
height = 内容的高度
border-box
内容的宽度包含元素的内容尺寸，内边距尺寸，外边距尺寸。此刻 margin 依旧不会被计算到宽度内
width = 内容的宽度 + 边框的宽度 2 + 边距的宽度 2
height = 内容的高度 + 边框的宽度 2 + 边距的高度 2
说说 padding
padding 是设置一个元素内容和它边界的之间的空间度量，这里就要求 padding 不能是 负值。
padding 是四个内边距的缩写，分别是:
- padding-top
- padding-right
- padding-bottom
- padding-right
padding 在 css 中是 无法继承，适用用基本所有的元素，除了 table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column。
padding 取值可以为具体 css 的 数量值 ，也可以为 百分比，但是取值百分比的时候，参照量是不同的哦。
padding 取值 auto 是无效的，包含 auto 的值会被浏览器忽略
padding 的百分比
一个元素的填充区域在元素的内容和边框之间。如下图:
根据图片示例表示 padding 不能够是负值
当一个元素内边距 (padding) 是百分比的时候，padding 百分比和本身的元素的宽度是有关的。不管 padding 是 top,right,bottom,left 都是根据 宽度 来的计算哦。
当初在格家网络面试的时候，面试官的问了一个面试题，如何保证一个元素的高度和宽度是一致的，这里就要学习这个知识点，padding 和宽度是相关的，设置高度为 0，padding-bottom: 100%, width: 100px; 则就可以得到一个高度和宽度都是 100px 的盒子了。