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 相关文章推荐
javascript网页关键字高亮代码
Jul 30 Javascript
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
js初始化验证实例详解
Nov 26 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 Javascript
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中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
前端开发基础javaScript的六大作用
2020/08/06 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python在命令行下使用google翻译(带语音)
2014/01/16 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
python爬虫基本知识
2018/03/05 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
军人违纪检讨书
2014/02/04 职场文书
商业街策划方案
2014/05/31 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
2015年大学生工作总结
2015/04/21 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS