CSS 盒子模型（box model）

概念

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距(margin)，边框(border)，内边距(padding)，和实际内容(content)。

蓝色的是一个盒子，这是一个元素，这个元素包含内边距padding，边框和外边距。就像快递，易碎品外面套一层泡沫，然后再到外层包裹一个箱子，层层包裹 。每个盒子就是为了让你在布局的时候变的更加好看。

就是让元素在页面上面摆放的时候更容易的调整位置和间距，因为内容和内容之间是需要间距的。

一个元素由自身，内边距和边框和外边距组成，来摆放蓝色框在页面中的位置了。

如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离。

padding 和 margin 是 CSS 中用于控制元素间距的两个重要属性，但它们的作用范围和效果完全不同。以下是它们的区别：

Content(内容)          盒子的内容，显示文本和图像 

内容文字图片是实物，然后内边距，边框，外边距。 

    <style>
        /*宽度和高度就是自身的大小，也就是实际内容的大小*/
        div{
            width: 100p