box-sizing属性

box-sizing属性

当设置一个元素为  box-sizing: border-box;此元素的内边距和边框不再会增加它的宽度,支持IE8+

.simple {

             width: 500px;

             margin: 20px auto;

             -webkit-box-sizing: border-box;

             -moz-box-sizing: border-box;

             box-sizing: border-box;

}

.fancy {

           width: 500px;

           margin: 20px auto;

           padding: 50px;

           border: solid blue 10px;

           -webkit-box-sizing: border-box;

           -moz-box-sizing: border-box;

           box-sizing: border-box;

}

 

两个div呈现一样的宽度

 

* {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

 

这样可以确保所有的元素都能按照这个方式排版,内边距和边框不会影响box的宽度

 

posted @ 2016-05-10 10:53  柒叶  阅读(166)  评论(0编辑  收藏  举报