在 Bootstrap 中的 box-sizing 使用注意

发布于 2019-04-11 19:30:57 字数 2470 浏览 3141 评论 0

使用 Bootstrap 也有一段时间了,更多的是注重浏览器显示效果,而不去注意其中的细节,比如 Bootstrap 中 box-sizing 的使用,我们一般都不会注意到。

Bootstrap 中的 box-sizing

在 Bootstrap 中,有这么一条重置的样式:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
   box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
   box-sizing: border-box;
}

上面的样式将所有的元素的 box-sizing 都设置成了 border-box,而默认值是 content-box,我们普遍使用的还是 content-box,因为这是默认的样式,而且一般写的时候也不会去重置这个样式。

在思考编写代码的细节,了解这点在写某些功能时很重要。

box-sizing 使用示例

这里我们样式一个示例,对同样样式的两个元素,我们使用 style 给其中一个设置 content-box,而另一个元素使用 Bootstrap 里面重置的 border-box。

HTML代码

<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<style>
.tabslide{
  width: 200px;
  height: 150px;
  background-color: green;
  border:4px solid blue;
  margin: 50px auto 0;
  padding:40px;
  color:#FFF;
}
</style>
<div class="tabslide" style="box-sizing:content-box">
  这个div设置box-sizing:content-box
</div>
<div class="tabslide">这个div设置box-sizing:border-box</div>

显示的效果如下:

在 Bootstrap 中的 box-sizing 使用注意

从上面的截图我们可以看出,设置 box-sizing 属性还是有很大却别的,接下来我们使用 jQuery 分别获取他们的宽度,看看有什么意想不到的结果。

使用 jQuery 获取 DIV 的宽度

我们使用下面的代码获取 DIV 的宽度

$(function(){
   $('.span1').html($('.tabslide').eq(0).width());
   $('.span2').html($('.tabslide').eq(1).width());
})

输出的结果如下:

第一个DIV的宽度:200
第一个DIV的宽度:112

可以看出,.tabslide 的宽度设置成 200px,但是因为 box-sizing 盒子尺寸设置不同的值,具体如下

  • content-box:盒子设置的宽度不包括边框 Border 和填充 Padding,所以盒子的 width=contentwidth
  • border-box:设置设个属性,盒子的宽度就是总的宽度,其中包括了 border+padding+contentwidth 的总宽度,而 jQuery 获取的还是 contentwidth,所以两个值是不一样的。

在 Bootstrap 中的 box-sizing 使用注意

要解决这个怪异的模式,可能你已经习惯使用 content-box 了,那么我们可以通过以下的方法设置。

1、覆盖样式

将你自己的 style 文件在 bootstrap.min.css 之后引入,那么你就可在文件中输入:

*{   box-sizing : content-box ; }

覆盖 Bootstrap 中设置的 border-box。

2、JS 动态设置

如果你觉得使用覆盖样式不好,或者项目的需要无法修改,那么可以使用 JS 脚本,动态的设置这个属性。

$("*").css("box-sizing", "content-box");

这样脚本运行以后会给每个元素都添加上面的样式,当然最好还是第一种方法,因为这个最简单,也是最高效的。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。