問答
一、負邊距在讓元素產生偏移時和position: relative有什么區別?
- 元素使用負margin偏移時，相鄰元素也會跟著它移動。而position:relative移動時，相鄰元素保持原來的地方不變。
- 因為relative元素本身的文檔流位置還是被自己給占據。而負margin則是確確實實改變了文檔流的位置。
-
設置了負margin的元素（即使該元素同時設置了relative）相對于定位元素在下。設置了float的元素也在relative的下面（很奇怪）
relative上margin下
負margin
position:relative
二、使用負 margin 形成三欄布局有什么條件?
- 三欄都要有同向浮動
- 側欄寬度固定，主塊自適應。
- 設置合適的負margin的值
- 用合適的方法使得三欄分離，如側欄相對定位，或者主區塊內部設置區塊來收縮使其分離。
三、圣杯布局的原理是怎樣的? 簡述實現圣杯布局的步驟。
- 原理：
- 浮動：浮動是和負margin等同重要的，并不是因為負margin的特性，下面的負margin浮動塊才會跑上去。原因就在于浮動的基本特性：浮動的元素在父容器會并排排列，直到該行滿了才會到下一行。
- 負margin：作用是先大致定位，負margin加上浮動特性可以覆蓋使其在其他浮動塊元素上。
- 父元素padding：給子元素塊留出移動的空間。
- position:relative小范圍微調位置。（這個時候我們又發現relative的元素是在最上面一層的）
- 步驟
- 三欄都要設置同向浮動，左浮右浮都可以。這時候因為主區塊設置的寬度是100%所以另兩個都被擠在下面。
- 這時候我們設置負margin，一個margin:-100%,另一個設置側欄固定寬度。（這個100%相對的是父容器的寬度，如果我們設置父容器固定寬度，那main區域寬度就不會自適應了。main塊寬度設置的就是100%父元素寬度）
- 給父元素設置左右padding以便于接下來兩個側邊欄塊用相對定位微調位置。
- 用position:relative小范圍偏移即可。
四、雙飛翼布局的原理? 實現步驟?
- 實現步驟：
-
先寫好body部分，主區塊必須放在上面優先被瀏覽器渲染。側欄被優先渲染的話，因為之前沒有浮動元素，我們設置了負margin它只會往左或右一直跑而不會上去。
body部分 -
定義好寬高顏色等css樣式，并且讓3欄都浮動
大致 -
兩側邊欄設置負margin，使得三欄排列在一行上，但我們發現兩側邊欄覆蓋住了主區塊。
設置負margin -
這時候我們在main塊里設置的content塊就起作用了，我們給它設置高度和外邊距和顏色。并且設置左右margin值（值的大小為左右側邊欄的寬度）
主區塊
- 原理：側欄負margin加三欄同向浮動使其并排排列，主欄區域設置div塊添加左右margin使得側欄塊得以顯示。
- 雙飛翼和圣杯區別：圣杯用相對定位來分離主區塊和側欄，雙飛翼則是給主區塊內部添加塊級元素。
-
忘記清浮動了，應該用clearfix
清除浮動
