1.負邊距在讓元素產生偏移時和position: relative有什么區別?
- 當使用負邊距產生偏移時：
Paste_Image.png
- 當使用p:r產生偏移時：
Paste_Image.png
2.使用負 margin 形成三欄布局有什么條件?
- 父元素下有三個塊級元素。
- 中間部分寫在前面先渲染,width:100%;。
- 浮動三個塊級元素。
- 使用負margin，根據父容器寬度為依據來設置。
3.圣杯布局的原理是怎樣的? 簡述實現圣杯布局的步驟
- 圣杯布局原理：通過負margin使左右側元素產生位移到達主要內容元素的左右兩側。再給主要內容左右padding，使左右兩側元素留出位置移動避免遮擋主要內容，最后通過相對定位來移動左右兩側元素到達留出的位置。
-
步驟：
1.給三個div，如下圖所示，讓它們浮動，再使左右兩側元素通過負margin移動到main左右兩側。
Paste_Image.png
2.left-side元素的內容把main元素的內容給遮擋了，如下圖所示。
Paste_Image.png
3.通過他們的父容器padding使左右留出位置，如下圖：
Paste_Image.png
4.根據他們本身的位置p:e;把他們移動到父容器留出的位置上，使main的內容不被遮擋，如下圖所示：
Paste_Image.png
4.雙飛翼布局的原理? 實現步驟?
雙飛翼布局的原理： 基本同圣杯布局差不多，只是在父容器留出左右兩側元素位置上有些許不同。
通過給main里面一個div，使它來控制main元素內容部分，給這個div左右margin來留出左右側元素位置。-
主要步驟：（基本同上面的圣杯布局，看上面的1.和2.，這里就貼出雙飛翼的主要部分）。代碼部分
1. 看上面的1.
2.看上面的2.
3. 通過給main內部一個div來控制main元素內容位置。
Paste_Image.png
本教程版權歸饑人谷本人和饑人谷所有，轉載須說明來源！！！
