box-sizing属性的使用方法

时间：2014-6-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确实有一定的局限性,其中之一就是它不会影响页边距,为了适应这一点,可以转而对长度值进行动态计算.