CSS中box-sizing属性值的使用

一、背景和意义

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

二、存在问题的网页代码

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

html 复制代码
<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代码为:

css 复制代码
  aside {
    float: left;
    width: 30%;
    padding: 1.5rem;
    background: #cc00cc;
  }

将这段CSS代码修改为:

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代码为:

css 复制代码
  aside {
    float: left;
    width: 30%;
    padding: 1.5rem;
    background: #cc00cc;
  }

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

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

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

相关推荐
树上有只程序猿10 分钟前
终于有人把数据库讲明白了
前端
猩兵哥哥16 分钟前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
司宸17 分钟前
Prompt设计实战指南:三大模板与进阶技巧
前端
RoyLin19 分钟前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript
华仔啊24 分钟前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
江城开朗的豌豆33 分钟前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
vivo互联网技术41 分钟前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js
江城开朗的豌豆1 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
会飞的青蛙1 小时前
GIT 配置别名&脚本自动化执行
前端·git