盒子模型布局：
盒子模型：每个标签都是一个盒子
盒子在页面显示在大小是：自身宽度+边框+边距（内边框+外边距）
如果一个盒子设置了边框，则边框需要被加两遍。若果设置了边距则内外边距根据设置情况要被加两遍。
计算 宽高box-sizing: border-box;（意义是将盒子大小定死，不会再因边距边框大小改变。）
设置上一行属性后，盒子宽度就是width，里面内容自适应。（计算的时候不再需要加边框和边距。）
从里到外：
padding(内边距)： 属性值的前后顺序代表了上右下左的属性值。
上右下左 上（左右）下 （上下）（左右） 全部
border（边框:每一个边都可以设置）：
width大小
style样式
color颜色
radius（角）： 左上（顺时针，百分比形式50% 0% 0% 0%）
margin（外边距）： 上右下左 上（左右）下 （上下）（左右） 全部
（margin:auto;居中属性正对于块标签。）
box-shadow(盒子阴影外，向外加inset)：水平偏移量 上下偏移量 清晰度 阴影的面积 颜色 （inset属性加在最后）
h-shadow:水平阴影位置。允许负值。
v-shadow:垂直阴影位置。允许负值。
text-shadow(字体阴影)： 水平偏移量 上下偏移量 清晰度 阴影面积 颜色
布局：
浮动:float
overflow:hidden 超出部分处理方式
overflow-y:scroll 滚动条
标签特性：display :
inline 行
不能设置宽高，默认不占一行
block 块 （margin:auto;居中属性正对于块标签。）
能设置宽高，默认占一行
inline-block 行内块
能设置宽高，默认不占一行
none
display：none 隐藏
标签位置没了。宽高都没了，但是还在。网页可检查到。
visibility:hidden；
标签位置还在，只是遮挡。宽高都在，页面无法看到。
opacity：数值（0~1）；
透明度，但标签和子标签都透明
如果只需要背景半透，字体不变
则需要直接设置背景色，background：rgba();
rgba(0~255,0~255,0~255,透明度（0~1）);
布局：
浮动:float
overflow:hidden 超出部分处理方式（将超出的部分隐藏掉）
overflow-y（x）:scroll 隐藏并处滚动条，y是垂直方向，x是水平方向。
定位position:
fixed 绝对定位，相对于屏幕定位，保持在屏幕的位置不变。
设置fixed,标签位置没了（最高层）
top:0px;left:10px;right:20px;bottom:30px;此处为在页面的定位位置。（一般只设两个，上下各一个，左右各一个，避免冲突。）
z-index:层数：层数越高，显示在最前面。（前面的图片会挡住下一层的图片）
补充：background-attachment:scroll;是设置背景图片位置不动，滑动滚动条无变化。
relative 相对定位，相当于自己定位
形式的移动，原位置不变！！！
会移动,微调 +-不要超过20px。
<div style="width: 100px;height: 100px;background-color: #ccc;position: relative;left:10px;top:10px;"></div>，设置top，bottom，left，right属性来调节位置。
最主要的！！！限制absolute
absolute 绝对定位，相对于body（页面定位）
标签位置也没了
相对于最近的有position属性的父标签,最顶级是body.
<div style="width: 200px;height: 200px;background-color: #ccc;position: relative;">
<div style="width: 100px;height: 100px;background-color: red;position: absolute;top: 0px;">
top,left,right,bottom
z-index:层数