box-sizing属性笔录

2018-02-11 14:06:37来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

【引文】 

box-sizing属性是CSS3中引入的,有人解释为它可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素内部的补白区域,以及边框的宽度与高度

【通俗理解】

它是一种容器高宽的计算方法,通过指定容器的盒子模型类型,达到不同的展示效果

【解析】

先来理解下box-sizing属性border-box,content-box,也就是常说的正常盒模型与异常盒模型

(1)正常盒模型

      正常盒模型,是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是正常盒模型content-box,它也是标准 w3c 盒子模型

      正常盒模型是指:盒模型的大小包括content,padding,border,并且先做content

      正常盒模型的大小会以内容优先自动扩展,内部子元素超过父元素给定的大小,会将父元素撑大

(2)怪异盒模型

      怪异盒模型,是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为这种怪异盒模型,但是由于其自身的特殊性,手机页面中也有使用怪异盒模型

      怪异盒模型是先做盒。然后添加border,padding,最后做content。即保证盒模型优先,先做盒再放内容,不管内容是否放得下,一般手机上用的更多

      更通俗的说,怪异盒模型中,父元素的盒模型确定,子元素是无法撑开父元素的盒模型,只能在盒模型剩余空间展示

【选择】

那应该选择哪中盒子模型呢?

一般是“标准 w3c 盒子模型”

怎么样才算是选择了“标准 w3c 盒子模型”呢?

很简单,就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明,那么各个浏览器会根据自己的行为去理解网页

即 ie 浏览器会采用 ie 盒子模型去解释你的盒子,而 ff 会采用标准 w3c 盒子模型解释你的盒子。所以网页在不同的浏览器中就显示的不一样了。

反之,假如加上了 doctype 声明,那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了

 

【案例解析】

例如:当一个容器宽度定义为 width:100%;  之后,如果再增加 padding 或者 border 则会溢出父容器,是向外扩张的

 

 

如果使用该样式,指定为 box-sizing: border-box; 则 padding 和 border 就不会再溢出,而是向内收缩的,这个效果感觉非常实用

 

特别是 input 和 textarea 等 现在设置 100% 再直接增加内边距和边框也不用再进行复杂的计算和适配了

 

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台