14. 盒模型高级

box-sizing：改变盒模型计算方式

在第 9 章我们学过，默认情况下 width 只控制内容区域。padding 和 border 会往外撑。

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
}

这个盒子实际占用宽度是 244px，不是 200px。这在布局时很烦人。

box-sizing 就是来解决这个问题的。

content-box（默认值）

box-sizing: content-box;

这是默认行为。width 和 height 只包含内容区域，padding 和 border 额外计算。

border-box（推荐）

box-sizing: border-box;

width 和 height 包含内容、padding 和 border。设置 width: 200px，整个盒子就是 200px。

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
  box-sizing: border-box;
}

这个盒子实际宽度就是 200px。内容区域会被压缩到 156px（200 - 40 - 4）。

box-shadow：盒子阴影

box-shadow 可以给元素添加阴影效果，让元素有”浮起来”的感觉。

基本语法

box-shadow: 水平偏移 垂直偏移 模糊半径 颜色;

.card {
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}

• 水平偏移：正值向右，负值向左
• 垂直偏移：正值向下，负值向上
• 模糊半径：值越大越模糊，0 表示锐利
• 颜色：阴影颜色，推荐用 rgba 半透明

各参数详解

/* 只写两个值：水平和垂直偏移，颜色默认黑色 */
box-shadow: 5px 5px;

/* 三个值：加上模糊半径 */
box-shadow: 5px 5px 10px;

/* 四个值：加上颜色 */
box-shadow: 5px 5px 10px grey;

常用阴影效果

/* 轻微阴影，适合卡片 */
.light {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 中等阴影，适合悬浮效果 */
.medium {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 强烈阴影，适合弹窗 */
.heavy {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

扩展半径

box-shadow 还有第四个长度值，控制阴影的扩展大小：

box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
/* 水平 垂直 模糊 扩展 颜色 */

扩展半径会让阴影变大，正值扩大，负值缩小。

内阴影 inset

默认阴影在元素外面。加一个 inset 关键字，阴影会画在元素内部：

.inset {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

内阴影常用于输入框，营造”凹陷”效果。

多重阴影

box-shadow 可以叠加多个阴影，用逗号分隔：

.card {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.08);
}

多重阴影可以做出更立体的效果。