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实现计算代码行数的简单方法附代码
Aug 13 Javascript
JQuery 学习笔记 选择器之三
Jul 23 Javascript
jQuery入门知识简介
Mar 04 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
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
一个ftp类(ini.php)
2006/10/09 PHP
10个实用的PHP代码片段
2011/09/02 PHP
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
JS中常用的正则表达式
2016/09/29 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
Python合并多个装饰器小技巧
2015/04/28 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
公司委托书范本5篇
2014/09/20 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
单身申明具结书
2015/02/26 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python