乐趣区

CSS3中的box-sizing(content-box与border-box)

CSS3 中的 box-sizing 属性允许以特定的方式来指定盒模型,有两种方式:
content-box:标准盒模型,又叫做 W3C 盒模型,一般在现代浏览器中使用的都是这个盒模型 border-box:怪异盒模型,低版本 IE 浏览器中的盒模型现代浏览器和 IE9+ 默认值是 content-box。语法格式:
box-sizing:content-box | border-box
区别:content-box:padding 和 border 不被包含在定义的 width 和 height 之内。盒子的实际宽度 = 设置的 width+padding+borderborder-box:padding 和 border 被包含在定义的 width 和 height 之内。盒子的实际宽度 = 设置的 width(padding 和 border 不会影响实际宽度)

退出移动版