【CSS核心概念】盒模型

一、什么是盒模型

当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。

中间是元素呈现内容的区域。这个区域的外面是内边距。再外面是边框。最外面的是外边距，外边距将该元素与其它元素分开。

—— 引用自MDN官网

二、盒模型的组成

盒模型由四个部分组成，如下：

1、内容区域（content）

2、内边距（padding）：元素内容与边框之间的填充距离（设置元素背景时，背景会填充该区域）

3、边框（border）

4、外边距（margin）：当前元素边框与其他外部元素之间的留白区域（设置元素背景时，背景不会填充该区域，margin的背景是透明的）

 三、盒模型的分类

1、盒模型又分为W3C标准盒模型和IE盒模型。

 2、两种盒模型的区别

　　①W3C标准盒模型：元素的属性width和height只包含内容区域content，不包含内边距padding和边框border；

　　②IE盒模型：元素的属性width和height包含内容区域content、内边距padding、边框border，即content + padding + border。

　　大部分现代浏览器使用W3C标准盒模型，ie5和ie6使用的是IE盒模型。

四、box-sizing

1、作用

CSS3中的box-sizing属性规定了使用何种方式计算元素的宽高。兼容ie8+。

2、取值

　　content-box：元素的宽高采用标准盒模型来计算，默认值；

　　border-box：元素的宽高采用ie盒模型来计算；

　　inherit：元素宽高的计算方式继承父元素。

3、栗子

　　1）添加一个div，设置宽高为100*100

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
}

　　谷歌浏览器，F12审查元素：

　　此时div的宽高为100*100，即这时div的大小 = content的大小；

       

　　2）接着给div添加内边距

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    padding: 20px; /* padding的值只有一个时，表示元素上下左右的内边距均为20px */
 }

 　　此时div的宽高为140*140，即这时div的大小 = content + padding；

       

　　3）接着给div添加边框

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    padding: 20px;
    border: 10px solid red;
}

　

　　此时div的宽高为160*160，即这时div的大小 = content + padding + border；

       

　　4）最后给div添加外边距

       

　　此时div的宽度还是160*160，同时可以看到div四周多了20px宽度的留白，即margin不会影响div的大小。

　　

 　　综上，我们可以得出：

　　　　①默认情况下，盒子的width、height属性的值只是设置了盒子内容区域的大小，而不包含内边距和边框大小；

　　　　②盒子的大小 = 内容区域 + 内边距区域 + 边框区域，而不包含外边距margin。

　　5）设置div的box-sizing为border-box

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    padding: 20px;
    border: 10px solid red;
    margin: 20px;
    box-sizing: border-box;
9 }

   

 　　此时div的大小为100*100，即当设置了box-sizing为border-box时，无论如何修改padding、border、margin的值，div的大小都等于元素width和height的值。