1. 負(fù)邊距在讓元素偏移時(shí)和position: relative有什么區(qū)別？
通過(guò)負(fù)邊距進(jìn)行偏移的元素叁巨，它會(huì)放棄原來(lái)占據(jù)的空間斑匪，這樣，它后面文檔流中的其它元素就會(huì)“流過(guò)來(lái)填充這部分空間锋勺。
在文檔流中蚀瘸，元素的最終邊界是有 margin 決定的。margin 為負(fù)的時(shí)候相當(dāng)于元素的邊界向里收庶橱，文檔流認(rèn)的是這個(gè)邊界贮勃，不會(huì)管你實(shí)際尺寸是多少。
而 psoition: relative; 只是“外觀”變了悬包，原來(lái)的位置依然“霸占”著衙猪，它仍然會(huì)堅(jiān)守著原來(lái)占據(jù)的空間，不會(huì)讓文檔流其他元素趁虛而入布近〉媸停“頁(yè)面布局”跟原來(lái)一樣。偏移后不對(duì)周圍的元素產(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ù)邊距對(duì)元素寬度的影響
負(fù)邊距不僅能影響元素在文檔流的位置酬诀，還可以增加元素的寬度Ｔ嗳隆！瞒御！
這個(gè)作用的前提是父叙，該元素沒(méi)有設(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)是：代碼足夠簡(jiǎn)潔與高效
不足在于：中間主體存在克星蜻懦，clear:both屬性甜癞。如果要使用此方法，需避免明顯的clear樣式宛乃。
2) 利用絕對(duì)定位實(shí)現(xiàn)三欄布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>絕對(duì)定位實(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)是蒸辆，理解容易，上手簡(jiǎn)單乔煞，受內(nèi)部元素影響而破壞布局的概率低吁朦，就是比較經(jīng)得起折騰柒室。缺點(diǎn)在于：如果中間欄含有最小寬度限制渡贾，或是含有寬度的內(nèi)部元素，當(dāng)瀏覽器寬度小到一定程度雄右，會(huì)發(fā)生層重疊的情況空骚。然而，一般情況下擂仍，除非用戶顯示器分辨率寬度>=1600像素囤屹，否則用戶不會(huì)把瀏覽器縮小到1000像素以下的，所以該缺陷危害指數(shù)3逢渔。
3) 圣杯布局肋坚、雙飛翼布局
略（下面有）
拓展閱讀：
3. 圣杯布局的原理是什么？簡(jiǎn)述實(shí)現(xiàn)圣杯布局的步驟
<div id="content">
<div class="main"></div>
<div class="aside"></div>
<div class="extra"></div>
</div>
原理：
在三列中添加了一個(gè)父級(jí)容器肃廓， 容器設(shè)置左右padding智厌，分別等于左右兩列的寬度。三列都設(shè)置為左浮動(dòng)盲赊，使用負(fù)邊距和定位將左右兩列放置于左右兩側(cè)铣鹏。中間這列設(shè)置寬度100%，達(dá)到自適應(yīng)寬度哀蘑。
- “三欄”都要被一個(gè)父元素包著诚卸。中間那一欄放在最前面（自適應(yīng)寬度）
- “三欄”都要設(shè)置浮動(dòng)
- “左右兩欄”利用“負(fù)margin”來(lái)移動(dòng)到上面去。（.aside {margin-left: -100%;}移動(dòng)到左上角绘迁，.extra {margin-left: -自身寬度;}移動(dòng)到右上角合溺。）
- 父元素 .content 設(shè)置 padding (.main 的寬度跟 .content 的 content 相同)來(lái)“留空”
拓展閱讀：
4. 雙飛翼布局的原理？實(shí)現(xiàn)步驟缀台？
雙飛翼布局原理跟圣杯布局差不多棠赛。
雙飛翼布局兩邊留白是靠 .main 里面增加一個(gè) .wrap (設(shè)置margin-left、margin-right)将硝，由此恭朗，.aside 和 .extra 就不用在設(shè)置定位偏移了。而圣杯布局兩邊留白是靠 .main 的父元素 設(shè)置 padding依疼，兩邊還需要設(shè)置偏移痰腮。
簡(jiǎn)單說(shuō)起來(lái)就是”雙飛翼布局比圣杯布局多創(chuàng)建了一個(gè)div，但不用相對(duì)布局了“律罢。
總結(jié)：
圣杯布局與雙飛翼布局的比較
- 兩種布局方式都是把主列放在文檔流最前面膀值，使主列優(yōu)先加載棍丐。
- 兩種布局方式在實(shí)現(xiàn)上也有相同之處，都是讓三列浮動(dòng)沧踏，然后通過(guò)負(fù)外邊距形成三列布局歌逢。
- 兩種布局方式的不同之處在于如何處理中間主列的位置：圣杯布局是利用父容器的左、右內(nèi)邊距定位翘狱；雙飛翼布局是把主列嵌套在div后利用主列的左秘案、右外邊距定位。
兩者相比較潦匈，雙飛翼布局雖然多了一個(gè)div阱高，卻減少了相對(duì)定位屬性的代碼，個(gè)人認(rèn)為雙飛翼布局在實(shí)現(xiàn)思路和代碼簡(jiǎ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 下邊為參考線垂直向下位移。什么叫以元素本身為參考呢菩掏，確切含義是指以自身為參考來(lái)影響周圍元素的位置（實(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參考線舉例說(shuō)明</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 前后（有無(wú) margin）效果的參照
*/
}
</style>
</head>
<body>
<div class="wrap">
<div class="example">example元素：margin參考線舉例說(shuō)明文字，
請(qǐng)查看此元素由于margin的變化所移動(dòng)的位移量</div>
<div class="normal">一個(gè)普通的Box</div>
</div>
</body>
</html>
可以看出瞧栗，當(dāng) .example 設(shè)置 margin-bottom: -30px; 時(shí)斯稳，對(duì)于自身并沒(méi)有影響，影響的是下面的 .normal迹恐。使 .normal 上移 30px挣惰。
因?yàn)?.normal 的上邊界元素是 .example 。.normal 會(huì)根據(jù) .example 的邊界來(lái)判定自身的位置殴边。
想象下憎茂，如果 .example 的 margin-bottom: 30px;，那么 .example 將隔開(kāi)下方的 .normal 锤岸，反之 margin-bottom: -30px;竖幔，下方的 .normal 因?yàn)?.margin 參考線內(nèi)凹，導(dǎo)致 .naomal 不得不上移是偷。
什么叫以元素本身為參考呢拳氢，確切含義是指以自身為參考來(lái)影響周圍元素的位置（實(shí)質(zhì)即為影響下邊和右邊相鄰元素的參考線）
另外募逞，margin-bottom: -30px; 并不會(huì)改變 .example border內(nèi)的物理大小，但會(huì)改變 box 的邏輯大小馋评，即：以此 box 的 margin 的下邊為參考線放接，不是從 box 的物理位置開(kāi)始，而是從邏輯位置開(kāi)始留特。（現(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 的顯示的參考線。
