如何区分border-box和content-box

最新推荐文章于 2024-04-19 18:55:03 发布

weixin_33994429

最新推荐文章于 2024-04-19 18:55:03 发布

阅读量116

点赞数

文章标签：面试

原文链接：http://www.cnblogs.com/jansan/p/7747858.html

版权

最近在准备面试，突然发现css很多内容虽然会用，但是却并不理解，下午的时候回顾了一下盒模型，发现可以根据盒模型的名称去理解盒模型，写出来和大家分享一下。

所有HTML元素可以看作盒子，在CSS中，“盒子模型”规定了处理元素内容（content）、内边距（padding）、边框（border）和外边距（margin）的方式。而盒子模型分为两种：标准盒模型（又叫w3c盒模型）和怪异盒模型（又叫ie盒模型）。

标准盒模型（content-box）和怪异盒模型（border-box）的区别是width和height设置的“部分”不同。为元素设置好width和height之后

标准盒模型的content范围内的高度和宽度是不变的，padding和border是在content的范围外进行增加，将盒模型撑大，content范围内的大小始终不变。刚好对应上标准盒模型的名称content-box。

怪异盒模型的border范围内的高度和大小是不变的，padding和border是在border范围内进行增加，会压缩content大小，border范围内的大小始终不变。刚好对应上怪异盒模型的名称border-box。

设置标准盒模型的样式代码是：

box-sizing: content-box;

而设置怪异盒模型的样式代码是：

box-sizing: border-box;

划重点：box-sizing我们可以根据字面意思理解为盒子的大小，属性值为content-box时可以理解为content范围内的大小不变，属性值为border-box时可以理解为border范围内的大小不变。刚好对应上了我们上面对标准盒模型和怪异盒模型的描述。

所以我们只要根据这两个盒模型的名称记住它们分别是哪一部分大小固定不变就好了。

下面再用例子说明一下：

假设一个盒模型的属性如下：margin:20px;border:5px;padding:10px;width:100px;height:50px。

代码如下：

 1     <style>
 2         body {
 3             background: yellow;
 4         }
 5 
 6         .content {
 7             box-sizing: content-box;
 8             width: 100px;
 9             height: 50px;
10             margin: 20px;
11             padding: 10px;
12             border: 5px solid orange;
13             background: green;
14         }
15 
16         .border {
17             box-sizing: border-box;
18             width: 100px;
19             height: 50px;
20             margin: 20px;
21             padding: 10px;
22             border: 5px solid orange;
23             background: green;
24         }
25     </style>
26     <div class="content">content-box</div>
27     <div class="border">border-box</div>