css-1：盒子模型-CSDN博客

本文链接：https://blog.csdn.net/fakerlove/article/details/132136603

本文介绍了CSS基础框盒模型，一个盒子由content、padding、border、margin四部分组成。CSS中盒子模型分为W3C标准和IE怪异盒子模型，默认是标准盒子模型，二者计算盒子总宽高方式不同。还介绍了box - sizing属性，其不同值对应不同盒子模型表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、盒子模型是什么？
当对一个文档进行布局（layout）的时候，浏览器渲染引擎会根据标准之一的CSS基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。
一个盒子由四个部分组成：content、padding、border、margin
在这里插入图片描述
content：实际内容，显示文本和图像
border:即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成。
padding：即内边距，清楚内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响
margin：即外边距，在元素外创建额外的空白，空白通常指不能放其它元素的区域。
上述是一个从二维角度观察盒子，下面再看看三维图。
在这里插入图片描述

当我们在浏览器查看元素时，却发现元素大小变成了240px，这是因为在CSS中，盒子模型可分成
W3C标准盒子模型
IE怪异盒子模型
默认情况下，盒子模型为W3C标准盒子模型。

2、标准盒子模型
标准盒子模型，是浏览器默认的盒子模型。
下面看看标准盒子模型的模型图。
在这里插入图片描述
从上图可以看到：
盒子总宽度=width+padding+border+margin
盒子总高度=height+padding+border+margin
也就是width/height只是内容的高度，不包含padding和border值。
所以上面的问题中，设置width为200px，但由于存在padding，但实际盒子的宽度有240px

3、IE怪异盒子模型
同样看看IE怪异盒子模型的模型图：
在这里插入图片描述
从上图可以看到：
盒子总宽度=width+margin
盒子总高度=height+margin
也就是width/height包含了padding和border值

4、Box-sizing
CSS中的box-sizing属性定义了引擎应该如何计算一个元素的总宽度和总高度。
在这里插入图片描述
content-box：默认值，元素的width/height不包含padding，border，与标准盒子模型一致。
border-box元素的width/height包含padding，与怪异盒子模型表现一致。
inherit指定box-sizing属性的值，应该从父元素继承。
回到上面的例子中，设置盒子为border-box模型。
在这里插入图片描述
这个时候，可以发现盒子所占据的宽度为200px。