css的两种盒子模型
1.w3c标准盒模型(标准盒子模型)
2.IE盒模型(怪异盒子模型)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>两种盒子模型</title>
8 </head>
9 <style>
10 .box1 {
11 text-align: center;
12 box-sizing: content-box;
13 width: 100px;
14 height: 100px;
15 background-color: rgb(253, 150, 53);
16 padding: 5px;
17 border: 10px solid rgb(86, 247, 22);
18 margin: 15px;
19 }
20 .box2 {
21 text-align: center;
22 box-sizing: border-box;
23 width: 100px;
24 height: 100px;
25 background-color: violet;
26 padding: 5px;
27 border: 10px solid rgb(22, 247, 228);
28 margin: 15px;
29 }
30 </style>
31 <body>
32 <div class="box1">box1</div>
33 <div class="box2">box2</div>
34 </body>
35 </html>
上面代码运行结果,可以看见两个div是不一样大的,主要是两种盒模型的计算方式不一样
类名为box1的div宽为130px,高为130px
这就是普通盒模型,它的宽计算为margin-left+border-left+padding-left+content+padding-right+border-right+margin-right
类名为box2的div宽为100px,高为100px
这就是IE盒模型,它的宽的计算为100px=margin-left+border-left+padding-left+content+padding-right+border-right+margin-right
在标准的盒子模型中,width指content部分的宽度
在IE盒子模型中,width表示content+padding+border这三个部分的宽度
css3的box-sizing属性是决定盒子类型
box-sizing的默认值是content-box
box-sizing: content-box 是W3C标准盒子模型
box-sizing: border-box 是IE盒子模型