关于CSS你应该知道的基础知识

浏览器渲染引擎通过盒模型的方式来布局html元素。我们可以将每一个html元素都看做是一个盒子，每一个盒子都有长和款，多个这样的盒子组成了我们的网页。

Margin，Border，Padding

每一个盒子都会有margin，border和padding属性。我们可以通过CSS来指定这三个属性的大小。例如：

.box {

  margin: 40px;

  padding: 20px;

  border: black 2px solid;

  text-align: center

}

<body>

  <div class="box">

    box

  </div>

  <div class="box">

    box

  </div>

  <div class="box">

    box

  </div>

</body>

box class被应用后的样式如下：

margin 应用后元素与元素之间产生了相应的空间。
border 应用后元素的外边框增加了宽度。
padding 应用后元素内的内容和边框之间产生了相应的空间。

我们同样可以通过Chrome的Developer Tools来验证相应的属性。上面的代码在Developer Tools中的计算结果如下：

上栗中，我们将盒子四个方向的margin都设置成了40px。我们还可以只修改上下左右中的其中一个或几个。

/* 具体指定上右下左的margin */

.box {

  margin-top: 10px;

  margin-right: 20px;

  margin-bottom: 30px;

  margin-left: 40px;

}

/* 以简写的方式指定margin，依次为上，右，下，左 */

.box {

  margin: 10px 20px 30px 40px;

}

/* 以简写的方式指定margin，依次为上下，左右 */

.box {

  margin: 10px 20px;

}

padding设置的语法与margin相同，这里就不列出了。border的设置比较特殊，有机会会找专门一个章节来介绍。

这里还有一个小技巧，就是如果想将一个元素水平居中，可以将它的margin-left和margin-right属性设置成auto。即左右两边的margin根据当前窗口宽度自动调节到合适大小。

Margin 塌陷

下面这块代码中，盒模型的计算结果和我们预期的不太一样：

.box1 {

  margin-bottom: 30px;

  border: black 2px solid;

  text-align: center

}

.box2 {

  margin-top: 60px;

  border: black 2px solid;

  text-align: center

}

<body>

  <div class="box1">

    box 1

  </div>

  <div class="box2">

    box 2

  </div>

</body>

如果按照前面的解释，box1和box2这间的空间应该是30px + 60px = 90px，但实际上只有60px。原因是浏览器渲染元素时，垂直方向相邻的元素margin值只会取设置的较大的那个值。这就是Margin Collapsing。在上栗中，最后计算结果是60px。通过Chrome的工具，我们可以验证，如下图：

橘黄色部分为两个盒元素的margin区域。图例中可以看出margin的高度不是两个元素marign相加，而是取较大的那个。

block元素和inline元素

html元素中，有一些元素是block元素，即元素的宽度会占满整个窗口的宽度，例如div。还有一些是inline元素，即元素的宽度是根据自己内容需要计算出来的宽度，且会紧贴在前一个inline元素的后面，例如span。

<body>

  <div>

    我是block

  </div>

  <span>

    我是inline

  </span>

  <span>

    我是inline

  </span>

  <div>

    我是block

  </div>

</body>

我们可以通过display属性还改变元素的默认显示属性。例如想将一个span以block形式展现，只需将其设置成display: block;

还有一点需要注意的是，以inline形式展现的元素，是不受上下margin属性控制的，如果想给一个inline元素设置margin-top和margin-bottom则需要将display设置成inline-block.

<span class="inline">

  我是inline

</span>

<span class="inline">

  我是inline

</span>

上下margin不起作用

.inline {

  margin: 20px;

  border: red 1px solid;

}

上下margin起作用

.inline {

  margin: 20px;

  border: red 1px solid;

  display: inline-block;

}

盒模型长度和宽度的计算

盒模型的长度可以通过width属性还设置，例如width: 200px。我们来看一个例子：

.box {

  margin: 10px auto;

  padding: 10px;

  border: red 1px solid;

  text-align: center;

  width: 200px;

}

<div class="box">

  box

</div>

我们设置了元素宽度是200px，但通过Developer Tools查看到最后的结果是222px。原因是浏览器渲染引擎默认理解width属性是内容加上padding的宽度，整个元素宽度还要加上border和margin，即200px + 2 * 10px (margin) + 2 * 1px (border) = 222px。

这种对width属性的处理很多时候会带来一些不便，因为我们无法准确的知道最后的元素到底有多宽。要解决这个问题，可以通过设置box-sizing: border-box;，这样元素最后整体宽度就是我们设置的宽度了。如下图：

我们在引用一些CSS框架时，大多数框架都会将所有元素的box-sizing设置成border-box。有兴趣的同学可以看看Bootstrap等框架的源码。

* {

  box-sizing: border-box;

}

关于盒模型的高度，可以通过height属性来设置。而如何将设置垂直居中，还是建议使用flex-box来实现，网上关于flex-box的资料很多，有兴趣的话可以去看看。