CSS3 Box Sizing

CSS3中新增的 box-sizing 属性允许在元素的总宽度和高度中包括内边距（填充）和边框。

不指定box-sizing情况下，元素的宽度及高度是以下方式计算的：

• width + padding + border = 元素的实际宽度
• height + padding + border = 元素的实际高度

指定元素box-sizing情况下，元素的宽度高度是以下方式：

• width + border = 元素的实际宽度
• height + border = 元素的实际高度

元素指定的padding被包含在指定的width和height中，当然如果padding的实际宽度或高度大于指定的width和height，那么元素显示的实际高度和宽度就是padding后的值。

.div1 {
   width: 300px;
   height: 100px;
   border: 1px solid blue;
   box-sizing: border-box;
 }

 .div2 {
   width: 300px;
   height: 100px;
   padding: 50px;
   border: 1px solid red;
   box-sizing: border-box;
 }

 .div3 {
   width: 300px;
   height: 100px;
   padding: 160px;
   border: 1px solid red;
   box-sizing: border-box;
 }

CSS3 box-sizing 属性的使用

在页面中如何才能让元素的高度和宽度更统一呢，建议的方式是做以下的声明。

* {
    box-sizing: border-box;
}

该代码可以让所有元素以更直观的方式展示大小