CSS 盒子模型
CSS盒子模型（盒子模型）
所有 HTML 元素都可以被视为框。 在 CSS 中，术语“盒模型”用于设计和布局。
CSS 盒子模型本质上是一个封装周围 HTML 元素的盒子，它包括：边距、边框、填充和实际内容。
盒模型允许我们将元素放置在其他元素和周围元素的边框之间的空间中。
下图展示了盒子模型：
不同部分的解释：
为了在所有浏览器中正确设置元素的宽度和高度，您需要了解盒模型的工作原理。
元素宽度和高度
重要提示：当您指定 CSS 元素的宽度和高度属性时，您只是设置内容区域的宽度和高度。 请注意，对于完全尺寸的元素，您还必须添加填充、边框和边距。 。
下面示例中的元素的总宽度为 300px：
div {宽度：300px;
：25px 纯绿色；
: 25 像素;
: 25 像素;
我们自己算算：
300 像素（宽度）
+ 50px（左+右内边距）
+ 50px（左+右边框）
+ 50px（左边距+右边距）
= 450 像素
想象一下您只有 250 像素的空间。 让我们将元素的总宽度设置为 250 像素：
div {宽度：220px;
: 10 像素;
：5px纯灰色；
: 0;
最终元素总宽度的计算公式如下：
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左边距 + 右边距
最终元素总高度的计算公式如下：
总元素的高度 = 高度 + 顶部内边距 + 底部内边距 + 上边框 + 下边框 + 上边距 + 下边距
浏览器兼容性问题
一旦为页面设置了正确的 DTD，大多数浏览器将呈现如上所示的内容。 但是 IE 5 和 6 渲染不正确。 根据W3C规范，元素内容所占用的空间是通过width属性来设置的，并单独计算内容周围的和值。 不幸的是，IE5.X和6在怪异模式下使用自己的非标准模型。 这些浏览器的宽度属性不是内容的宽度，而是内容、内边距和边框的宽度之和。
不过，有一些方法可以解决这个问题。 但目前最好的解决办法就是回避这个问题。 也就是说，不要向具有指定宽度的元素添加内边距，而是尝试向该元素的父元素和子元素添加内边距或内边距。
IE8及之前的IE版本不支持设置-width和-width属性。
解决IE8及之前版本不兼容的问题，可以在HTML页面声明
