什么是盒模型？

*什么是盒模型？*

盒模型概念：

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

盒模型组成如图-1所示：

图-1

CSS盒模型由内容区（content）、填充（padding）、边框（border）、页边空白（margin）组成。内容区是盒子的中心，呈现盒子的主要信息内容；填充是内容区和边框之间的空间；边框是环绕内容区和填充的边界；页边空白位于盒子的最外围，是添加在边框外周围的空间。

简单的比喻：

当在两个盒子里各装了一个鸡蛋，

Content：鸡蛋。

Padding：鸡蛋和盒子之间的距离。

Border：盒子的厚度。

Margin：两个盒子之间的距离。

图-2

盒模型简单的示例，如图-3：

图-3

Padding和margin的作用：

Padding：用来控制父元素和子元素之间的位置关系；

用来控制元素和内容之间的位置关系。

特点1：添加了padding值之后，padding值会把元素原有的大小撑大；如让元素原本大小不变得话，需要在元素的宽高上减掉所加的padding；

特点2：padding属性对背景图片 是不起作用的，可以说背景图片的位置，是不受padding的影响的。

特点3：背景色会延展到padding区域

Margin：控制同辈元素之间的位置关系。

特点：margin是在元素边框以外的空白区。

盒模型分为怪异盒模型和标准盒模型：

标准模式：盒子总宽度/高度=内容区宽度/高度+padding+border+margin

怪异模式：总宽度=width（content+border+padding）+margin

逆战班2.23