关于盒模型的一个CSS3样式

今天逛博客的时候发现一属性box-sizing 

 查阅文档发现 用在使用padding的标签里面特别好使

大家都知道 使用padding后 元素的宽高也会对应的增加

所以写了padding后 要减掉对应的宽高  这样就要计算 显得比较麻烦。

这时候box-sizing 就有用啦  加上它以后 就不用取计宽高啦

对应语法

box-sizing ： content-box | border-box | inherit

参数取值

content-box:此值维持css2.1盒模型的组成模式，border|padding|content {element width=border+padding+content}

border-box:此值改变css2.1盒模型组成模式，content|border|padding {element width=content}

注意加上浏览器前缀 -webkit-、 -moz- 

自己测试吧 IE8+ Firefox 2.0+ Chrome 1.0.x+ Safari 3.1+ 都支持

<div style="100px; height:100px; background:#555; padding:30px; -webkit-box-sizing:border-box;"></div>