http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html

2-4 一列布局

在包裹層設(shè)置margin屬性為auto時，不能同時設(shè)置float and position，否則auto失效。
定寬+margin：auto = 自動居中

3-1浮動布局

網(wǎng)頁布局基礎(chǔ)3-1 float屬性.jpg

當(dāng)div設(shè)置float:left時div盒子會向左貼近容器（或者父級盒子）同級別的div若沒有設(shè)置float則被擠開。呵呵
注意：同級別的隨后的元素的位置，會受到上一個元素的float影響，此時就要對受影響的元素設(shè)置清除浮動的。
第一種. clear：poth;(left and righ)
第二種. widh:100%（或者固定寬度）; overflow:hidden
注：對于文本清除float可以加入br元素，此方法不建議使用。

網(wǎng)頁布局基礎(chǔ)3-2 清楚浮動兩種方法.jpg

3-3 橫向兩列布局

我學(xué)到的東西
當(dāng)設(shè)計頁面布局是，發(fā)現(xiàn)改變一個元素，頁面亂了，瞬間“頭大”。這是不要急，找到改變了什么造成何種結(jié)果，一一解決！?。。ū竟?jié)真是受益匪淺?。。?/p>

clear:poth;適用于緊跟其后的元素，像父級這種受到float影響要用overflow：hidden。

clear適用環(huán)境.jpg

4-1 position

position屬性.jpg

4-2 相對定位

position屬性相對定位的特點.jpg

給其一個偏移量，red的盒子移動，寬度不變，把網(wǎng)頁撐開了也說明其還在標準文檔流中。

盒子位移屬性是如何工作？
盒子的位移屬性有四個“top、right、bottom和left”，用來指定元素的定位位置和方向。這些屬性只能在元素的“position”屬性設(shè)置了“relative、absolute和fixed”屬性值，才生效。

對于相對定位元素，這些屬性的設(shè)置讓元素從默認位置移動。例如，top設(shè)置一個值“20px”在一個相對定位的元素上，這個元素會在原來位置向下移動“20px”。反之，“top”設(shè)置一個“-20px”，這個元素會在原來的位置向上移動“20px”。
對于絕對定位和固定定位鮮紅，這些屬性指定了元素與父元素邊緣之間的距離，例如，絕對定位的元素設(shè)置一個“top”值為“20px”，將使絕對定位元素相對于其設(shè)置了相對定位的祖先元素頂部邊緣向下移動“20px”，反之，如果設(shè)置一個“top”值為“20px”，將使絕對定位元素相對于其設(shè)置了相對定位的祖先元素頂部邊緣向上移動“20px”。（絕對定位的參考點是其祖先元素設(shè)置了“relative”或者“absolute”值）。

position屬性relative效果.jpg

4-3 絕對定位

Why一般會把父包含塊設(shè)置position：relative。因為relative還在標準文檔流中，相對穩(wěn)定。若設(shè)置absolute也可但此時本身已經(jīng)脫離標準文檔流。

position屬性absolute.jpg

position屬性absolute未設(shè)偏移量特點.jpg

一個問題

當(dāng)把一個塊級元素設(shè)置position：absolute，并且沒有設(shè)置寬度時，此時元素的寬度會根據(jù)內(nèi)容進行調(diào)節(jié)

不要慌哈哈

position一個小問題.jpg