1. 負(fù)邊距在讓元素產(chǎn)生偏移時(shí)和position: relative有什么區(qū)別?
- 文檔流中的位置是否保留
- 使用負(fù)邊距偏移的元素，下一個(gè)元素會(huì)追隨其后
- 使用position:relative的元素，下一個(gè)元素不會(huì)跟隨
- 參考線或是參考點(diǎn)不同
- 邊距規(guī)定元素的border到父元素/相鄰元素邊框的距離，所以負(fù)邊距的偏移是以父元素/相鄰元素的邊框?yàn)閰⒖季€
- position:relative則是以元素原在位置的四個(gè)頂點(diǎn)為參考點(diǎn)進(jìn)行偏移
2. 使用負(fù) margin 形成三欄布局有什么條件?
使用負(fù)margin實(shí)現(xiàn)三欄布局的條件：
- 兩個(gè)側(cè)邊欄需要添加浮動(dòng)屬性
- 中間的main部分的寬度要自適應(yīng)父元素寬度
- 父容器需要添加左右padding為sidebar預(yù)留空間
3. 圣杯布局的原理是怎樣的? 簡(jiǎn)述實(shí)現(xiàn)圣杯布局的步驟
圣杯布局原理
圣杯布局是三欄布局之一，基本特性是左右側(cè)邊欄寬度固定，中間main寬度自適應(yīng)，獨(dú)特之處是父容器添加padding-left和right撐開其寬度而為2個(gè)側(cè)邊欄預(yù)留放置空間。一般中間主內(nèi)容首先渲染有利于SEO
實(shí)現(xiàn)步驟
step1:寫好三欄結(jié)構(gòu)
Paste_Image.png
step2:設(shè)置好初始樣式: (main元素也要浮動(dòng)，否則不起作用！)
Paste_Image.png
step3: 設(shè)置外容器左右padding和邊欄的負(fù)margin:
Paste_Image.png
tep4:設(shè)置相對(duì)位置 :
Paste_Image.png
step5:如果想改成兩欄布局,只需刪除多余的部分:
Paste_Image.png
4. 雙飛翼布局的原理? 實(shí)現(xiàn)步驟?
原理:
雙飛翼布局也是一個(gè)兩邊在父容器里固定寬度，中間自適應(yīng)的布局.一般中間主內(nèi)容首先渲染有利于SEO。
設(shè)置三個(gè)浮動(dòng)div，左右兩欄加上負(fù)margin 100%使其和中間欄頂端的邊緣重合。中間欄用一個(gè)內(nèi)置的div來放置內(nèi)容，在這個(gè)子div里設(shè)置了margin來給兩邊的div留出了位置。
步驟:
step1:寫好三欄結(jié)構(gòu),在主內(nèi)容中增加一個(gè)內(nèi)容區(qū)warp
0_1468275826270_upload-b5c5559a-16ae-418f-8abb-9ead344e1eff
step2:設(shè)置好初始樣式:
0_1468276720403_upload-4bab0808-0923-4d6a-9df7-e4b7eea6bb88
step3:設(shè)置warp的margin留出邊欄位置,設(shè)置邊欄負(fù)margin:
0_1468277209341_upload-a2225d29-9df5-45a2-b524-02543ab10bec
step4:如果想改成兩欄布局,只需刪除多余的部分:
0_1468277759101_upload-3d450c6e-f261-45ef-8944-0f458d63d7a2
