css盒子模型#

先看例子：

1
  <style>
2
    div {
3
      width: 300px;
4
      height: 400px;
5
      border: 5px solid #ccc;
6
      background-color: aqua;
7
      padding: 20px;
8
    }
9
  </style>
10
  <div></div>

如图所示：设置一个宽300px,高400px的div，border为5px，padding值设为20px.

这里我们会发现明明我们设置了300*400长宽比，为什么呈现出来的是一个350*450的盒子呢？

我们可以看一下这个图：

在这张图中，我们发现我们设置的300*400出现在了最里面的那个蓝框中，与此同时我们可以发现在这个盒模型中除了我们设置的内容（content），还有margin（外边距）、border（边框）、padding（内边框）

margin(外边距) - 清除边框外的区域，外边距是透明的。 border(边框) - 围绕在内边距和内容外的边框。 padding(内边距) - 清除内容周围的区域，内边距是透明的。 content(内容) - 盒子的内容，显示文本和图像。

为了正确设置元素在所有浏览器中的宽度和高度，你需要知道盒模型是如何工作的。

而我们在测试效果图看到的350*450盒子，

350（width） = 300（content） + 20（padding）* 2 + 5（border）* 2 450（height）= 400 （content）+ 20（padding）* 2 + 5（border）* 2