1、浮動
浮動是CSS中用到的最多的一個選項，他有三個性質。關於浮動我們要強調一點，永遠不是一個東西單獨浮動，浮動都是一起浮動，要浮動，大家都浮動。
1.1 浮動元素脫離標准文檔流
1.1.1 大概描述：有兩個盒子，一個盒子浮動，一個盒子不浮動。浮動的盒子會脫離標准文檔流，不浮動的盒子會在標准文檔流中成為第一個，所以兩者出現覆蓋現象。
1.1.2 大概描述：一個行內標簽在標准文檔流中是不能設置寬高的，但是使用float使其脫離文檔流之后，就可以對其設置寬高了。所有浮動的標簽不會去區分行內標簽和塊級標簽。也就是說： 一旦一個元素浮動了，那么，將能夠並排了，並且能夠設置寬高了。無論它原來是個div還是個span。
1.2 浮動的元素互相貼靠
以float向左浮動為例：
如果有足夠空間，那么就會靠着2哥。如果沒有足夠的空間，那么會靠着1號大哥。
如果沒有足夠的空間靠着1號大哥，自己去貼左牆。
1.3 浮動元素有“自圍”的效果
自圍效果就是：浮動的盒子可以遮蓋文檔標准流的第一個盒子，但是不會遮蓋里面的文字，文字會圍繞浮動的盒子顯示。
在CSS代碼中讓div浮動，p不浮動，那么p中的文字就睡形成這種自圍效果。
<div> <img src="images/1.jpg" alt="" /> </div> <p>123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 </p>
1.4收縮現象
一個浮動元素如果沒有給其設置寬高，則其大小收縮為文字的寬高。
2、絕對定位 絕對定位最大的用處就是制作頁面中的壓蓋效果。
絕對定位使用的參考點是頁面的角。絕對定位脫離標准文檔物流即脫標。
position:absolute;
top: top: bottom: bottom:
left: 參考點是頁面的左上角。 right: 參考點就是頁面的右上角。left: 參考點就是頁面的左下角。right: 參考點就是頁面的右下角。
參考點選擇好之后，他是牢牢地跟着參考點走的。
這個頁面的角的理解：他會跟着卷動的不要死死地盯着瀏覽器的角。
絕對定位的參考點，如果用top描述，那么定位參考點就是頁面的左上角，而不是瀏覽器的左上角：
如果用bottom描述，那么就是瀏覽器首屏窗口尺寸，對應的頁面的左下角：
面試題題目：
因為已經發生卷動了，所以絕對定位的參考點也會發生卷動，找出參考點的位置即可。
子絕父相的應用：（banner圖中的幾個小圓點切換）
兒子元素使用絕對定位，父元素使用相對定位，這樣的話兒子元素的參考點將會發生改變，將不再以頁面為參考點，而是以父輩元素的盒子的角為參考點。這個父元素不一定是其直接父親，父輩元素都可以，哪個父元素使用了相對定位絕對定位的兒子元素就聽誰的，而且要聽最近的祖先元素的相對定位。
絕對定位的盒子居中：
position:absolute; position:absolute;
left:50%; top:50%;
margin-left:負的盒子寬度的一半 margin-top:負的盒子高度的一半
3、固定定位
解釋：就是相對瀏覽器定位，無論頁面怎么滾動，他都不會變化。
用途：①固定導航欄②返回頂部
4、父子關系：兒子就是占用父親內容的寬高，和父親的padding沒有關系。