1.負(fù)邊距在讓元素產(chǎn)生偏移時(shí)和position: relative有什么區(qū)別?

• 當(dāng)使用負(fù)邊距產(chǎn)生偏移時(shí)：

Paste_Image.png

• 當(dāng)使用p:r產(chǎn)生偏移時(shí)：

Paste_Image.png

2.使用負(fù) margin 形成三欄布局有什么條件?

• 父元素下有三個(gè)塊級(jí)元素。
• 中間部分寫在前面先渲染,width:100%;。
• 浮動(dòng)三個(gè)塊級(jí)元素。
• 使用負(fù)margin，根據(jù)父容器寬度為依據(jù)來設(shè)置。

3.圣杯布局的原理是怎樣的? 簡(jiǎn)述實(shí)現(xiàn)圣杯布局的步驟

• 圣杯布局原理：通過負(fù)margin使左右側(cè)元素產(chǎn)生位移到達(dá)主要內(nèi)容元素的左右兩側(cè)。再給主要內(nèi)容左右padding，使左右兩側(cè)元素留出位置移動(dòng)避免遮擋主要內(nèi)容，最后通過相對(duì)定位來移動(dòng)左右兩側(cè)元素到達(dá)留出的位置。

• 步驟：

1.給三個(gè)div，如下圖所示，讓它們浮動(dòng)，再使左右兩側(cè)元素通過負(fù)margin移動(dòng)到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;把他們移動(dòng)到父容器留出的位置上，使main的內(nèi)容不被遮擋，如下圖所示：

Paste_Image.png

4.雙飛翼布局的原理? 實(shí)現(xiàn)步驟?

• 雙飛翼布局的原理： 基本同圣杯布局差不多，只是在父容器留出左右兩側(cè)元素位置上有些許不同。
  通過給main里面一個(gè)div，使它來控制main元素內(nèi)容部分，給這個(gè)div左右margin來留出左右側(cè)元素位置。

• 主要步驟：（基本同上面的圣杯布局，看上面的1.和2.，這里就貼出雙飛翼的主要部分）。代碼部分

1. 看上面的1.
2.看上面的2.
3. 通過給main內(nèi)部一個(gè)div來控制main元素內(nèi)容位置。

Paste_Image.png

本教程版權(quán)歸饑人谷本人和饑人谷所有，轉(zhuǎn)載須說明來源?。?！