关于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的资料很多，有兴趣的话可以去看看。

原文地址：https://www.cnblogs.com/jlfw/p/11940359.html