内容简介:盒子模型这个名词来自英文里面的Box modelmodel。怎么理解盒子模型呢?我认为凡是里面可以盛装其他内容的标签,我们都可以称之为盒子。例如:div,p,span等等标签都可以往里面再添加元素,我们都可以称之为盒子模型,相反例如img,input等等 里面是无法盛装其他元素,我们就能称之为盒子。关于盒子,主要有以下几个要点:由于历史和技术遗留原因,现在存在的盒子模型主要有两种:
盒子模型这个名词来自英文里面的Box modelmodel。怎么理解盒子模型呢?我认为凡是里面可以盛装其他内容的标签,我们都可以称之为盒子。例如:div,p,span等等标签都可以往里面再添加元素,我们都可以称之为盒子模型,相反例如img,input等等 里面是无法盛装其他元素,我们就能称之为盒子。
关于盒子,主要有以下几个要点:
- width/height:内容的宽高
- padding:内边距
- border:边框
- margin:外边框
二、 现在存在的盒子模型标准
由于历史和技术遗留原因,现在存在的盒子模型主要有两种:
2.1、 标准盒子模型
2.2、 IE盒子模型:
由上图我们可以清楚的发现,ie盒子和标准盒子之间的区别,整理如下:
- 在 标准盒子模型中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
- IE盒子模型中,width 和 height 指的是内容区域+边框+内边距的宽度和高度。
其实这一点Android就好多了,一家独大,标准就一套。
三、 不同盒子模型的转化
ie盒子和标准盒子设计出来肯定有其设计出来的意义,众所周知,现代浏览器普遍使用的都是标准盒子,但是作为一个Android开发工程师,我很多情况下 还是会认同ie盒子的一些标准,那么是否在开发中一定要用标准盒子呢?首先来看下面一段代码:
<div class="parent"> <div class="son"></div> <div class="son2"></div> </div> // css .son { width: 100px; height: 100px; padding: 10px; margin: 10px; border: 5px solid blue; background-color: red; box-sizing: content-box; } .son2 { width: 100px; height: 100px; padding: 10px; margin: 10px; border: 5px solid red; background-color: blue; box-sizing: border-box; } 复制代码
效果如下:
从上面图上可以发现:界面上面出现了两种不同规则的盒子,查纠其代码,发现起作用的方式是:box-sizing属性。我们来看一看box-sizing吧:
box-sizing : content-box|border-box|inherit;
- **content-box :**默认值,可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。
即总宽度=margin+border+padding+width
-
**border-box :**设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容,即ie盒子
-
inherit:规定应从父元素继承 box-sizing 属性的值
四、 最后来谈谈我在实际开发中遇到的有关盒子的问题
4.1、 盒子内的第一个子元素和最后一个子元素的margin会印象父盒子的位置
首先我们在开发的时候经常会遇到这样的情况,来看下面一段代码:
// css .son { margin-top: 100px; width: 100px; height: 100px; background-color: red; } // html <div class="parent"> <div class="son"></div> </div> 复制代码
按照我这个经常做Android的看法,应该是父布局不懂 然后子盒子对应父盒子向下平移100px才对呀。但是实际效果并没有。这种问题的解决办法是:
- 给父元素加边框border 代码如下:
.parent { border-top: 1px solid; } 复制代码
效果如下:
- 给父元素设置padding值 (这个就不再赘述了)
- 将父盒子设置成BFC
4.2、 一些默认的元素是带padding,margin的
这种情况比较常见,例如ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。针对这种情况,我们一般都添加一个:
*{ margin:0; padding:0; } 复制代码
来清除各个元素的默认margin,padding属性
4.3、 用盒子画三角形。
我看在面试里面经常考的一个点,我这里就简单的画一下,我之前也用伪类画过,我们现在盒子画一下:
.parent { width : 0; height: 0; border : 100px solid transparent; border-top : 100px solid red; /*方向自己定义*/ } 复制代码
效果如下:
说在最后
一个中午的时间也写不了多少文章,但是自从昨天写完了那篇BFC之后,就总感觉要写一篇文章来介绍一下盒子,正好今天中午不怎么想睡觉,就写了出来。 接下来,按照自己制定的轨迹来说,还有变换、动画、预处理器三个知识点。写完了就开始从头到尾复习js了,如果我在复习上面存在有什么遗漏的知识点,请以评论、私聊的方式联系我。
以上所述就是小编给大家介绍的《从头开始复习css之盒子模型》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- CSS——把“可以动的盒子”更优雅地展示:② “居中”盒子
- CSS盒子模型
- CSS盒子模型
- 斐讯 N1 盒子 部署 NKN 挖矿
- CSS——让“盒子”动起来:① 浮动
- CSS题目系列(2) - 实现一个固定比例盒子
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
一本书读懂24种互联网思维
安杰 / 台海出版社 / 2015-3-1 / 39.80元
互联网思维已经不再局限于互联网,与当初人类史上的“文艺复兴”一样,这种思维的核心即将开始扩散开去,对整个大时代造成深远的影响。本书是深入研究互联网思维的精华之作,作者深入浅出地集中阐述了24种互联网思维的内核与精神,并结合实例对这24种互联网思维逐一进行了点评。对于个人与企业如何抓住互联网思维背后正喷薄而出的工作、生活、商业上的大革新与大机遇,如何在互联网思维下进行运作,如何运用互联网思维进行升级......一起来看看 《一本书读懂24种互联网思维》 这本书的介绍吧!