-
盒子模型示例图
-
盒子模型代码分析
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: red; margin-top: 20px; } .box2, .box3 { border: 25px solid blue; padding: 25px; /* 设置的放内容区域大小,也是系统默认的 */ /* 外加模式 : 只会在内容盒子外面增加区域下去 */ box-sizing: content-box; } .box2 { /* 设置盒子模型中最大的盒子,定好之后则不会在增大,只会往里面挤用内容盒子 */ /* 内减模式 : 不会向外增大区域,只会挤用内容盒子的区域 */ box-sizing: border-box; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
-
代码效果
CSS3 box-sizing 简单案例
最新推荐文章于 2024-07-23 22:43:52 发布