盒模型

看客老爷们，昨天写的是常见的标签，很简单吧，今天我们要弄明白一个知识点：盒模型；

什么是盒模型：

首先盒模型是一个盒子；我们可以把每一个标签都可以看成一个盒子，盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。

![![ 标准盒模型1.png
]

盒模型的组成：

CSS盒子模式都具备这些属性：内容(content)、填充(padding)、边框(border)、边界(margin)

那下面我们就一一说说盒模型的这几个属性吧：

• 1 border的使用方法border：边框宽度 边框风格 边框颜色;例如：{border:5px solid #f00;}边框宽度：border-width:边框颜色：border-color:边框样式：border-style : solid(实线) /dashed(虚线)dotted(点划线)/double(双线)

  也可单独设置一方向边框，如：底边框：border-bottom:边框宽度 边框风格 边框颜色左边框：border-left:边框宽度 边框风格 边框颜色右边框：border-right:边框宽度 边框风格 边框颜色上边框：border-top:边框宽度 边框风格 边框颜色

• 2 padding的使用方法

  padding设定页面中一个元素内容（content）到元素的边缘（border）之间的距离。背景色和背景图像会覆盖padding和content组成的区域、

  用法：1）用来调整内容在容器中的位置关系

  2）用来调整子元素在父元素中的位置关系。注：padding属性需要添加在父元素上。

  3）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性。

  属性值的4种方式：四个值：上 右 下 左 {padding:10px 20px 30px 40px;}三个值：上 左右 下 {padding:10px 20px 30px;}二个值：上下 左右 {padding:10px 20px;}一个值：四个方向 {padding:2px;}

  可单独设置一方向填充，如：padding-top:10px; padding-right:10px;padding-bottom:10px;padding-left:10px;

• 3 margin的使用方法外边距(margin)在border之外，margin区域不应用背景;CSS中margin默认值为0

  属性值的4种方式：

  四个值：上 右 下 左 {margin:10px 20px 30px 40px;}

  三个值：上 左右 下 {margin:10px 20px 30px;}

  二个值：上下 左右 {margin:10px 20px;}

  一个值：四个方向 {margin:2px;}{margin:0 auto;}

  在浏览器中横向居中。可单独设置一方向边界，如：margin-top:10px;

现在我们的重点来了——盒模型分为：标准盒模型和怪异盒模型。

标准盒模型

标准盒模型1.png

标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

怪异盒模型

怪异盒模型1.png

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding。

最后见一个重要属性：

可通过将 box-sizing 设置为 "border-box"；将标准盒子变成怪异盒模型；