CSS的两种盒子模型

最新推荐文章于 2024-06-16 11:49:47 发布

lao-qian

最新推荐文章于 2024-06-16 11:49:47 发布

阅读量164

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/qq_54096012/article/details/115057901

版权

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盒子模型

lao-qian

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS的两种盒子模型

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="
复制链接

扫一扫