CSS中的盒子模型

盒模型是CSS中的核心的概念，描述了元素如何显示。

盒模型由：元素的内容 + 内边距(padding) + 边框(border) + 外边距(margin)组成。

有一个与边框类似的属性，轮廓线(outline)，这个属性可以在边框属性外围画一条线，但它不会影响盒子的宽度和高度。

盒子大小以宽度为例子：width + padding + border + margin，但我们比较关注的是元素可渲染内容区的宽度和高度。我们在给一个元素添加padding和border并不会影响内容盒子的大小，但会导致整个元素盒子的宽度变大。

简单的说padding和border的设置会影响元素的width的计算

• 在box-sizing属性为conten-box的时候，width=元素的内容区
• 在box-sizing属性为border-box的时候，width=元素内容区+padding+border

举个例子:

  <div class="group">
    <div class="block red"></div>
    <div class="block green"></div>
    <div class="block gray"></div>
  </div>

    .group {
      /* background-color: blue; */
      overflow: hidden;
    }
    .block {
      width: 33.33%;
      padding: 20px;
      float: left;
      /* box-sizing: border-box; */
    }
    .red {
      background-color: red;
    }
    .green {
      background-color: green;
    }
    .gray {
      background-color: gray;
    }

如上我们并排了三个宽度为33.33%的块，给每个块添加了padding，因为box-sizing默认是conten-box的计算方式，这样width实际上是父容器的33.33%+padding，结果就是如下:

image.png

然而我们期望是如下所示的效果:

image.png

这时候就可以给.block元素添加box-sizing:border-box; 让width=内容+padding+border。

以上就是一个盒子模型和盒子大小的计算方式。