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