如何使用 CSS3 box-sizing 属性?

  使用 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;
  
  }

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64956.shtml

张贴在3