原文：https://zswfx.com/articles/5d...起源于一个关于如何保证元素高宽一致的面试题。虽然是很久以前的事了，但是这个问题你可以深究一下。先说盒模型（box-model），padding盒模型（box-model）盒模型（box-model）是浏览器渲染引擎布局的标准之一。引擎会将页面的所有元素都视为一个矩形框，并通过css确定这些框的大小、位置等属性。盒模型示意图（侵删）盒模型有四个边界：contentedge,paddingedge,borderedge,marginedgehttps://developer.mozilla.org...内容边界包含了真正的内容元素，比如文本、图片、视频等。内容边界的大小就是这些内容的宽度，可以通过width、height、min-width、min-height等来控制。padding区域就是内容和边距之间的距离，通常大小是padding-box的宽度或高度，由padding控制。border从padding区域延伸出来，由border-width控制，其大小介于内外边距之间。最外层是margin区域，由margin控制，从border边界向外扩展。marginarea的大小通常会合并margin，这里的margin不好弄清楚。盒模型（box-model）控件属性——box-sizingbox-sizing决定了用户浏览器如何计算元素的总高度和总宽度，box-sizing有两个值：content-box元素的宽度值包括尺寸在内容边界内，任何新添加的内容，如内边距和边框，都将添加到元素的总宽度中尺寸。此时margin还是不会计算成widthwidth=widthofcontent+widthofborder2+widthofmargin2其border之间的空间度量要求padding不能为负。padding是四个内边距的缩写，即：padding-toppadding-rightpadding-bottompadding-rightpaddingcss中不能继承，基本适用于所有元素，除了table-row-group,table-header-group,table-footer-group、table-row、table-column-group和table-column。padding的值可以是具体的css值，也可以是百分比，但是当值为百分比时，参考量是不一样的。padding值auto是无效的，包含auto的值会被浏览器忽略。padding元素的填充区域在元素内容和边框之间的百分比。如下图所示：根据图片示例，padding不能为负数。当元素的内边距（padding）是百分比时，padding百分比与元素本身的宽度有关。不管padding是top,right,bottom,left，都是按照width计算的。我在个家网面试的时候，面试官问了一个面试题，如何保证一个元素的高宽一致，这里是要学习的知识点，padding和width是相关的，设置height为0，padding-底部：100%，宽度：100px；然后就可以得到一个高宽为100px的盒子。
