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