CSS3 box-sizing 属性

box-sizing: content-box | border-box | inherit;

浏览器默认 content-box:标准盒子模型,在宽度和高度之外绘制元素的内边距和边框。
比如:元素宽度100px 设置了padding:0 10px; border:10px;
那么,元素最终宽度:100 + 10 * 2 + 10 * 2 = 140

border-box:IE盒子模型,通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
比如:元素宽度100px 设置了padding:0 10px; border:10px;
那么,元素最终宽度:100px
设置的padding只会向内挤压内容区域的宽度

你可能感兴趣的:(CSS3 box-sizing 属性)