Boostrap入门准备之border-box
来源:互联网 发布:淘宝灯具3c认证怎么弄 编辑:程序博客网 时间:2024/05/20 10:53
前言:在Boostrap学习过程中,尤其是网格系统的使用中,遇到了许多的坑,如果在学Boostrap之前,先做好一些准备功夫,就可以很好的避开这些坑了。现在,我们首先来说说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的怪异模式。
1 0
- Boostrap入门准备之border-box
- border-box之全局问题解析
- box-sizing:border-box
- box-sizing:border-box;
- box-sizing:border-box
- box-sizing:border-box;
- HTML+CSS基础之浅层理解box-sizing:content-box | border-box | inherit
- * { Box-sizing: Border-box } FTW
- box-sizing:border-box 解释
- CSS之使用、语法、选择器、border与box、背景
- webkit 入门之准备
- box-sizing:border-box;和 box-sizing:content-box;
- boostrap之tab
- box-sizing border-box 的理解
- content-box与border-box区别
- box-sizing border-box 的理解
- CSS3 box-sizing border-box 学习笔记
- box-sizing:border-box;的一些坑
- Android-View的手势分发
- 用Java写脚本,常用的一些方法
- 层次性结构
- ASP.NET常见面试题及答案(130题)
- 5678
- Boostrap入门准备之border-box
- MYSQL操作中错误The user specified as a definer ('root'@'%') does not exist的解决
- extern "c"用法解析
- RRC Connection Reconfiguration
- 集成支付宝
- * 有一对兔子,从出生后第3个月起每个月都生一对兔子,这对小兔子长到第三个月后每个月又生一对 * 小兔子,如此循环下去。假如兔子都不死,问,两年内,每个月的兔子有多少对? * @author A
- 2016-05-08随笔
- recursive neural network梳理(CS224D lecture9)
- C语言