03 - 盒子模型 💛
蓝色的区域：元素的内容区域
padding：内边框----内容区域与 border 之间的距离
border: 边框
margin：外边框----元素与元素之间产生的距离
其中行内元素只能调整 margin-left 和 margin-right,上和下是无法调整，如果要调整行内元素的上下，那么就需要调整他父元素的 padding（内边距）
问题收集：
当块状元素添加了浮动后，他会覆盖正常没有添加浮动的块状元素（取消覆盖的方式：clear:both）清除浮动
当行内元素和块状元素在一起，都有超过一定数值的 border 厚度时，行内元素的上边框和下边框会覆盖其他元素的内容
当两个块状元素分别调整 margin-bottom 和另外一个的 margin-top 时，谁的值更大，就使用谁的外边距
一个元素的宽度=内容+padding+border+margin
定位：
就对页面中的某个元素实现位置调整
绝对定位：
position: absolute;
当给一个元素添加了绝对定位 css 后，如果不进行位置调整时，这个元素将在原位不动
如果需要调整位置时：top,bottom,left,right
定位的参考对象：
添加了绝对定位属性后，该元素会找他的父元素，如果他的父元素没有 position 属性，那么他会找他父元素的父元素，这样逐层找，直到找到包含有 position 的某一个长辈元素，如果没有找到任何长辈元素有 position 属性，那么该元素将以 body 元素为基准进行定位调整
当元素添加了绝对定位后，该元素就脱离了标准文档流
当一个元素进行了绝对定位，并且进行了位移，那么他未进行移动的时候的位置，浏览器将不会给他保留
相对定位：
相对定位：position: relative;
相对定位是，相对于他自己原有的位置进行定位
相对定位的元素是没有脱离标准文档流
当一个元素添加了相对定位后，他移动之后的位置，浏览器会给他保留
定位的口诀：父相子绝
固定定位：
position: fixed;
将一个元素固定在页面中的某一个位置上，不管页面如果滑动，他的位置都不会改变
固定定位的元素会脱离标准文档流
固定定位是根据 body 为基准进行定位移动的