在文档中，一个元素被表示为一个矩形盒子。在CSS中，每个矩形框都是使用框模型来描述的。该模型描述了元素占据的空间的内容。每个框都有四个边：边距、边框、填充和内容。计算元素宽高box-sizing决定元素宽高的计算方式box-sizing支持的属性content-box|border-box值描述content-box宽度和高度分别应用于元素的内容框。在宽度和高度之外绘制元素的填充和边框。border-box为元素指定的任何内边距和边框都将在设置的宽度和高度内绘制padding值descriptionauto浏览器计算内边距。length以特定单位指定填充值，例如像素、厘米等。默认值为0px。但是负值是不允许的。%根据父元素宽度的百分比指定填充。实际测试paddingpercentage，测试结果不相等，但大致相等。浏览器计算会有偏差，border边框绘制在“元素的背景之上”。换句话说，元素的背景是内容、填充和边框区域的背景。边框默认样式border-style:none;默认颜色border-color：元素文本颜色。利用该特性解决需要保持边框和文字颜色的设计需求。实现透明边框border-color:transparent;margin值说明浏览器自动计算外边距。length以特定单位指定边距值，例如像素、厘米等。%指定基于父元素宽度百分比的边距。margin:auto计算规则设置margin:auto后，行内元素和行内块级元素的margin值为0；对于块级元素，文档流中的margin-bottom和margin-top的值为0；margin-left和margin-right具有相同的值，根据以下公式计算'margin-left'+'border'+'padding'+'width'+'margin-right'=containingblock块级元素的宽度,在文档流中不margin-left和margin-right有相同的值，根据下面的公式计算'margin-left'+'border'+'padding'+'width'+'margin-right'=widthofcontainingblockmargin-top与margin-bottom相同的值，根据以下公式计算'margin-top'+'border'+'padding'+'height'+'margin-bottom'=containingblockmargincollapsing(outermargincollapsing,outermarginmerging)在同一个文档流中，在同一个BFC内，两个相邻块级元素的垂直边距（margin-top/margin-bottom）将被合并。当两个元素属于不同的BFC时，两个元素的边距不会合并。margincollapse发生的三种基本情况相邻兄弟元素块级父元素及其第一个/最后一个子元素空块块级元素
