負(fù)邊距在讓元素產(chǎn)生偏移時(shí)和position: relative的區(qū)別
- 負(fù)邊距產(chǎn)生偏移是改變?cè)氐耐膺吘喔绶牛瑥亩鹪卦谖臋n流中的布局位置的改變。
-
position: relative產(chǎn)生偏移時(shí)元素在文檔流中的布局位置并沒(méi)有改變迄薄，只是其外觀表象相對(duì)于自身原本的位置做一個(gè)偏移疫诽，是不會(huì)影響其他元素的布局的钻心，但會(huì)遮擋其他元素。
使用負(fù) margin 形成三欄布局的條件
- 中間main設(shè)為浮動(dòng)寬度100%孕讳，兩個(gè)side也要設(shè)為浮動(dòng)寬度定好匠楚，外部容器ct清除浮動(dòng)；
- 兩個(gè)side使用負(fù)margin（一個(gè)為-100%厂财，另一個(gè)為-‘自身寬度’）分別移動(dòng)到main的左右兩邊芋簿；
- 若為圣杯三欄，則需設(shè)置main區(qū)塊的padding留出左右空間璃饱，再使用relative將左右sider各做一個(gè)自身寬度的偏移与斤；
- 若為雙飛翼三欄，則需在main區(qū)塊下增加一個(gè)真實(shí)的主內(nèi)容div荚恶，并為此div設(shè)置左右margin撩穿。
圣杯布局的原理及實(shí)現(xiàn)步驟
- 圣杯布局的原理是
利用負(fù)margin讓兩個(gè)浮動(dòng)的固定寬度盒子進(jìn)入到一個(gè)同樣是浮動(dòng)且自適應(yīng)寬度的盒子里面去，再用相對(duì)偏移做調(diào)整谒撼，步驟如下： - ①一個(gè)寬度100%的盒子main浮動(dòng)并設(shè)置padding做自適應(yīng)主區(qū)塊食寡；
- ②另外兩個(gè)寬度固定的盒子side浮動(dòng)并使用負(fù)margin分布于主區(qū)塊的兩邊；
- ③最后讓兩個(gè)side盒子做相對(duì)偏移到達(dá)main留出的空padding區(qū)廓潜。
雙飛翼布局的原理及實(shí)現(xiàn)步驟
- 圣杯布局的原理是
利用負(fù)margin讓兩個(gè)浮動(dòng)的固定寬度盒子進(jìn)入到一個(gè)同樣是浮動(dòng)且自適應(yīng)寬度的盒子里面去抵皱，再內(nèi)嵌一個(gè)div做真正的主內(nèi)容區(qū)塊善榛，步驟如下： - ①一個(gè)寬度100%的盒子main浮動(dòng)；
- ②另外兩個(gè)寬度固定的盒子side浮動(dòng)并使用負(fù)margin分布于主區(qū)塊的兩邊呻畸；
- ③在main區(qū)塊內(nèi)再內(nèi)嵌一個(gè)真實(shí)的主內(nèi)容div移盆，并為此div設(shè)置左右margin。
