css3 box-sizing属性

来源：互联网发布：淘宝售前客服用语编辑：程序博客网时间：2024/06/11 22:14

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了~

ie8+浏览器支持content-box和border-box；

ff则支持全部三个值。

使用时：

-webkit-box-sizing: 100px; // for ios-safari, android

-moz-box-sizing:100px; //for ff

box-sizing:100px; //for other

栗子：

<style type="text/css">    .content-box{        box-sizing:content-box;        -moz-box-sizing:content-box;        width: 100px;        height: 100px;        padding: 20px;        border: 5px solid #E6A43F;        background: blue;    }    .padding-box{        box-sizing:padding-box;        -moz-box-sizing:padding-box;        width: 100px;        height: 100px;        padding: 20px;        border: 5px solid #186645;        background: red;                    }    .border-box{        box-sizing:border-box;        -moz-box-sizing:border-box;        width: 100px;        height: 100px;        padding: 20px;        border: 5px solid #3DA3EF;        background: yellow;    }</style>

截图（ff）：

box-sizing：content-box | border-box

默认值：content-box

适用于：所有接受width和height的元素

继承性：无

取值：

content-box：: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ); 此属性表现为标准模式下的盒模型。
border-box：: padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ); 此属性表现为怪异模式下的盒模型。

示例：

content-box:
.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }
border-box:
.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }

说明：

设置或检索对象的盒模型组成模式。

对应的脚本特性为boxSizing。

兼容性：

浅绿 = 支持
红色 = 不支持
墨绿 = 部分支持
橙色 = 实验性质

支持版本\类型IEFirefoxSafariChromeOpera版本6-74-185.1.797-12.5版本8版本9

示例：

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>box-sizing_CSS参考手册_web前端开发参考手册系列</title><style>.test{width:200px;height:70px;padding:10px;border:15px solid #999;-moz-box-sizing:content-box;-ms-box-sizing:content-box;box-sizing:content-box;background:#eee;}.test2{width:200px;height:70px;padding:10px;border:15px solid #999;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;background:#eee;margin-top:20px;}</style></head><body><div class="test">content-box</div><div class="test2">border-box</div></body></html>

0 0

css3 box-sizing属性

取值：

示例：

content-box:

border-box:

说明：

兼容性：

示例：