box-sizing常用属性

box-sizing常用属性

box-sizing 是 CSS 中控制元素盒子模型计算方式的关键属性，它决定了元素的 width 和 height 是否包含内边距（padding）和边框（border）。以下是其常用属性及作用：

1. box-sizing: content-box（默认值）

• 作用：元素的 width 和 height 仅包含内容区域的尺寸，不包含 padding 和 border。

  • 实际占用空间 = width/height + padding + border。

• 示例：

  div {
    width: 200px;
    padding: 20px;
    border: 5px solid #000;
    box-sizing: content-box; /* 默认值 */
  }
  

  • 实际宽度 = 200px（内容） + 20px*2（左右 padding） + 5px*2（左右边框） = 250px。

2. box-sizing: border-box（推荐使用）

• 作用：元素的 width 和 height 包含内容、padding 和 border。

  • 实际占用空间 = 直接设置的 width/height。

• 示例：

  div {
    width: 200px;
    padding: 20px;
    border: 5px solid #000;
    box-sizing: border-box; /* 推荐值 */
  }
  

  • 实际宽度 = 200px（直接包含内容、padding 和 border）。

对比图

属性值	包含内容	实际占用空间计算	适用场景
content-box	仅内容区域	width/height + padding + border	默认行为，需精确控制内容尺寸
border-box	内容 + padding + border	直接等于设置的width/height	布局更直观，避免尺寸计算错误

使用场景

1. 全局统一布局： 推荐在 CSS Reset 中全局设置 border-box，避免反复计算尺寸：

   * {
     box-sizing: border-box; /* 所有元素默认使用 border-box */
   }
   

2. 响应式设计： 当元素需要固定宽度且包含 padding 时，使用 border-box 可以避免内容溢出。

3. 表单元素兼容性： 某些表单元素（如 input、textarea）默认使用 content-box，手动设置为 border-box 可以统一样式。

代码示例

1. 全局设置 border-box

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit; /* 继承全局设置 */
}

2. 避免布局问题

/* 使用 content-box（默认） */
.div1 {
  width: 200px;
  padding: 20px;
  border: 5px solid red;
  /* 实际宽度：200 + 20*2 + 5*2 = 250px */
}

/* 使用 border-box */
.div2 {
  width: 200px;
  padding: 20px;
  border: 5px solid blue;
  box-sizing: border-box;
  /* 实际宽度：200px（包含 padding 和 border） */
}

注意事项

• 兼容性：所有现代浏览器均支持 box-sizing（包括 IE8+）。
• 第三方库：若使用第三方 UI 库（如 Bootstrap），它们通常默认设置 border-box。
• 特殊元素：部分元素（如 img、iframe）可能因默认样式需要单独调整。

总结

• 推荐使用 border-box：简化布局计算，避免因 padding 或 border 导致的尺寸失控。
• 默认值 content-box：仅在需要严格按内容区域控制尺寸时使用。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github