Boostrap入门准备之border box

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：690 次日期：2016-07-02 11:47:27

温馨提示：小编为您整理了“Boostrap入门准备之border box”,方便广大网友查阅！

之前在学习Bootstrap的过程中，遇到各种奇葩的坑，如果在学习bootstrap之前，准备工作先做好，就可以或多或少的避开一些坑。下面小编开始给大家介绍border-box这个属性的知识。

在Boostrap自带的css文件：boostrap.css中，有这样一段代码：

* {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

这意味着在写代码时，这个属性将无处不在。那这个box-sizing:boder-box究竟是什么鬼呢？让我们先来看看一段很普通的代码：

</div>

运行代码得出：outer的高度为702px，宽度为702px，inner的宽度为500px，高度为500px；这里大家应该都没什么疑问吧，我们现在看看另外一段代码：

* {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

</div>

这段代码其实就是头两段代码的相加，可以简单的理解为现在是在Boostrap的框架中开始写代码，代码运行的结果为：outer的宽度为500px，高度为500px；inner的宽高为298px；

导致这样的结果的原因是：box-sizing:border-box使得元素的宽高不会受padding和border的影响，如上面的代码，即使outer有padding,border,但是padding和border都不会影响outer的宽高，outer的宽高还是500px；但是padding和border跑哪里去了？答案：跑到里面去了！打开浏览器的调试工具，看outer的样式详情：

我们可以明显的看到，padding和border都是有效的，只是它们占据了outer的内部空间，由于padding:100px占据了outer的200px宽高值，border占据了2px的宽高值，所以inner只能获得298px的宽高值。

如果大家有ie下的网页开发经验的话，就会发现，box-sizing:border-box就是低版本ie的怪异模式。

以上所述是小编给大家介绍的Boostrap入门准备之border box的相关知识，大家都学会了吗，如果有疑问欢迎给我留言，小编会及时回复大家的。同时也非常感谢大家对脚本之家网站的支持！

下面给大家介绍box-sizing border-box 的理解

-webkit-box-sizing: border-box; 则div 设置的宽高将包含边框及 padding

<!DOCTYPE html>

<html>

<head>

<title>box-sizing</title>

.testdiv{

padding: 10px;;

width:100px;

border: 10px solid

}

</style>

</head>

<body >

特殊

</div>

</body>

</html>

上一篇：基于Jquery插件Uploadify实现实时显示进度条上传图片

下一篇：CKEditor无法验证的解决方案（js验证+jQuery Validate验证）

手机网站地址：Boostrap入门准备之border box

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！