9-7.box-sizing属性

box-sizing属性

1.正常情况下，元素的内边距和边框会在元素设置的宽度和高度之外进行绘制

2.为了解决这个问题，需要使用box-sizing属性，书写格式：box-sizing：值；

3.content-box  默认值，表示元素的内边距和边框会在元素设置的宽度和高度之外进行绘制

4.border-box  表示元素的内边距和边框会在元素设置的宽度和高度之内进行绘制 

                     设置的宽度=左边框+左内边距+元素宽度+右内边距+右边框

　　　　　　设置的高度=上边框+上内边距+元素高度+下内边距+下边框

5.注意：IE9以下版本的浏览器不支持该属性

6.为了使别的浏览器也支持该属性：

-moz-box-sizing:border-box 火狐浏览器使用

-webkit-box-sizing:border-box  webkit内核浏览器使用