CSS 样式 box-sizing: border-box； 用于控制元素的盒模型如何计算宽度和高度

文章目录

• • • [`box-sizing: border-box;` 的含义](#box-sizing: border-box; 的含义)
    • • 默认盒模型 (`content-box`)
      • [`border-box` 盒模型](#border-box 盒模型)
    • 在微信小程序中的应用
    • 示例

在微信小程序中，CSS 样式 box-sizing: border-box; 用于控制元素的盒模型如何计算宽度和高度。具体来说， box-sizing: border-box; 会改变元素的尺寸计算方式，使其更符合预期的行为。

box-sizing: border-box; 的含义

默认盒模型 (content-box)

默认情况下，元素的盒模型是 content-box，这意味着：

• 宽度和高度：只包括元素的内容区域。
• 内边距（padding） 和 边框（border） 不会被包含在宽度和高度之内，而是额外增加到总宽度和高度上。

例如，假设有一个 <view> 元素，其样式如下：

view {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
}

在这种情况下，实际的总宽度和高度会是：

• 总宽度：100px（内容宽度） + 20px（左右内边距） + 10px（左右边框） = 130px
• 总高度：100px（内容高度） + 20px（上下内边距） + 10px（上下边框） = 130px

border-box 盒模型

当设置 box-sizing: border-box; 时，元素的宽度和高度包括内容区域、内边距和边框。这意味着：

• 宽度和高度：包括内容区域、内边距和边框。
• 内边距（padding） 和 边框（border） 不会增加到总宽度和高度上，而是从指定的宽度和高度中扣除。

例如，假设有一个 <view> 元素，其样式如下：

view {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
}

在这种情况下，实际的总宽度和高度会是：

• 总宽度：100px（包括内容宽度、左右内边距和左右边框）
• 总高度：100px（包括内容高度、上下内边距和上下边框）

具体来说：

• 内容宽度：100px - 20px（左右内边距） - 10px（左右边框） = 70px
• 内容高度：100px - 20px（上下内边距） - 10px（上下边框） = 70px

在微信小程序中的应用

在微信小程序中，使用 box-sizing: border-box; 可以避免因为内边距和边框导致的布局问题，使布局更加灵活和可控。特别是在需要精确控制元素尺寸的情况下，使用 border-box 盒模型是非常有用的。

示例

<view class="container">
  <view class="box">这是一个盒子</view>
</view>

.container {
  width: 300px;
  height: 300px;
  border: 1px solid red;
}

.box {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 20px;
  border: 5px solid blue;
}

在这个例子中，.box 元素的实际宽度和高度仍然是 300px，即使它有内边距和边框。