简单了解CSS盒子模型

CSS 盒子模型(Box Model)

文档中的每个元素被描绘为矩形盒子。盒子有四个边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content

元素的宽度和高度

Remark重要: 当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。
下面的例子中的元素的总宽度为300px

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

让我们自己算算：
300px (宽)

• 50px (左 + 右填充)
• 50px (左 + 右边框)
• 50px (左 + 右边距)
  = 450px

试想一下，你只有250像素的空间。让我们设置总宽度为250像素的元素

div {
    width: 220px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}