一、負(fù)邊距在讓元素產(chǎn)生偏移時(shí)和position: relative有什么區(qū)別?
- 負(fù)margin和
position: relative在讓元素產(chǎn)生偏移時(shí)都沒有脫離文檔流乒疏。但是利用負(fù)margin讓元素產(chǎn)生偏移時(shí)，元素原來的位置會(huì)被占據(jù)饮焦；而position: relative元素原來的位置不會(huì)被占據(jù)怕吴，仍然會(huì)被保留。
對(duì)比圖
DEMO - 負(fù)margin除了可以移位自己县踢，還可以移動(dòng)周圍的元素转绷。margin-top和margin-left是移動(dòng)自己，而margin-right和margin-bottom是讓周圍的元素移動(dòng)硼啤。因?yàn)閙argin的意思就是要讓周圍最近的元素空出多少距離议经。比如說設(shè)置
margin-right: -10px;，就是要讓下一個(gè)元素距離當(dāng)前元素-10px谴返，自然就是下一個(gè)元素左移煞肾。不然當(dāng)前元素和它前面的元素的margin-right就不對(duì)，會(huì)受到影響嗓袱。而position: relative不會(huì)影響到其他的元素籍救。
先來看看margin-left和margin-bottom。
負(fù)左外邊距和負(fù)下外邊距
DEMO
因?yàn)閙argin-top上面已經(jīng)給出例子了渠抹，再來看看margin-right钧忽。
margin-right - 這里還需要注意的一個(gè)小技巧是可以利用負(fù)margin來擴(kuò)大面積，這在一些布局中可以應(yīng)用到逼肯。使用條件是耸黑，如果一個(gè)元素沒有width，只有左右的負(fù)margin篮幢，那么它就會(huì)變寬大刊，可以利用負(fù)margin來擴(kuò)大面積。
DEMO
二三椿、使用負(fù) margin 形成三欄布局有什么條件?
- 三欄放在一個(gè)容器中缺菌，左右兩邊固定寬度，中間欄寬度100%自適應(yīng)搜锰。
- 利用負(fù)margin形成三欄布局伴郁，是負(fù)margin和浮動(dòng)聯(lián)合使用達(dá)到的一個(gè)布局效果。所以這里的三欄都要設(shè)置左浮動(dòng)蛋叼。
- 使用了浮動(dòng)之后焊傅，父容器一定要清除浮動(dòng)剂陡。
- 對(duì)左右欄設(shè)置負(fù)margin，左邊欄設(shè)置
margin-left: -100%狐胎，右邊欄的margin-left設(shè)置自身的寬度鸭栖。
三、圣杯布局的原理是怎樣的? 簡(jiǎn)述實(shí)現(xiàn)圣杯布局的步驟握巢。
- 在html中晕鹊，先把中間的主區(qū)塊middle放在容器的最前面，接著是left暴浦，最后是right溅话。這樣可以先渲染重要的區(qū)塊，有利于搜索引擎優(yōu)化歌焦。
<div class="wrapper">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
- 圣杯布局是實(shí)現(xiàn)左右寬度固定公荧，中間自適應(yīng)。
.main{
width: 100%;
background: blue;
height: 300px;
}
.left{
width: 200px;
height: 300px;
background: red;
}
.right{
width: 150px;
height: 300px;
background: orange;
}
- 將三欄都設(shè)置為左浮同规，這樣兩個(gè)側(cè)邊欄才能到中間區(qū)塊的middle上面去。
.main, .left, .right{
float: left;
}
- 再利用負(fù)margin讓左邊欄和右邊欄跑到中間區(qū)塊的兩邊窟社。對(duì)左邊欄設(shè)置
margin-left: -100%券勺，右邊欄的margin-left設(shè)置為自身的寬度。這樣兩個(gè)側(cè)邊欄就會(huì)分別覆蓋中間區(qū)塊的左右邊灿里。
.left{
margin-left: -100%;
}
.right{
margin-left: -150px; /* 右邊欄自身的寬度 */
}
- 到上一步為止关炼，left和right欄已經(jīng)到了正確的位置，接下來是要解決覆蓋的問題匣吊。圣杯布局的解決方案是先對(duì)包裹三欄的容器設(shè)置好padding儒拂。可以上下為0色鸳，左右分別為左右兩欄的寬度社痛。
.wrapper{
padding: 0 150px 0 200px;
}
- 接著，再利用相對(duì)定位命雀，把左右兩欄分別移動(dòng)到對(duì)應(yīng)的padding上去蒜哀。
.left{
position: relative;
left: -200px;
}
.right{
position: relative;
right: -150px;
}
四、雙飛翼布局的原理? 實(shí)現(xiàn)步驟?
- 前面和圣杯布局一樣吏砂，中間的主區(qū)塊main放在html的最前面撵儿，接著是子列sub和附加列extra。然后利用負(fù)外邊距讓sub和extra回到正確的位置狐血。
- 接著面臨一個(gè)同樣的問題淀歇，那就是sub和extra覆蓋了main的左右兩邊的內(nèi)容。雙飛翼布局就是在main的外部再加一個(gè)div標(biāo)簽來包裹中間區(qū)塊匈织，寬度為100%浪默。然后再設(shè)置main的左右外邊距，使它回到對(duì)應(yīng)的位置浴鸿。
html結(jié)構(gòu)：
<div class="wrapper">
<div class="middle">
<div class="main">你好</div>
</div>
<div class="sub"></div>
<div class="extra"></div>
</div>
CSS部分：
.middle .main{
margin-left: 200px;
margin-right: 150px;
}
五、圣杯布局和雙飛翼布局的比較岳链。
- 兩者的相同點(diǎn)：都是讓主區(qū)塊的內(nèi)容先加載；都是左右兩欄固定高度掸哑，中間一欄自適應(yīng)约急；都是讓三欄設(shè)置浮動(dòng)，再利用負(fù)外邊距實(shí)現(xiàn)三列布局厌蔽。
- 兩者的不同點(diǎn)：圣杯布局和雙飛翼布局的不同點(diǎn)就是處理主區(qū)塊覆蓋的問題。圣杯布局是利用相對(duì)定位奴饮，然后設(shè)置內(nèi)邊距padding來實(shí)現(xiàn)的，而雙飛翼布局是通過增加一個(gè)標(biāo)簽择浊，再設(shè)置外邊距margin來實(shí)現(xiàn)的戴卜。
對(duì)比而言，雙飛翼雖然增加了一個(gè)標(biāo)簽琢岩，但是它的思路比較容易理解，也不需要利用定位担孔。而且雙飛翼布局在瀏覽器窗口足夠小的時(shí)候不會(huì)出現(xiàn)排版錯(cuò)亂的情況，原因就是當(dāng)側(cè)邊欄寬度大于中間區(qū)塊寬度時(shí)糕篇，側(cè)邊欄上不去，會(huì)出現(xiàn)錯(cuò)亂灸撰。
六、把圣杯布局和雙飛翼布局改成兩欄布局
實(shí)現(xiàn)了三欄布局浮毯，兩欄布局就比較簡(jiǎn)單了，把右邊欄刪掉就可以债蓝。
- 圣杯布局改成兩欄布局
完整DEMO - 雙飛翼布局改成兩欄布局
完整DEMO - 其他不考慮搜索引擎優(yōu)化的兩欄布局方法：
不考慮搜索引擎優(yōu)化盛龄，也就是不把中間區(qū)塊放前面饰迹，這樣的兩欄布局實(shí)現(xiàn)起來比較簡(jiǎn)單。 - 固定寬度的兩欄布局
DEMO - 固定寬度的兩欄布局（浮動(dòng)）
DEMO - 不固定寬度的兩欄布局（定位）
DEMO - 關(guān)于兩欄布局還可以參考之前的博客锹淌，就是利用形成BFC的方法赠制。
利用BFC形成兩欄布局
