流畅易懂CSS教程·盒子模型

盒子模型

CSS的基石，就是超级无敌重要的意思。

1 引言

为什么说它非常重要？

因为我们在开发中用到的<div>，<p>等各种元素，其结构就类似于一个盒子，而我们给它们添加样式就类似于给一个盒子添加样式。

比如，

<div style="background: red">测试</div>

我们看上面的代码，我们没有设置高度和宽度，但是最终的样式是一个长方形的红色方框。

因为div，p等元素本质上类似于一个盒子，所以最后的样式效果就是一个红色的方框。

而这个盒子在CSS里面的名称就叫做——盒子模型。

当然盒子模型，并不是个简单的方框盒子，它本身还有很多属性，接下来我们开始正式了解。

2 content-box

盒子模型有很多个种类，就像矿泉水瓶也有不同的形状，而我们现在先说说常用的盒子模型——content-box，也称为标准盒子模型。

而content-box是浏览器默认的盒子模型，如果我们不特殊设置对应的属性，那浏览器就按照这个盒子模型进行渲染样式。

如下图所示，

content-box由三部分组成，分别是content——所要展示的内容，padding——内边距，border——边框，margin——外边距。

而我们给元素添加样式，就是从这四个方面入手的。

我们通过例子来分别说明这几个属性。

2.1 content-box·content

<div style="background: red;
              width:100px;
              height:100px;"></div>

通过width和height，设置了一个大小为100px*100px的正方形，而这个就是内容区用于显示自己要展示的内容。

ps：注意了，在标准盒子里面，width和height属性是用来调整content区域的大小。而在其它类型盒子中，则不是这样的。

2.2 content-box·border

border指的是边框，示例如下，

  <div style="background: red;
              width:100px;
              height:100px;
              border:10px solid #00F;"></div>

通过border属性，设置了一个10px粗的边框。

2.3 content-box·margin外边距

外边距指边界距离外面的距离。

示例如下，

  <div style="background: red;
              width:100px;
              height:100px;
              margin:20px 0 0 0;
              border:10px solid #00F;"></div>

通过margin属性，给方框设置一个向上20px的外边距，所以方框上边界和浏览器就需要空出20px的距离。

2.4 content-box·padding

示例如下，

  <div style="
              width:100px;
              height:100px;
              padding:20px 0 0 0;
              border:10px solid #00F;">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>

我们通过margin属性给内容和边框设置了一个20px的内边距，也就是内容区域和边界空出20px的距离。

通过以上的示例，了解到标准的盒子模型由content，padding，border和margin四部分组成。

当然这四个属性本身还有自己的特殊用法，在这里就不多赘述了，之后会单独开文章介绍，进行深入学习。

3 border-box

我们之前说了，除了标准盒子模型外，还有另一个十分常用的盒子模型——border-box，也称为IE盒子模型。

（ps：之所称为IE盒子模型，是因为他是IE浏览器为了适应特定情况而诞生的模型，当然也可以用于其他浏览器。）

border-box和content-box最大的一个不同就是width和height元素属性的不同。

根据上图，我们可以了解到，border-box中的width和height属性，是指content、padding、border三个属性合起来总的大小。

而content-box的height和width指的是content区域的大小。（可以看一下文章最上面的那张标准盒子模型图）。

站在巨人的肩膀上

https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model