CSS中box-sizing属性值的使用

一、背景和意义

在CSS中，box-sizing是一个相对比较冷门的属性。对于某些样式问题，修改box-sizing属性是最简洁的解决办法。但是由于该属性相对比较冷门，等遇到问题时可能更容易想到其他麻烦一点的替代方案而不是使用box-sizing。本文将给出box-sizing的一个使用示例。

二、存在问题的网页代码

这里先给出一段存在样式问题的网页代码，后面再尝试用box-sizing及其他替代方案解决该问题。 假设需要构建一个两栏布局的页面，其网页代码如下：

<style>
  header {
    background: #0000ff;
  }
  main {
    float: left;
    width: 70%;
    background: #ccff00;
  }
  aside {
    float: left;
    width: 30%;
    padding: 1.5rem;
    background: #cc00cc;
  }
</style>
<header>
  <h1>页面头部在此，使用h1标签和醒目的蓝色背景</h1>
</header>
<div class="container">
  <main>
    <h1>正文标题在此，使用h1标签</h1>
    <p>
      正文内容在此，使用醒目的绿色背景，预计正文将占据页面左侧70%的宽度。
    </p>
  </main>
  <aside>
    <div>侧边拦在此，使用醒目的紫色背景，预计侧边拦将占据页面右侧30%的宽度。</div>
  </aside>
</div>

以上代码展现的网页如下：

尽管代码设置了正文的width为70%，侧边栏的width为30%，但是展示的结果似乎不太符合预期。

三、box-sizing之外的解决方案

如果不太了解或者没有想到box-sizing属性，也有其他替代方案可以解决此问题。

3.1 使用魔术值宽度

新手最常想到的方法可能就是把侧边栏（即aside标签对应的元素）的width改小一点，试试29%、28%？在比较宽的屏幕下，当侧边边栏从30%试到26%时，正文和侧边栏在页面上就能够排下：

而对于页面比较窄的移动端应用，width要减少到25%才排得下。但这种方法对将来接手这段代码的同事来说很不友好，26%和25%都是一个奇怪的数值，后人在接手这段代码时可能会疑惑这个数字是怎么来的。

3.2 使用变量和calc函数

正文和侧边栏之所以排不下，是因为侧边栏有一个1.5rem的padding，其设置的width=30%加上padding之后实际宽度超过了30%。只要width减去padding的宽度，正文和侧边栏就能排得下。

修改前的CSS代码为：

  aside {
    float: left;
    width: 30%;
    padding: 1.5rem;
    background: #cc00cc;
  }

将这段CSS代码修改为：

  :root {
    --aside-padding: 1.5rem;
  }
  aside {
    float: left;
    width: calc(30% - var(--aside-padding) * 2);
    padding: var(--aside-padding);
    background: #cc00cc;
  }

修改后的页面效果为：

3.3 使用box-sizing

在不设置box-sizing的情况下，HTML元素的box-sizing会取默认值content-box，其表示任何指定的宽或高都只会设置元素内容的大小，这里的内容不包括内边距和边框。box-sizing有另外一个可用的值为border-box，其表示height和width属性会设置内容、内边距以及边框的大小总和，这刚好解决了本示例的样式问题。

修改前的CSS代码为：

  aside {
    float: left;
    width: 30%;
    padding: 1.5rem;
    background: #cc00cc;
  }

将这段CSS代码增加一个box-sizing属性：

  aside {
    box-sizing: border-box;
    float: left;
    width: 30%;
    padding: 1.5rem;
    background: #cc00cc;
  }

修改后的页面效果也符合预期：