一、浮动模型
元素默认是static的，不能浮动，但可以用CSS样式设置为浮动
浮动模型只有两个值 float:left 和 float:right ，可以让块状元素同行显示
二、层模型
top/bottom/left/right是层模型的值，即是绝对定位、相对定位和固定定位的值
<!--不要和浮动模型搞混了，这四个值不要用到float上去了-->
三、相对定位
相对于以前的位置进行定位/移动
四、绝对定位
相对于其最接近的含有定位属性的父包含块进行移动
元素的默认定位属性是static，是静止的，不属于含有定位属性
具有定位属性是指要给元素设置除position:static外的其他定位属性，如绝对、相对、固定定位等
五、绝对定位和相对定位的组合使用
作用：实现元素相对于前辈元素移动
方法：
1. 前辈元素加入相对定位 position:relative
2. 后辈元素加入绝对定位 position:absolute ，然后用top/bottom/left/right实现相对于前辈元素的移动
六、水平居中
设置浮动和相对定位水平居中的原理是：
先让父元素float到最左端，然后为其设置相对定位，右移50%；再为子元素设置相对定位，相对父元素左移50%，最终实现居中
七、垂直居中
利用table自带的vertical-align:middle属性进行居中
方法1：给td或者table的高度设置具体的数值，可以看到垂直居中效果
方法2：给table的高度设置百分比
<!--给td的高度设置百分比，会按内容的高度显示，没有意义，看不到垂直居中效果-->
table的高会按父包含块的百分比显示，可以看到居中效果
<!--没有父包含块也看不到居中效果-->
问：如何让table基于浏览器窗口垂直居中？
答：可以给table设置定位，让其变成图层，设置height:100% <!--就是让table的高和父元素一样长-->
1. 设置绝对定位absolute，table的高会有变化，如果有含有定位属性的父包含块，基于父包含块垂直居中；如果没有父包含块，基于浏览器窗口垂直居中
2. 设置相对定位relative，table的高无变化，相对定位本身是相对于自己定位，所以若不是用来移动，没有什么用
3. 设置固定定位fixed，table的高有变化，固定定位是相对于浏览器窗口而言的，所以高会按浏览器窗口的100%显示，可以实现基于浏览器窗口垂直居中
总结：要想利用table的垂直居中属性，得给table一定的高度，才能看到垂直居中效果