box-sizing属性的使用方法
作者：佚名 时间：2014-06-10
通过使用css的box-sizing属性,我们所提到的单位混合问题可以在一定程序上得到解决,为了解释这一点,在此简单地解释一下下面的代码示例这个示例中有三个栏,它们之间距离是20px,这意味其总宽度大于页面的宽度,即它们导致了溢出:
e,g{width:25%;}
f{padding:0 20px;
width:50%}
使用box-sizing属性可以改变测量宽度的起点边界,从而使规定宽度包括边框和填充,在下面的示例中,将border-box值用于box-sizing可以改变元素f以使其宽度包含填充;
f{
box-sizing:border-box;
padding:0 20px;
width:50%;}
现在整个f元素,包括填充在内,占页面总宽度的50%,所以元素的组合宽度为1000%,这全程它们很好地适应于它们的容器.
一些开发人员觉得box-sizing使用起来十分方便,所以他们主张通过通用选择器将这个属性应用于每个元素:
*{box-sizing:border-box;}
但这样的观点未免有些偏激,而且还会导致不必要的困难,所以更好的方法是只在实际需要时才使用这个属性:
div,.etc{box-sizing:border-box;}
但是,使用box-sizing确实有一定的局限性,其中之一就是它不会影响页边距,为了适应这一点,可以转而对长度值进行动态计算.
如没特殊注明，文章均为上海联楷网络原创,转载请注明来自：http://www.linksj.com/hynews/20151126/n3342.html
