box-sizing属性
2016-10-07 本文已影响0人
forLovn
box-sizing属性实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*IE8+、Opera 以及 Chrome 支持 box-sizing 属性，Firefox 支持替代的 -moz-box-sizing 属性。
*box-sizing: content-box | border-box | inherit
*content-box：默认值，按W3C盒模型进行处理 (element width = border + padding + border + content)
*border-box：按IE6盒模型进行处理 (element width = content)
*注：content就是我们所定义的width;
*/
.content-box{
box-sizing:content-box;
-moz-box-sizing:content-box;
width: 100px; /*element Elewidth =100px+2*20px+2*5px=150px*/
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
}
.padding-box{
/*与上面box-sizing:content-box;相同*/
box-sizing:padding-box;/*element Elewidth =100px+2*20px+2*5px=150px*/
-moz-box-sizing:padding-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #186645;
background: red;
}
/*怪异模式border-box*/
.border-box{
box-sizing:border-box;
-moz-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;
}
</style>
</head>
<body>
<div class="content-box">空间大小</div>
<!--<div class="padding-box">空间大小</div>-->
<div class="border-box">空间大小</div>
</body>
</html>
<!--
小结:
1:box-sizing:content-box;正常模式
EleWidth(元素宽度) = width + border*2(两边border相同) + padding*2(两边padding相同);
此时：文档空间 content=width;
2:box-sizing:border-box;怪异模式
EleWidth(元素宽度) = width ;
此时：文档空间 content=width - border*2 - padding*2;
-->
