？是什么

框——页面元素皆为框。

框模型——Box Model，定义了元素进行框处理的内容（就是定义你这个元素的框应该是什么样的），是元素内边距、外边距以及边框的一种计算方式。想要设计好一个优秀的网页，框模型一定是必不可少需要认真考虑的。

？组成

盒子模型就像一个盒子，它有内容（Content）、内边距（padding）、边框（border）、外边距（margin）这四个属性。

先来一个形象的比喻，我们都知道细胞的结构有细胞膜、细胞质、细胞核，细胞核中存放着我们传承五千年的优秀基因DNA，那么现在就可以把存放DNA的细胞核看成是一个内容（Content）；细胞质也就是细胞膜与细胞核之间的物质，看成是内边距（padding）；细胞膜看成是边框（border），而细胞与细胞之间的距离看成是外边距（margin），整个细胞就是一个元素，要想描述一个细胞(元素）就必须将这四个属性都说明才能对这个细胞（元素）有一个清晰的认知--------------（我是学生物的！）

一、 内容（Content）

内容就是盒子里面装的东西（可以看成是细胞核），用于显示文本和图像。实实在在的文本图像存放空间。

二、内边距（padding）

1、内边距就是盒子里面的东西与盒子之间的距离（可以看成细胞质），是元素边框与内容之间的距离。内边距会扩大元素边框占地区域。

2、语法：

• 属性
  padding：value
  padding-top/right/bottom/left : value;

• 取值
  1》以px为单位的数值
  例如：padding : 20px;
  2》以%为单位的数值
  例如：padding : 50%;

• 简单写法

1》padding：value
四个方向内边距值

2》padding:v1 v2;
v1 : 上下
v2 : 左右

3》padding:v1 v2 v3;
v1 : 上
v2 : 左右
v3 : 下

4》padding:v1 v2 v3 v4;
上 右 下 左

三、边框（border）

元素边框可以看成就是盒子本身（可以看成细胞膜），盒子本身具有一定的面积空间。

四、外边距（margin）

1、外边距就是盒子与盒子之间应该保持的距离（可以看成细胞与细胞之间的距离），是围绕在元素边框周围的空白距离，也能表示当前元素与其他元素之间的空间量。

2、语法

• 属性
  margin：定义某元素四个方向的外边距
  margin-top/right/bottom/left

• 取值

1》具体的数值，以px为单位的数字

2》取值为正，元素正向移动，取值为负，元素反向移动
margin-left
取值为正，让元素右移动
取值为负，让元素左移动
margin-top
取值为正，让元素下移动
取值为负，让元素上移动

3》取值为% ，外边距的值，占父元素宽或高的占比是多少

4》取值为 auto
自动计算外边距的值
注意：auto只对块级的左右外边距有效
使用方式：
1、为块级元素设置宽度
2、再设置其左右外边距为 auto
表现：块级元素在父元素中水平居中显示

• 简单写法

1》margin:value;
四个方向的外边距都相同

2》margin:v1 v2;
v1 : 上下外边距
v2 : 左右外边距

3》margin:v1 v2 v3;
v1 : 上外边距
v2 : 左右外边距
v3 : 下外边距

4》margin:v1 v2 v3 v4;
上 右 下 左
ex:
maring:0 auto;

• 自带外边距的元素
  h1~h6,p,ul,ol,dl,dd,pre,body
  通过 CSS Reset(CSS重写) 的手段，来重置具备外边距的元素
  重写方法：
  body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,pre{
  margin:0;
  }
• 外边距的特殊效果

1》外边距合并

当两个垂直外边距相遇时，他们将合并成一个，最终的距离取决于两个外边距中距离较大的那个

2》外边距的溢出

在下面这些特殊的条件下，为子元素设置上外边距时，有可能会作用到父元素上
A、父元素没有上边框
B、为第一个子元素设置上外边距时

解决方案：
a、为父元素增加上边框
弊端：对父元素的高度有影响
b、使用父元素的上内边距来取代子元素的上外边距
弊端：对父元素的高度有影响
c、在父元素的第一个子元素位置处，增加一个空

3》行内元素 以及 行内块元素的垂直外边距
1、行内元素垂直外边距无效(img除外)
2、行内块元素，设置垂直外边距时，整行元素都跟着发生改变