盒模型-标准盒模式与怪异盒模式

鲁kk

于 2021-03-18 21:23:45 发布

阅读量133

点赞数

文章标签： css3 css

本文链接：https://blog.csdn.net/weixin_45905955/article/details/114991179

版权

盒模型-标准模式与怪异模式

网页的布局都是由一个个盒子所组成，所有的HTML标签都就可以看作是一个盒子，一个盒子模型包含四个部分，他们分别是：content，padding，border，margin。

其中：content：代表内容(盒子的宽度和高度)

padding：代表内容与边框之间的距离

border：代表盒子边框

margin：代表盒子与盒子之间的距离

假设给一个div设置宽度和高度均为200px，padding值为20px，border值为10px，那么这个盒子占据的总宽度=200+（20+20）+（10+10）；总高度=200+（20+20）+（10+10）

<style>
.box2{
            width: 200px;
            height: 200px;
            background-color: turquoise;
            padding: 20px;
            border: 10px solid tomato;
            box-sizing: border-box;
        }
</style>
<body>
  <div class="box2">     
  </div>  
</body>

box-sizing:content-box(默认情况)与box-sizing:border-box的区别

content-box：标准盒模型，默认形式，它也是W3C标准盒模型，padding和border的宽度会影响盒子的真正大小

content：width|height

border-box：怪异盒模型，border和padding会挤占盒子大小，不会影响盒子大小

content=盒子设置宽度|高度-（padding+padding）-（border+border）

接下来，用一个HTML实例详细解释一下两者的区别：

<style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: darkslateblue;
            padding: 20px;
            margin-bottom: 20px;
            border: 10px solid tomato;
            /* 单独为某一个边框设置样式 */
            border-top-color: thistle;
            border-top-style: dashed;
            border-top-width: 10px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: turquoise;
            padding: 20px;
            border: 10px solid tomato;
            box-sizing: border-box;
        }
    </style>
<body>
     <div class="box1">
         content-box
     </div>
     <div class="box2">
         border-box
     </div>
</body>

鲁kk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒模型-标准盒模式与怪异盒模式

盒模型-标准模式与怪异模式网页的布局都是由一个个盒子所组成，所有的HTML标签都就可以看作是一个盒子，一个盒子模型包含四个部分，他们分别是：content，padding，border，margin。其中：content：代表内容(盒子的宽度和高度) padding：代表内容与边框之间的距离 border：代表盒子边框 margin：代表盒子与盒子之间的距离假设给一个div设置宽度和高度均为200px，padding值为20px，border值为10px，那么这个盒子占据的总宽
复制链接

扫一扫