css让padding、border不占据宽度

浏览870

CSS3 新增了 box-sizing 属性。 
以前,如果指定 div 的宽度为

div {    
    width: 120px;
    height: 120px;
    padding: 10px;    
}

则包含 padding,div 的实际宽度为 120px。 
有时我们不希望 padding 影响到 div 的实际宽度。以前只能手动计算 width,从 CSS3 开始可以通过 box-sizing 来做到这一点。

div {  
     -moz-box-sizing: border-box;  /*Firefox3.5+*/
      -webkit-box-sizing: border-box; /*Safari3.2+*/
     -o-box-sizing: border-box; /*Opera9.6*/
     -ms-box-sizing: border-box; /*IE8*/
     box-sizing: border-box;
     width: 120px;
     height: 120px;
     padding: 10px;
 }

则 div 的实际宽度为 120px。



  • 暂无任何回答