css盒模型

什么是盒模型

在css中，所有的内容都被包括在一个框中，这个框就被成为盒模型，盒模型描述了元素及其属性在页面中所占空间的大小。
以csdn官网首页logo的盒模型为例

盒模型一共包含四个部分

1. margin（边界）用来设置内容与内容之间的距离
2. border（边框）内容边框线，用来设置内容的边框
3. padding（填充）用来设置内容与边框的距离
4. content（内容）放置内容的部分

我们可以将盒模型中的content理解为我们将要通过快递寄出的物品
可以将盒模型中的padding理解为物品外面包裹的防撞填充物
可以将盒模型中的border理解为这个物品的外包装
可以将margin理解为一个快递箱

css盒模型的要点

1. 边框默认的样式（border-style）可以设置为不显示（none）
2. 填充值（padding）不可为负
3. 边界值（margin）可以为负
4. 对于内联元素，定义上下边界不会影响到行高
5. 如果盒内没有元素，不管定义了多少宽和高都不会被显示。

属性值

1.margin属性主要用于页面排版，定义元素之间的距离
margin使用的最多的属性有四个，分别是
margin-top、margin-bottom、margin-left、margin-righ，用于设置上下左右四个边距的大小
2.border属性主要用于设置边框，
border使用最多的属性有三个，分别是
border-style，border-color，border-width，用于设置边框的样式、颜色、宽度
3.padding属性主要用于设置内容与边框的距离
padding属性使用最多的有四个，分别是
padding-top、padding-bottom、padding-left、padding-right，用于设置上下左右四个边距的大小