经典盒子型号类型的差异

盒子模型是css中的一个重要概念。只有理解了盒子模型，我们才能更好地打字。事实上，盒子模型有两种类型：ie 盒子模型和标准 w3c 盒子模型。

即盒子模型的范围还包括 margin、border、padding、内容，以及标准 w3c 盒子模型的区别在于： 即盒子模型的内容部分包含边框和pading。

示例： 框的边距 为 20px，边框 为 1px ，填充是 10px，内容 的宽度为 200px，高度为 50px，

如果按照标准 w3c 盒子模型来解释，那么这个盒子需要占据的位置是：宽度 20*2+1*2+10*2+200=262px，高度 20*2+1*2*10*2+50=112px，盒子实际尺寸为：宽度 1*2+10*2+200=222px，高度 1*2+10*2+50=72px；

如果使用即盒子模型，那么这个盒子需要占据的位置是：宽度 20*2+200=240px，高度 20*2 +50=70px ，盒子的实际尺寸为：宽度 200px，高度 50px。

箱体型号选择：

如何选择“标准 w3c 盒子型号”？很简单，只需在网页顶部添加 doctype 语句 即可。如果不添加 doctype 语句，那么每个浏览器都会根据自己的行为来理解网页，即 ie 浏览器会使用 ie 盒子模型来解释你的盒子， ff 将使用标准的 w3c 盒子模型来解释你的盒子，因此网页在不同的浏览器中会显示不同。相反，如果你添加 doctype 语句，那么所有浏览器都会使用标准 w3c 盒子模型来解释你的盒子，并且网页将在每个浏览器中一致地显示。

在CSS中，margin指的是自身框架与自身外部另一个容器边框的距离，即容器的外距； padding是容器内部距离。

一、填充

1，语法结构

（1）左内边距：10px； 填充左

（2）padding-right:10px; 填充右

（3）padding-top:10px; 填充上衣

（4）padding-bottom:10px; 底部填充

(5) 填充：10px； 四个侧面均匀填充

（6）内边距：10px 20px； 顶部、底部、左侧和右侧填充

（7）内边距：10px 20px 30px； 顶部、左侧、右侧、底部填充

（8）内边距：10px 20px 30px 40px； 顶部、右侧、底部、左侧填充

2，可能值

（1）长度以特定单位指定填充长度

(2)% 基于父元素宽度的内边距长度

(3)auto 浏览器计算填充

(4) 继承 指定应从父元素继承填充

3、浏览器兼容性问题

(1) 所有浏览器都支持 padding 属性

(2) 任何版本的IE 均不支持属性值“inherit”