使用 CSS3 box-sizing 属性

　　

　　CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。

　　

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

　　

　　实例

　　

　　.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;

　　

　　}

　　

　　从结果上看 box-sizing: border-box; 效果更好，也正是很多开发人员需要的效果。

　　

　　以下代码可以让所有元素以更直观的方式展示大小。很多浏览器已经支持 box-sizing: border-box; (但是并非所有 - 这就是为什么 input 和 text 元素设置了 width: 100%; 后的宽度却不一样)。

　　

　　所有元素使用 box-sizing 是比较推荐的：

　　

　　实例

　　

　　* {

　　

　　box-sizing: border-box;

　　

　　}