CSS3 box-sizing

一、概述
box-sizing属性是用来改变默认的css盒模型,用来计算元素的宽度和高度。可以用这个属性来模拟浏览器不正确的支持css盒模型规范的行为。
默认值:content-box
适用:所以具有高度和宽度的元素

二、语法
/* Keyword values */
box-sizing: content-box;
box-sizing: border-box;

/* Global values */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

三、值
content-box
按照css标准这是初始值和默认值。宽度和高度的计算是只包括内容,不包括padding、border、margin. 例如:如果 .box{width:350px;} 然后设置其边框{border:10px solid black;}那么最终在浏览器渲染的结果是 .box{width:370px}
简单来说,元素的尺寸可以这样计算:width = width of the content, and height = height of the content (不包括border和padding的值)
border-box
宽度和高度包括padding和border,但是不包括margin。这是IE浏览器盒模型的怪异模式。e.g. .box{width:350px;border:10px solid black;}在浏览器box渲染的结果是width:350px。这种情况内容框不能为负数,它的下限是0,可以用border-box使元素消失。
这种情况下元素的尺寸计算:width = border + padding + width of the content, and height = border + padding + height of the content.
padding-box
这个属性在很多文档里面都是没有列出来的,目前我测试的部分只有Firefox能支持这个属性。此时元素的宽度和高度计算是包括padding,但是不包括border和margin。e.g. .box{width:350px;border:10px solid black;padding:20px;}在浏览器box渲染的结果是width:370px。
这种情况下元素的尺寸计算:width = border + width of the content, and height = border + height of the
content.

四、兼容性
PC端

CSS3 box-sizing_第1张图片

移动端
CSS3 box-sizing_第2张图片

五、案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.wrapper{
width: 1200px;
margin: 50px auto 0 auto;
}
.wrapper div{
width: 100px;
height: 100px;
padding: 20px;
border:5px solid #000;
margin-right: 20px;
float: left;
}
.wrapper .content-box{
-webkit-box-sizing: content-box;
box-sizing: content-box;
background: green;
}
.wrapper .padding-box{
-webkit-box-sizing: padding-box;
box-sizing: padding-box;
background: yellow;
}
.wrapper .border-box{
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: orange;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content-box"></div>
<div class="padding-box"></div>
<div class="border-box"></div>
</div>
</body>
</html>

结果:
chrome、IE下测试结果

CSS3 box-sizing_第3张图片

firefox下测试结果

 CSS3 box-sizing_第4张图片

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