1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>怪异盒模型</title>
6 <style type="text/css">
7 div{
8 width: 200px;
9 height: 200px;
10 border: 10px solid blue;
11 padding: 30px;
12 /*box-sizing: border-box;*/
13 box-sizing: content-box;
14 }
15 </style>
16 </head>
17 <body>
18 <div>
19 <!--
20 box-sizing:盒模型的设置
21
22 标准盒模型 content-box
23 盒子的宽:border+padding+width
24 盒子的高:border+padding+width
25 怪异盒模型:border-box
26 盒子的宽:就是设置的width 会包含 border + padding
27 盒子的高:就是设置的 height 会包含 border + padding
28 -->
29 </div>
30 </body>
31 </html>
自己改下属性就知道效果!
原文地址：https://www.cnblogs.com/zjm1999/p/10192537.html
时间： 2024-11-08 19:06:23