box-sizing的使用

box-sizing

人们慢慢的意识到传统的盒子模型不直接,所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子,唯一的区别是两个元素都设置了 box-sizing: border-box; :

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

<div class="simple">

我们现在一样大小了!

</div>

<div class="fancy">

万岁!

</div>

既然没有比这更好的方法,一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

这样可以确保所有的元素都会用这种更直观的方式排版。

不过 box-sizing 是个很新的属性,目前你还应该像我上面例子中那样使用 -webkit- 和 -moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+的。

### 逐行解析 CSS 代码 `-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box` #### 1. `-webkit-box-sizing: border-box;` 此代码为 Webkit 内核浏览器(如 Chrome 和 Safari)提供兼容性支持,确保这些浏览器能够正确应用 `box-sizing: border-box` 的行为[^4]。具体来说,它改变了元素的盒模型计算方式,使得宽度和高度包含内边距(padding)和边框(border),而不是将它们加到指定的宽高之外。 #### 2. `-moz-box-sizing: border-box;` 此代码专门为 Mozilla Firefox 浏览器的 Gecko 内核提供兼容性支持,功能与 `-webkit-box-sizing` 相同,即改变盒模型计算方式,使宽度和高度包含内边距和边框[^4]。 #### 3. `box-sizing: border-box;` 这是标准的 CSS 属性定义,适用于所有现代浏览器,无需特定前缀。当设置为 `border-box` 时,元素的总宽度和高度包含了内容、内边距和边框。这意味着为元素设定的宽度和高度将同时包含这些部分,无论其内边距和边框如何变化[^2]。 例如: ```css .example { box-sizing: border-box; width: 200px; padding: 20px; border: 10px solid black; } ``` 在这种情况下,元素的实际宽度将始终保持为 200px,而不会因为内边距和边框的增加而超出指定宽度[^2]。 --- ### 兼容性意义 在早期的浏览器版本中,不同厂商对 CSS 规范的支持程度不一致,导致某些属性需要通过特定的前缀来实现跨浏览器兼容性。`-webkit-` 和 `-moz-` 前缀分别针对 Webkit 和 Gecko 内核浏览器提供了兼容性支持,确保即使在旧版浏览器中也能正确渲染样式。 随着浏览器技术的发展,大多数现代浏览器已经完全支持无前缀的标准属性 `box-sizing: border-box`,但仍保留前缀形式以向后兼容旧版浏览器。 --- ### 示例代码解析 以下是一个完整的示例,展示 `box-sizing: border-box` 的效果: ```css .imgBox img { width: 140px; height: 140px; padding: 20px; border: 20px solid orange; margin: 10px; } #contentBox img { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; } #borderBox img { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } ``` - 在 `#contentBox img` 中,使用了 `content-box` 模式,此时元素的宽度和高度仅包括内容区域,内边距和边框会额外增加到指定尺寸之外[^3]。 - 在 `#borderBox img` 中,使用了 `border-box` 模式,此时元素的宽度和高度包括内容、内边距和边框,实际渲染尺寸不会超出指定值[^3]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yusirxiaer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值