标准盒模型和怪异盒模型小结-CSDN博客

本文链接：https://blog.csdn.net/jhfvuyhgui/article/details/123942537

标准盒模型和怪异盒模型

盒子模型分由外边距（margin）、边框（border）、内边距（padding）和内容（content）四部分组成。
标准盒模型是指在CSS中设置width（宽）、height（高）属性时，是给内容（content）区域设置；
怪异盒模型是指在CSS中设置width（宽）、height（高）属性时，是给边框（border）、内边距（padding）和内容（content）设置。

如果给盒子模型设置200 * 200的宽高，两种盒模型的区别如下：

在这里插入图片描述

标准盒模型设置宽高

在这里插入图片描述

怪异盒模型设置宽高

即标准盒模型的content区域为200 * 200, 而怪异盒模型则是content、padding、border三个区域加起来才是200 * 200。

如果我们给盒子设置边框和内边距，CSS代码如下所示：

.box1{
      float: left;
      width: 200px;
      height: 200px;
      border: 10px solid #000;
      background-color: aquamarine;
    }

    .box2 {
      float: left;
      width: 200px;
      height: 200px;
      padding: 10px;
      background-color: palegreen;
    }

    .box3 {
      float: left;
      /* 设置盒模型为怪异盒模型 */
      box-sizing: border-box;
      width: 200px;
      height: 200px;
      background-color: palegreen;
    }

<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>

显示效果：
在这里插入图片描述
可以看到，标准盒模型中，不论是设置边框还是设置内边距都会改变盒子大小。

小结

我认为在实际编程中，使用怪异盒模型更好，因为怪异盒模型设置好宽高之后再设置边框和内边距不会改变盒子的大小，在布局时可以避免出现设置边框和内边距改变盒子的大小，从而导致影响整个页面布局。