問答
1. 負邊距在讓元素產(chǎn)生偏移時和position: relative有什么區(qū)別?
主要區(qū)別在于：
- 偏移參照物不同
- 負邊距以邊框外邊緣到兄弟元素的邊框外邊緣或者到父元素邊框內(nèi)邊緣為準。
- 相對定位是相對于自己原來的位置為準弄贿。
- 對其它元素的影響不同
- 負邊距隨著偏移春锋，相鄰的元素也會跟著偏移。
- 相對定位由于占據(jù)著原來的位置差凹，所以無論如何偏移期奔，對其他元素都無影響。
2. 使用負 margin 形成三欄布局有什么條件?
需要具備的如下：
- 父盒子里有3個子盒子危尿，所有盒子需要左浮動呐萌。
- 子盒子中的長兄作為三欄中的中心欄，需要width:100%谊娇。
- 作為左右兩邊欄的子盒子需要設(shè)置margin-left肺孤，左邊值為100%，右邊值為該盒子本身寬度济欢。
3. 圣杯布局的原理是怎樣的? 簡述實現(xiàn)圣杯布局的步驟
圣杯布局的原理依托題2赠堵，然后再使用父盒子padding給左右邊欄的盒子預(yù)留寬度、邊欄盒子再使用相對定位偏移至預(yù)留的寬度船逮，實現(xiàn)形狀如圣杯的三欄布局顾腊。步驟如下：
-
先形成一個三欄布局條件，如下：
三欄布局條件 - 父盒子padding預(yù)留空間挖胃，左右邊欄相對定位偏移至預(yù)留空間杂靶，如下：
圣杯布局
圣杯布局
4. 雙飛翼布局的原理? 實現(xiàn)步驟?
雙飛翼布局原理依托題2，然后在中間欄的盒子里再創(chuàng)建一個子盒子酱鸭，子盒子設(shè)置margin為左右邊欄預(yù)留空間即可吗垮。步驟如下：
-
先形成一個三欄布局條件，如下：
三欄布局條件.png - 中間欄盒子創(chuàng)建一個子盒子并且給其設(shè)置margin為左右欄騰空間凹髓，如下：
雙飛翼布局
雙飛翼布局
代碼
本文章著作權(quán)歸饑人谷_九霄和饑人谷所有烁登，轉(zhuǎn)載須說明來源
