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内核浏览器使用

posted on 2021-11-21 21:59  Walker-Yang  阅读(78)  评论(0编辑  收藏  举报

导航