【玩转CSS】简介盒子模型
一、文档流
网页是一个多层的结构，设置样式，也是一层一层的，最终我们看到的是最上面的一层
文档流是网页最底层
我们创建的元素默认情况下，都是在文档流中
元素脱离文档流后的特点
元素脱离文档流后，就不在区分块元素，行内元素，行内块元素
元素怎么脱离文档流
浮动 绝对定位 flex布局等等
二、盒模型、盒子模型
CSS（Box model）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。把所有的网页元素都看成一个盒子，它具有： content，padding，border， 四个属性，这就是盒子模型。
外边距（margin）
盒子外部的距离
margin-top 上外边距
margin-right 右外边距
margin-left 左外边距
margin-bottom 下外边距
边框（broder）
边框属于盒子边缘，边框里面属于盒子内部，边框外部属于盒子外部
必须有三个属性，分别是：
border-color:; 设置边框的颜色（）
默认为黑色。可以写多个颜色，以空格隔开
四个颜色时：上 右 下 左
三个颜色时：上 左右 下
两个颜色时：上下 左右
一个颜色时：上下左右
border-width:; 设置边框的大小
默认值大概为1-3px。也可以写多个值，以空格隔开
规律与上述颜色一致
border-style:; 设置边框的样式
默认值为none，可选值
实线 solid
虚线 dashed
点状虚线dotted
双实线 double
简写：border:颜色 大小 样式
内边距（padding）
内容区和边框之间的距离
padding-top 上内边距
padding-right 右内边距
padding-left 左内边距
padding-bottom 下内边距
内容区（content）
元素中所有子元素和文本内容都在内容区中排列
width 设置内容区的宽度
height 设置内容区的高度
