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;
-->
