css：盒模型

1.盒模型

每一个布局元素都可以看成一个矩形盒子，我们把它想象为一个容器，当要进行布局时，浏览器渲染引擎会根据标准的css盒模型，将所有元素表示为一个矩形盒子。在默认情况下，每个盒子的边框是不可见的，所以我们不能直接看到每个盒子。
盒模型从内到外分别是：内容（content）、padding（内边距）、border（边框）、margin（外边距）

1-1.内容：content

实际内容，显示文本和图像，设置一个div的宽高是设置内容得宽高

1-2.内边距：padding

盒子内容和边框的间距。

padding:10px 20px ;/* 内边距：两个值时是：上下  左右；  四个值时是：上右下左*/

1-3.border：边框

就是盒子的本身，围绕内容的内边距的一条或多条线。由粗线、样式、颜色三部分组成。
padding:10px 20px ;/* 内边距：两个值时是：上下 左右； 四个值时是：上右下左*/

border: 10px solid red; /*边框：粗细 实线 颜色*/

1-4.margin：外边距

两个盒子之间的距离

1-5.代码演示