box-sizing属性的使用方法

定义和用法

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

默认值：	content-box
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.boxSizing="border-box"

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

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