怪异模型和标准模型

<!-- 以下实际内容宽高，不包括margin
标准：box-sizing:content-box; 搜狗：biaozhunmoxing,guaiyimoxing
1，标准盒模型：是有W3C组织指定的，除了IE低版本外，基本所有的浏览器都遵循这个标准。
实际宽度：width + padding + border;
实际高度：height + padding + border;

2，怪异：box-sizing:border-box;
怪异盒模型：只在IE6,7,8中使用。
当width给值就不会改变，而里面的内容宽度会随着padding 和 border 变大而改变
当height给值就不会改变，而里面的内容宽度会随着padding 和 border 变大而改变 -->

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .one{
 8             width: 800px;
 9             height: 400px;
10             margin: 20px auto;
11             /* background: #00f; */
12             border: 1px solid red;
13             box-sizing: border-box;//怪异模型，可以随便设置border padding
14         }
15         .two{
16             float: left;
17             width: 25%;
18             height: 100%;
19             box-sizing: border-box;//怪异模型，可以随便设置border padding
20         }
21         .one > div:nth-child(odd){
22             background: #f0f;
23             border: 1px solid #0f0;
24         }
25         .one > div:nth-child(even){
26             background: #00f;
27             border: 10px solid #f38383;
28         }
29     </style>
30 </head>
31 <body>
32     <div class="one">
33         <div class="two">1</div>
34         <div class="two">2</div>
35         <div class="two">3</div>
36         <div class="two">4</div>
37     </div>
38 </body>
39 </html>

怪异模型 和 标准模型

怪异模型和标准模型