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 class="outer" style="width:500px; height:500px; padding:100px; border:1px solid #000; background-color: yellow; "> <div class="inner" style="width:100%; height:100%; background-color:pink;"></div> </div>
运行代码得出：outer的高度为702px，宽度为702px，inner的宽度为500px，高度为500px；这里大家应该都没什么疑问吧，我们现在看看另外一段代码：
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div class="outer" style="width:500px; height:500px; padding:100px; border:1px solid #000; background-color: yellow; ">
<div class="inner" style="width:100%; height:100%; background-color:pink;"></div>
</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>
<style type="text/css">
.testdiv{
padding: 10px;;
width:100px;
border: 10px solid
}
</style>
</head>
<body >
<div class="testdiv" > 普通</div>
<div class="testdiv" style=" -webkit-box-sizing: border-box;">
特殊
</div>
</body>
</html>
相关文章
这篇文章主要介绍了JavaScript中的各种宽高属性的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
虽然很少会遇到给bind返回的函数做new操作的场景，但面试中还是会涉及到的，所以本文将实现一下兼容new操作的bind写法，顺便学习一下new操作符，需要的可以参考一下2022-07-07
javascript如何在foreach循环完成之后执行一个回调函数
forEach()是前端开发中操作数组的一种方法,主要功能是遍历数组,其实就是 for 循环的升级版,下面这篇文章主要给大家介绍了关于javascript如何在foreach循环完成之后执行一个回调函数的相关资料,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了原生js实现二级联动菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
这篇文章主要介绍了CSS或者JS实现鼠标悬停显示另一元素的相关资料,需要的朋友可以参考下2016-01-01
切换面板具备功能：鼠标划过不同的题目会有不同的图片和解说，可以连接到不同的网站，实例代码如下，感兴趣的朋友可以参考下哈2013-06-06
Proxy是es2015 标准规范加入的语法，很可能你只是听说过，但并没有用过，毕竟考虑到兼容的问题，不能轻易地使用Proxy特性。但现在随着各个浏览器的更新迭代，Proxy的支持度也越来越高：而且使用Proxy进行代理和劫持，也渐渐成为了趋势。2021-05-05
这篇文章主要介绍了js进行表单验证的方法,实例分析了各种常见的js表单验证技巧,需要的朋友可以参考下2015-02-02
本文主要给大家分享一下在编写JavaScript代码的时候存在的一些方法和技巧，虽然有时候条条大路都通向罗马，但是也许总会有那么一条最短的路径可走。希望通过以下几点JavaScript技巧让大家的代码“化繁为简，化简为精”2017-05-05
这篇文章主要介绍了动态读取JSON解析键值对的方法,需要的朋友可以参考下2014-06-06
最新评论