【CSS3】css3:box-sizing属性

前端开发探路者 2016-12-01

本文介绍了css3中的box-sizing属性,在这之前读者需要预备知识width的范围。

浏览器的支持情况

Internet ExplorerYesversion 8.0Mozilla FirefoxYes29.02.0 -moz-chromeYes10.04.0 -webkit-operaYesversion 9.5SafariYes5.13.2 -webkit-

box-sizing属性

box-sizing属性可以有三个值:content-box(defalut),border-box属性。

  1. content-box,border和padding不计算入width之内。
  2. border-box,border和padding计算入width之内。

【CSS3】css3:box-sizing属性【CSS3】css3:box-sizing属性

<style>
      div{
        width:100px;
        height:100px;
        border:20px solid yellow;
        padding:20px;
        background:green;
        background-clip:content-box;

      }
      .content-box{
        box-sizing:content-box;
        }
      .border-box{
        box-sizing:border-box;
      }
    </style>
View Code

效果截图:

【CSS3】css3:box-sizing属性

相关推荐