1.負邊距在讓元素產生偏移時和position: relative有什么區別?
- 負邊距在讓元素產生偏移時，相鄰元素的位置也會跟著它移動。
- 而position: relative讓元素產生偏移時，只是改變自身的位置，它在文檔流中原本占用的空間不會改變，不會影響其他元素。
2.使用負 margin 形成三欄布局有什么條件?
- 1.父容器需要設置內邊距padding;父容器要清除浮動;
- 2.父容器下的所有子元素都需要設置左浮動;
- 3.主要區塊應寫在最前面，保證優先被渲染,寬度要設為100%;
- 4.左側欄的margin-left應設置為-100%,右側欄margin-left設置為-100px。
- 5.用position:relative給左右側邊欄調整位置;左側欄的left應設置為-100px,右側欄left設置為100px;
如下圖所示:
3.圣杯布局的原理是怎樣的? 簡述實現圣杯布局的步驟?
- 圣杯布局主要是運用了負邊距，浮動和相對定位去完成一個三欄布局。
- 實現圣杯布局的步驟:
-
1.先設置好三欄，主內容放在最上面兩側邊欄放在下面，使他們三欄進行左浮動，父元素清除浮動。主內容的寬度設置為100%;兩個側邊欄的寬度比如設置為100px;如下圖所示:
-
2.設置兩個側邊欄的負邊距,左側邊欄為margin-left:-100%，右側邊欄為margin-left:-100px;如下圖所示:
- 3.由于兩個側邊欄遮擋住了主內容，我們需要露出主題內容，我們可以設置父元素
<div class="content">的左右padding。如下圖所示:
-
4.最后使用position：relative把側邊欄從主內容欄移出即可。如下圖所示:
-
4.雙飛翼布局的原理? 實現步驟?
- 雙飛翼布局是在主內容塊中設置一個子元素，再對這個子元素設置外邊距的值來形成三欄。
-
實現步驟如下圖所示:
