CSS3 边框大小

box-sizing 属性

允许以特定的方式定义匹配某个区域的特定元素。

默认值： content-box

JavaScript 语法： object.style.boxSizing="border-box"

语法

box-sizing: content-box|border-box|inherit;

content-box：宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

border-box：为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit：规定应从父元素继承 box-sizing 属性的值。

如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:

      
  
两个 div 现在是一样大小的!
 
 
php中文网
  

不使用 CSS3 box-sizing 属性

默认情况下，元素的宽度与高端计算方式如下：

width(宽) + padding(内边距) + border(边框) = 元素实际宽度

height(高) + padding(内边距) + border(边框) = 元素实际高度

      
  
这个是个较小的框 (width 为 300px ，height 为 100px)。
 
 
这个是个较大的框 (width 为 300px ，height 为 100px)。