1. 負(fù)邊距在讓元素偏移時(shí)和position: relative有什么區(qū)別？
通過負(fù)邊距進(jìn)行偏移的元素，它會(huì)放棄原來占據(jù)的空間，這樣，它后面文檔流中的其它元素就會(huì)“流過來填充這部分空間。
在文檔流中，元素的最終邊界是有 margin 決定的。margin 為負(fù)的時(shí)候相當(dāng)于元素的邊界向里收，文檔流認(rèn)的是這個(gè)邊界，不會(huì)管你實(shí)際尺寸是多少。
而 psoition: relative; 只是“外觀”變了，原來的位置依然“霸占”著，它仍然會(huì)堅(jiān)守著原來占據(jù)的空間，不會(huì)讓文檔流其他元素趁虛而入。“頁面布局”跟原來一樣。偏移后不對周圍的元素產(chǎn)生影響。
拓展閱讀：
CSS布局奇淫巧計(jì)之-強(qiáng)大的負(fù)邊距
2. 使用負(fù) margin 形成三欄布局有什么條件？
- 這“三欄”都要設(shè)置浮動(dòng)
- 中間那一欄在最前面(這一欄的寬度會(huì)與父容器的 content 一樣)
- 左右兩欄利用負(fù)margin"移動(dòng)"到上面。
- 接著就按情況調(diào)整，父容器設(shè)置 padding、左右兩欄設(shè)置偏移(relative)等等 或者 在中間那一欄加個(gè) div 在設(shè)置兩邊 margin
另外，負(fù)邊距對元素寬度的影響
負(fù)邊距不僅能影響元素在文檔流的位置，還可以增加元素的寬度！！！
這個(gè)作用的前提是，該元素沒有設(shè)定 width。
補(bǔ)充：三欄布局
1) 用浮動(dòng)實(shí)現(xiàn)三欄布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮動(dòng)實(shí)現(xiàn)三欄布局</title>
<style media="screen">
body {
margin: 0;
padding: 0;
}
#left {
float: left;
width: 200px;
height: 200px;
background-color: red;
}
#right {
float: right;
width: 180px;
height: 200px;
background-color: blue;
}
#center {
height: 500px;
margin-left: 210px;
margin-right: 190px;
background-color: pink;
}
</style>
</head>
<body>
<div id="left">left</div>
<div id="right">right</div>
<div id="center">center</div>
</body>
</html>
效果圖：
這種方法的缺點(diǎn)是：#center 必須放在 #left 和 #right (浮動(dòng)兩欄) 的后面。
這里三個(gè)div標(biāo)簽的順序的關(guān)鍵是要把主體div放在最后，左右兩欄div順序任意。
此方法的優(yōu)點(diǎn)是：代碼足夠簡潔與高效
不足在于：中間主體存在克星，clear:both屬性。如果要使用此方法，需避免明顯的clear樣式。
2) 利用絕對定位實(shí)現(xiàn)三欄布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>絕對定位實(shí)現(xiàn)三欄布局</title>
<style media="screen">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#left, #right {
position: absolute;
top: 0;
width: 200px;
height: 100%;
}
#left {
left: 0;
background-color: red;
}
#right {
right: 0;
background-color: blue;
}
#center {
margin: 0 210px;
background-color: pink;
height: 100%;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</body>
</html>
效果圖：
這里的左中右三個(gè)div的順序是可以任意調(diào)整的。
此方法的優(yōu)點(diǎn)是，理解容易，上手簡單，受內(nèi)部元素影響而破壞布局的概率低，就是比較經(jīng)得起折騰。缺點(diǎn)在于：如果中間欄含有最小寬度限制，或是含有寬度的內(nèi)部元素，當(dāng)瀏覽器寬度小到一定程度，會(huì)發(fā)生層重疊的情況。然而，一般情況下，除非用戶顯示器分辨率寬度>=1600像素，否則用戶不會(huì)把瀏覽器縮小到1000像素以下的，所以該缺陷危害指數(shù)3。
3) 圣杯布局、雙飛翼布局
略（下面有）
拓展閱讀：
3. 圣杯布局的原理是什么？簡述實(shí)現(xiàn)圣杯布局的步驟
<div id="content">
<div class="main"></div>
<div class="aside"></div>
<div class="extra"></div>
</div>
原理：
在三列中添加了一個(gè)父級容器， 容器設(shè)置左右padding，分別等于左右兩列的寬度。三列都設(shè)置為左浮動(dòng)，使用負(fù)邊距和定位將左右兩列放置于左右兩側(cè)。中間這列設(shè)置寬度100%，達(dá)到自適應(yīng)寬度。
- “三欄”都要被一個(gè)父元素包著。中間那一欄放在最前面（自適應(yīng)寬度）
- “三欄”都要設(shè)置浮動(dòng)
- “左右兩欄”利用“負(fù)margin”來移動(dòng)到上面去。（.aside {margin-left: -100%;}移動(dòng)到左上角，.extra {margin-left: -自身寬度;}移動(dòng)到右上角。）
- 父元素 .content 設(shè)置 padding (.main 的寬度跟 .content 的 content 相同)來“留空”
拓展閱讀：
4. 雙飛翼布局的原理？實(shí)現(xiàn)步驟？
雙飛翼布局原理跟圣杯布局差不多。
雙飛翼布局兩邊留白是靠 .main 里面增加一個(gè) .wrap (設(shè)置margin-left、margin-right)，由此，.aside 和 .extra 就不用在設(shè)置定位偏移了。而圣杯布局兩邊留白是靠 .main 的父元素 設(shè)置 padding，兩邊還需要設(shè)置偏移。
簡單說起來就是”雙飛翼布局比圣杯布局多創(chuàng)建了一個(gè)div，但不用相對布局了“。
總結(jié)：
圣杯布局與雙飛翼布局的比較
- 兩種布局方式都是把主列放在文檔流最前面，使主列優(yōu)先加載。
- 兩種布局方式在實(shí)現(xiàn)上也有相同之處，都是讓三列浮動(dòng)，然后通過負(fù)外邊距形成三列布局。
- 兩種布局方式的不同之處在于如何處理中間主列的位置：圣杯布局是利用父容器的左、右內(nèi)邊距定位；雙飛翼布局是把主列嵌套在div后利用主列的左、右外邊距定位。
兩者相比較，雙飛翼布局雖然多了一個(gè)div，卻減少了相對定位屬性的代碼，個(gè)人認(rèn)為雙飛翼布局在實(shí)現(xiàn)思路和代碼簡潔度上都要比圣杯布局更好一些。
拓展閱讀：
補(bǔ)充：
關(guān)于 margin
margin 參考線
margin 屬性中有 2 類參考線，top 和 left 的參考線屬于一類，right 和 bottom 的參考線屬于另一類。
top 以 containing block 的 content 上邊或者垂直上方相連元素 margin 的下邊為參考線垂直向下位移；left 以 containing block 的 content 左邊或者水平左方相連元素 margin 的右邊為參考線水平向右位移。
right 以元素本身的 border 右邊為參考線水平向右位移；bottom 以元素本身的border 下邊為參考線垂直向下位移。什么叫以元素本身為參考呢，確切含義是指以自身為參考來影響周圍元素的位置（實(shí)質(zhì)即為影響下邊和右邊相鄰元素的參考線）
從上我們可以看到 top 和 left 都是以外元素為參考，而 right 和 bottom 以本元素為參考。
上面的位移方向是指 margin 數(shù)值為正值時(shí)候的情形，如果是負(fù)值則位移方向相反。
示意圖：
demo: margin-bottom為負(fù)值時(shí)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我知道你不知道的負(fù)Margin - margin參考線舉例說明</title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
.wrap {
width: 400px;
}
.example {
width: 200px;
height: 200px;
background-color: #ccccff;
/*margin: -10px 20px -30px 40px;*/
margin-bottom: -30px;
}
.normal {
width: 200px;
height: 200px;
background-color: #cce8cf;
opacity: 0.5;
/*
normal 僅作為 example 前后（有無 margin）效果的參照
*/
}
</style>
</head>
<body>
<div class="wrap">
<div class="example">example元素：margin參考線舉例說明文字，
請查看此元素由于margin的變化所移動(dòng)的位移量</div>
<div class="normal">一個(gè)普通的Box</div>
</div>
</body>
</html>
可以看出，當(dāng) .example 設(shè)置 margin-bottom: -30px; 時(shí)，對于自身并沒有影響，影響的是下面的 .normal。使 .normal 上移 30px。
因?yàn)?.normal 的上邊界元素是 .example 。.normal 會(huì)根據(jù) .example 的邊界來判定自身的位置。
想象下，如果 .example 的 margin-bottom: 30px;，那么 .example 將隔開下方的 .normal ，反之 margin-bottom: -30px;，下方的 .normal 因?yàn)?.margin 參考線內(nèi)凹，導(dǎo)致 .naomal 不得不上移。
什么叫以元素本身為參考呢，確切含義是指以自身為參考來影響周圍元素的位置（實(shí)質(zhì)即為影響下邊和右邊相鄰元素的參考線）
另外，margin-bottom: -30px; 并不會(huì)改變 .example border內(nèi)的物理大小，但會(huì)改變 box 的邏輯大小，即：以此 box 的 margin 的下邊為參考線，不是從 box 的物理位置開始，而是從邏輯位置開始。（現(xiàn)象：.normal 蓋住了 .example 的一部分）
總結(jié)：
當(dāng) margin 4 個(gè)值都為正數(shù)時(shí)，margin 按照正常規(guī)律與周圍元素產(chǎn)生邊距。
當(dāng)元素 margin 的 top 和 left 為負(fù)值時(shí)，會(huì)令元素上移和左移。
當(dāng)元素 margin 的 bottom 和 right 為負(fù)值時(shí)，會(huì)影響到下邊和右邊相鄰元素的參考線。
box 最后的顯示大小等于 box 的 border 及 border 內(nèi)的大小加上正的 margin 值。而負(fù)的 margin 值不會(huì)影響 box 的實(shí)際大小，如果是負(fù)的 top 或 left 值會(huì)引起 box 的向上或向左位置移動(dòng)，如果是 bottom 或 right 只會(huì)影響下面 box 的顯示的參考線。
