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解决图片缩放及其优化的代码
May 23 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
koa2的中间件功能及应用示例
Mar 05 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 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
python处理文本文件并生成指定格式的文件
2014/07/31 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
详解python算法之冒泡排序
2019/03/05 Python
提升Python程序性能的7个习惯
2019/04/14 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
大学生就业自我鉴定
2013/10/26 职场文书
简历里的自我评价
2014/01/31 职场文书
晚会主持词开场白
2014/03/17 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS