CSS3 box-sizing 属性

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

  1. .div1 {
  2. width: 300px;
  3. height: 100px;
  4. border: 1px solid blue;
  5. box-sizing: border-box;
  6. }
  7. .div2 {
  8. width: 300px;
  9. height: 100px;
  10. padding: 50px;
  11. border: 1px solid red;
  12. box-sizing: border-box;
  13. }

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

  1. * {
  2. box-sizing: border-box;
  3. }