負邊距在讓元素產生偏移時和position: relative有什么區別?
- 兩者設置均不脫離文檔流
- margin設置負值，改變了周圍其他元素的空間布置。
-
position: relative其元素位移的同時，其原本的空間布局并沒有變化；
使用負 margin 形成三欄布局有什么條件?
- 三個子元素均設置浮動
- 父容器必須清楚浮動（三個均在同一容器）
- 兩邊寬度固定，中間的main自適應
- 左右兩欄需要設置負margin
圣杯布局的原理是怎樣的? 簡述實現圣杯布局的步驟
- 先寫好body內容，將main設置于最前面，方便渲染。
<div id="content">
<div class="main">主要內容</div>
<div class="aside"></div>
<div class="extra"></div>
</div>
- 對各個元素設置好基本樣式，使用浮動
- 對父元素使用清除浮動
- 對左右兩欄設置負margin
- 對父元素使用padding,使得子元素集中于中間，其padding左右寬度為左右兩欄的寬度
- 使用相對定位移動到對應位置
雙飛翼布局的原理? 實現步驟?
與圣杯不同的是其相當于在main處放入了一個空殼，再將main內容放入，通過調整main的左右margin來達到居中設置。
圣杯布局與雙飛翼布局
QQ截圖20160729175015.png
