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读取xml
Nov 04 Javascript
JavaScript判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
javascript来定义类的规范小结
Nov 19 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
原生JS实现不断变化的标签
May 22 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
JS 基本概念详细介绍
Oct 16 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
js动态为代码着色显示行号
2013/05/29 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
javascript如何实现create方法
2019/11/04 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
使用python实现扫描端口示例
2014/03/29 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
pip install命令安装扩展库整理
2021/03/02 Python
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
C语言基础笔试题
2013/04/27 面试题
艺术设计专业个人求职信
2013/09/21 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
人事文员岗位职责
2015/02/04 职场文书
公务员个人总结
2015/02/12 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers