CSS盒子模型

盒子模型又叫做框模型（W3School里的说法就是“框模型”），它就像我们平时常见的快递，商家会把发给我们的货品收纳到一个盒子里。当然，CSS中的盒子除了内容，还具有一些能展现在屏幕上的其他属性，如内边距、外边距等。从W3School教程里面copy 了一张图，能帮助你很快知道这些属性的含义。

盒子模型的调用方法和前面提到的其他内容的调用相同，均使用合适的选择器即可。在这篇文章中，我会引导大家用盒子模型制作出一个模拟优设网的展示页面（对于设计师来说可以把你的作品更好地展现出来哦）：

01

盒子尺寸

就像我们在纸上画出一个盒子一样，盒子模型的尺寸由宽度width 和高度height 决定，例如呈现一个278px宽 * 232.5px高的白色盒子，为了明显一点，我将背景设置为#f2f2f2。代码如下：

效果就是这样，是当初“素颜”的模样。因为没有设定边距，所以内容会贴着盒子左对齐：

定义固定宽高的盒子很简单，但会发现当内容巨长时，盒子会放不下，怎么办呢？——没关系，我们可以定义一个最小高度，先来看看效果。左边是固定长度的盒子，超出的内容会溢出盒子；右边是定义最小长度的盒子，它会把超出的内容包括在内：

也就是说盒子的原定高度如果装不下内容了，盒子就会根据内容的长度自适应，只要把代码中的 height 改为min-height，即：

与之对应，还可以用max-height来定义最长高度，效果就是在内容少于盒子最大容量时会随内容改变高度：

代码为：

02

内容（content）

内容就是装在盒子里的东西，可以是文字，也可以是图片，甚至还可以是另一个盒子。在上面的盒子里加上图片的效果是：

你需要在块里面加上img 标签，并且限定图片的尺寸。因为我的图片原尺寸是1920*1080px，等比例缩小之后设为300*168.75px，在下面加上二级标题的配文：

03

边框（border）

边框有三种属性：风格（style）、宽度（width）和颜色（color）。说明一下style 属性，它包括：solid（实线）、dashed（虚线）、dotted（点线）、double（双实线）、groove（凹槽）、ridge（凸槽）、inset（凹边）以及outset（凸边），简单演示一下其中4种看看效果，其他类型可以自己试试：

实际网页中边框都不会如此花哨，如果四边均保持一致，可放在一行代码中，属性顺序可调换。例如，我想在作品展示的盒子上加上1px 的灰色边框，代码及相应结果如下：

04

内边距（padding）

内边距指的是内容与边框之间的间距，虽说叫这个名，但是padding 只能加在内容上。内边距根据方向分为上（padding-top）、下（padding-bottom）、左（padding-left）、右（padding-right）。可以分开写成四行代码，也可以按照上右下左的顺序写成一行，例如：

如果上下、左右分别相同，就可以只写两个数据，第一个表示上下间距，第二个是左右间距：

注意蓝色背景部分，我把图片和配文写在了一个块元素里面，这样才能保证是对这个整体设置内边距，不然图片和文字之间的间距就会变大。效果如下图：

同理，假设上左下右的内边距一样，简写为一个数据即可。

05

外边距（margin）

和内边距不同，margin 指的是盒子与盒子之间的间距，可以是并列关系，也可以是父子关系。我在创建一个同样的作品展示盒子，如果不设置margin，会发现它们黏在了一起：

这时给box1 设置一个margin，顺序同padding 为上左下右，结果是终于把两个拆散了。

特别说明一点，两个盒子排列在一起时会发生外边距合并，也就是说，相邻的盒子最近的那个间距实际上是其中外边距较大的那一个。这句话有点绕，举个例子：现在我把第二排的作品所在的盒子上边距设为50px，则上下两个之间的间距实际上就是50px，而不是60px（50+10px）。父子关系的盒子也同样遵循这个原则。

06

总结

一起回顾一下盒子模型的要点：

有四个主要属性：content、border、padding、margin，它们代表的都是什么意思呢？

不论边框还是内边距、边界都遵循着上右下左的顺时针顺序。

接下来可以动手试试自己写出一个展示作品的CSS 文件，当然，如果你开始做了，会发现还没有解决把几个作品放在一排和呈现浏览数、点赞数的问题，本人正在寻找真相中，且听下回分解！