说说box-sizing的基本概念

这里想说一下盒模型中的一个点,至于盒模型的话,作为CSS中最基础也最核心的一个概念,想必大家都是有所了解的,所以这里只想就盒模型中内容区域的宽度和高度在不同浏览器的模式下计算的差距,也就是盒模型中的content区域的大小,同时也看看在CSS3中,box-sizing对盒模型的处理。

概述

概述这种东西,我总觉得是针对某一个系统的知识点才能有内容的,而对于本篇中的内容,貌似我还真是不知道要说些什么,虽然我一直都知道在IEquirk mode 怪异模式)下,盒模型的content区域的widthheight计算时有别于其他浏览器下的计算的,但是一直认为现在的前端开发,其实是可以不考虑IE的怪异模式了,这里之所以又提起这个,只是很偶然的看到了box-sizing这个CSS3的属性,所以就拿出来再看看了。

怪异模式和其他模式下content区域的区别

既然是说box-sizing对于盒模型content区域的影响,那么就得先说一下,content区域在平时是怎么样的了,好,那继续看下面的一张图吧,是一个设置了宽高的div,在IE的怪异模式下和其他模式下的区别。

设置的一些参数值分别为:width:100px;height:100px;padding:10px;margin:10px;border:5px solid #f00;

那么根据我们的理解,在正常模式下,这个元素框的content区域的大小应该是一个边长为100px大小的正方形,而这个元素在页面上占据的区域的大小应该是一个边长为(100+20(两边的padding)+20(两边的margin)+10(两边的border))px的正方形。

而在怪异模式下呢,content区域的大小为(100-20(padding)-10(border))px,而这个元素占据的大小为(100+20(margin))px

对比下面的图示,我们就能更好的做出对比了:

插入图片:

box-sizing的概念

关于box-sizingW3C中的定义,请自行参考:box-sizing.

它支持三个属性:content-box(标准模式),border-box(IE下怪异模式),padding-boxcontent的宽度=width-2*padding,只有火狐支持(-moz-box-sizing:padding-box;)),inherit(继承父元素的box-sizing属性);

至于他们在浏览器上的实时显示效果,这里就不给示例看了,有兴趣的可以自己测试着玩玩。但是我想说一下,这里支持这种模式设置,有没有什么好处呢?

那就继续看下去吧!

box-sizing的使用

首先,我们看一个布局效果,一个有border:1pxdiv,内部两列布局,左侧占据30%的宽度,高度100px,右侧占据70%的宽度,高度自适应,每个模块的内边距padding=10px。有多少中方法可以实现呢?

1:首先想到的一种情况,就是使用float向左或者左右浮动设置:


<style>
.main{overflow:hidden;zoom:1;border:1px solid #111;margin:10px 0px;}
.left{float:left;width:30%;padding:10px;background-color:#aaa;height:100px;}
.right{float:left;width:70%;padding:10px;background-color:#ccc;}
.bsb{box-sizing:border-box;}
</style>
<body>
<div class = "main">
    <div class = "left">1</div>
    <div class = "right">2</div>
</div>
<div class = "main">
    <div class = "left bsb">1</div>
    <div class = "right bsb">2</div>
</div>


看下上述代码,在页面上的显示:

为什么第二组可以再同一行显示,而第一组却会分两行显示呢?这就是box-sizing的功能了。它可以在不添加额外标签的情况下,实现这个功能。

好了,这里我就不再举其他的例子来证明这个box-sizing的功能了,因为从上面的图示中,也可以看出,左侧占据30%的元素,如果不设置box-sizing=border-box的话,会占据更大的宽度,从而影响后面的布局。而设置之后,就不再受这些影响。

注:不是说任何时候,都不再受这些影响,比如,你给上述的两个子元素添加margin属性,那么就会被影响的,这里只是拿这个例子,来说明box-sizing有什么用的。

当然,向上面的功能,其实也可以有其他的方法实现的,比如多添加一层标签,代码如下:


<style>
.main{overflow:hidden;zoom:1;border:1px solid #111;margin:10px 0px;}
.left{float:left;width:30%;}
.right{float:left;width:70%;}
.left .leftdiv{padding:10px;background-color:#aaa;height:100px;}
.right .rightdiv{padding:10px;background-color:#ccc;margin:10px;}
</style>



<body>
<div class = "main">
    <div class = "left"><div class = "leftdiv">1</div></div>
    <div class = "right"><div class = "rightdiv">2</div></div>
</div>


这个时候的显示呢:

并且,这种写法,还不受其他属性的影响,所以说来,这才是最好的布局方法吧,当然啦,我觉得吧,如果再说有更好的布局的话,那么还是使用inline-block的布局方法才是最好的了(因为个人觉得像float,position这种特殊的方法,在一个页面上,用的越少,对于以后的扩展就越简单,用的太多,就乱了,就会导致扩展功能时,容易出错,因为它们会影响其他的布局)。


.main{border:1px solid #111;margin:10px 0px;}
.left{display:inline-block;width:30%;}
.right{display:inline-block;width:70%;}
.left .leftdiv{padding:10px;background-color:#aaa;height:100px;}
.right .rightdiv{padding:10px;background-color:#ccc;margin:10px;}



<body>
<div class = "main">
    <span class = "left"><div class = "leftdiv">1</div></span><span class = "right"><div class = "rightdiv">2</div></span>
</div>
<div class = "main">
    <span class = "left"><div class = "leftdiv">1</div></span>
    <span class = "right"><div class = "rightdiv">2</div></span>
</div>

这个时候的显示:

使用inline-block属性时,就要注意一下了,就是两个被设置了inline-block属性的元素之间,最好不要有换行符,如果有换行符,那么就会在两个元素之间出现一个3px的间隔区,所以对于上面完全相同的两组,第二组因为span元素之间,进行了换行,则导致布局变成了两行。

至于这里为什么使用的span元素,那就是因为inline-block这个属性,在ie7-的浏览器是不支持的,如果对于元素使用了inline-block,那么在ie7前的浏览器,因为不支持该属性,就会跳过该属性,显示标签的默认属性,如果这里使用的块级元素,那么就会以block的属性显示,则肯定是换行的。这里使用span元素,是因为在ie7前的浏览器,行内元素时可以设置宽度和高度的(会使元素拥有布局),所以这和inline-block完成的效果就大致相同了,所以最好使用行内元素操作inline-block的属性。

结尾

按我自己的感觉,这篇文章说起来,是没有多少内容的,只能算是凑个数吧,因为一些事情,竟然这么久没有写了,感觉挺对不起自己的,感谢最近发生的事情,和最近遇到的人,他们让我对我自己有了更进一步的了解。让我知道了自己的不足,让我有了成长的机会,感谢生命中出现的每一个人,谢谢!明天就是中秋了,祝福所有的人,中秋节快乐。

我们每个人都应当认清目前的自己,找到属于自己的位置,走自己的道路,人生,越努力,越幸运!

本文地址:http://www.zhangyunling.com/?p=203

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>