1、負邊距在讓元素產(chǎn)生偏移時和position: relative有什么區(qū)別?
Paste_Image.png
- 使用負邊距的時候會改變元素在文檔流中的位置。負邊距的作用能拉動其他沒有脫離文檔流的元素。
Paste_Image.png
- position：relative之后元素原來在文檔流中占據(jù)的空間仍會保留，它只是相對于自己原來在文檔流中的位置進行偏移。
Paste_Image.png
2、使用負 margin 形成三欄布局有什么條件?
- 首先需要有一個父容器和其下三個并列的兄弟子元素，并且三個子元素都設(shè)置向同一個方向浮動。
- 父容器需要設(shè)置內(nèi)邊距padding為側(cè)欄的寬度值。
- 主要區(qū)塊應(yīng)寫在最前面，保證優(yōu)先被渲染,以便seo。
- 左側(cè)欄的margin-left應(yīng)設(shè)置為-100%,右側(cè)欄margin-left設(shè)置為它本身的寬度。
3、圣杯布局的原理是怎樣的? 簡述實現(xiàn)圣杯布局的步驟
圣杯布局指兩邊頂寬，中間自適應(yīng)的三欄布局，中間欄要在文檔流前面以優(yōu)先渲染。圣杯布局主要是運用了負邊距，浮動和相對定位及設(shè)置padding-left padding-right去完成一個三欄布局。
1、寫出圣杯布局的DOM結(jié)構(gòu)，對三個區(qū)塊設(shè)置參數(shù)
Paste_Image.png
2、對三個區(qū)塊設(shè)置浮動以及對左右側(cè)邊欄設(shè)置負邊距，讓它們飄到main上面
Paste_Image.png
3、最后設(shè)置父容器的內(nèi)邊距為左右側(cè)邊攔的自身寬度，并且對這欄設(shè)置相對定位。
Paste_Image.png
4、雙飛翼布局的原理? 實現(xiàn)步驟?
雙飛翼布局也主要運用了負邊距，浮動，設(shè)置margin-left margin-right去完成一個三欄布局。
1、寫出雙飛翼布局的DOM結(jié)構(gòu)，對三個區(qū)塊設(shè)置參數(shù)
Paste_Image.png
2、對三個區(qū)塊設(shè)置浮動以及對左右側(cè)邊欄設(shè)置負邊距，讓它們飄到main上面
Paste_Image.png
3、最后設(shè)置包裹容器wrap的內(nèi)邊距為左右側(cè)邊攔的自身寬度。
Paste_Image.png
** 本教程版權(quán)歸作者和饑人谷所有，轉(zhuǎn)載須說明來源！ **
