1 . 負(fù)邊距在讓元素產(chǎn)生偏移時(shí)和position: relative 的區(qū)別

• position:relative不會(huì)改變文檔流中該元素的原本位置，不會(huì)影響其他元素的位置，也不會(huì)影響這個(gè)文檔流的結(jié)構(gòu)；
• 負(fù)邊距偏移是這個(gè)元素的偏移，會(huì)對其它的元素的位置造成改變，從而影響這個(gè)文檔流；

2 . 使用負(fù) margin 形成三欄布局有什么條件

• 三個(gè)元素都在父元素中處于float:left(right)狀態(tài)；
• 中間欄寬度自適應(yīng)為100%；
• 左邊欄的margin-left值設(shè)置為-100%，右邊欄margin-left值設(shè)置為負(fù)的自身寬度（三欄都為float:left狀態(tài)下）；
• 然后設(shè)定父容器的padding左右值，預(yù)留側(cè)邊欄空間；（圣杯布局）
• 用相對定位調(diào)整左右側(cè)邊欄位置；（雙飛翼布局）

3 . 圣杯布局的原理是怎樣的? 簡述實(shí)現(xiàn)圣杯布局的步驟

• 原理：圣杯布局其特性是，左右側(cè)邊寬度固定，中間main自適應(yīng)父元素寬度，而父元素設(shè)置左右padding為左右側(cè)邊欄預(yù)留位置的一種布局。
• 實(shí)現(xiàn)步驟：
  1：html寫出父元素container，子元素main，aside，extra。
  css設(shè)置aside，extra固定寬度，main寬度自適應(yīng)。
  
  步驟1.png

2:main，aside，extra設(shè)置左浮動(dòng)，然后在父容器使用偽元素after清除浮動(dòng)。

步驟2.png

3:aside設(shè)置margin-left:-100%;，extra設(shè)置margin-left:-200px; ,父元素設(shè)置左右padding:200px;

步驟3.png

4aside設(shè)置position:relative; right:200px
extra設(shè)置position:relative; left:200px

步驟4.png

• 完整代碼

4 . 雙飛翼布局的原理? 實(shí)現(xiàn)步驟

• 雙飛翼布局原理 :
  雙飛翼布局原理是在main外層添加wrap父容器，然后通過設(shè)置wrap的左右margin，從而達(dá)到布局效果。

• 步驟：
  1.設(shè)置container父容器，子元素main，aside，extra，然后在main再設(shè)置一個(gè)子元素warp。
  2.同樣main自適應(yīng)父元素寬度，aside，extra有固定寬度，然后都左浮動(dòng)。
  3.使用偽元素after清除浮動(dòng)，然后左側(cè)欄負(fù)邊距設(shè)置為-100%，右側(cè)欄負(fù)邊距為其寬度的相反數(shù)。
  4.設(shè)置warp左右邊距大于或者等于asider和extra即可。
  

  雙飛翼布局.png

• 完整代碼

代碼

1 . 用浮動(dòng)、負(fù)邊距實(shí)現(xiàn)如下效果 參考

2 . 使用圣杯布局實(shí)現(xiàn)如下三欄布局(兩側(cè)固定寬度200px,中間自適應(yīng))

3 . 使用圣杯布局的思路實(shí)現(xiàn)如下兩欄布局

4 . 使用雙飛翼布局實(shí)現(xiàn)如下三欄布局(兩側(cè)固定寬度200px,中間自適應(yīng)).

5 . 使用雙飛翼布局的思路實(shí)現(xiàn)如下兩欄布局

• 代碼1
• 代碼2
• 代碼3
• 代碼4
• 代碼5

本教程版權(quán)歸饑人谷-osborne和饑，轉(zhuǎn)載須說明來源！