Boostrap入门准备之border box


Posted in Javascript onMay 09, 2016

之前在学习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 相关文章推荐
js加解密 脚本解密
Feb 22 Javascript
关于javascript中的parseInt使用技巧
Sep 03 Javascript
CSS和Javascript简单复习资料
Jun 29 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 #Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 #Javascript
jQuery绑定事件的几种实现方式
May 09 #Javascript
jquery实现左右无缝轮播图
Jul 31 #Javascript
node.js从数据库获取数据
May 08 #Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 #Javascript
基于jquery实现最简单的选项卡切换效果
May 08 #Javascript
You might like
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
php编写的简单页面跳转功能实现代码
2013/11/27 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php实现学生管理系统
2020/03/21 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
半角全角相互转换的js函数
2009/10/16 Javascript
通过javascript设置css属性的代码
2009/12/28 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
JavaScript中的this机制
2016/01/30 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
专升本学生毕业自我鉴定
2014/10/04 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
区域经理岗位职责
2015/02/02 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP