提到Box-sizing,先前的一篇文章也提到过,其实在布局的时候很好用,可以省去很多多余的代码,至于兼容性,目前还只能在移动端应用多,因为它是CSS3的属性。大家看几个例子,应该就一目了然了。
那我想要一个元素100%显示,又必须有一个固定的padding-left或padding-right,还有1px的边框,怎么办?
combox{ width: 100%; padding-left: 10px; border: 1px solid red; }
这样编写代码必然导致出现横向滚动条,怎么办?要相信问题就是用来解决的。这时候伟大的css3为我们提供了box-sizing属性,对于这个属性的具体解释不做赘述。让我们看看如何解决上面的问题:
combox { width: 100%; padding-left: 10px; box-sizing:border-box; -moz-box-sizing:border-box; /*Firefox*/ -webkit-box-sizing:border-box;/*Safari*/ border: 1px solid red; }
是不是很神奇呢。接下来看下box-sizing的具体属性吧。
box-sizing是CSS3的box属性之一
box-sizing :content-box || border-box || inherit
content-box:此值为其默认值,其让元素维持W3C的标准Box Model,也就是说元素的宽度/高度(width/height)等于元素边框宽度(border)加上元素内边距(padding)加上元素内容宽度 /高度(content width/height)即:Element Width/Height = border+padding+content width/height。
border-box:此值让元素维持IE传统的Box Model(IE6以下版本),也就是说元素的宽度/高度等于元素内容的宽度/高度。(从上面Box Model介绍可知,我们这里的content width/height包含了元素的border,padding,内容的width/height【此处的内容宽度/高度=width /height-border-padding】)。
inherit:规定应从父元素继承 box-sizing 属性的值。
为了更能形像看出box-sizing中content-box和border-box两者的区别,我们先简单来看一个示例图,如下所示:
其中代码如下:
<div id="contentBox"><img src="/images/header.jpeg" alt="" /></div> <div id="borderBox"><img src="/images/header.jpeg" alt="" /></div>
.imgBox img{ width: 140px; height: 140px; padding: 20px; border: 20px solid orange; margin: 10px; } #contentBox img{ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; } #borderBox img{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
从上面的案例中 我们可以很明显的看出content-box和border-box两者的区别,在实际的生产应用中,CSS3 box-sizing 属性 为我们提供的极大的方面,以后在页面的排版中也不会在烦恼页面的错乱问题了
网友评论文明上网理性发言 已有2人参与
发表评论:
评论列表