1. 負邊距在讓元素產(chǎn)生偏移時和position: relative有什么區(qū)別?
- 負邊距：父邊距是用于調(diào)節(jié)元素位置葱跋，應(yīng)用較為廣泛开镣，margin-top設(shè)置為負值，那么元素就會被“上拉”洪唐，類似地左右下均是這種效果淆党；
- position: relative;是定位的一種方法——相對定位，相對定位規(guī)定元素相對于本身原來位置進行位置的偏移珠闰；
- 區(qū)別：由此可以看出惜浅，元素運用負邊距的時候，本身位置改變的同時還會使兄弟元素位置跟隨其一起移動伏嗜，而position: relative;使元素位置偏移時坛悉，元素原位置所占空間大小沒有發(fā)生改變，兄弟元素不隨著其一起移動承绸。
2. 使用負 margin 形成三欄布局有什么條件?
三欄布局有很多種方式可以實現(xiàn)裸影，其中的圣杯布局和雙飛翼布局運用了負邊距的特點，形成條件為：
- 三個元素在同一個父元素下军熏，并且為兄弟元素轩猩；
- 三個元素均為浮動；
- 中間主要區(qū)塊放在HTML中第一位最先渲染荡澎，width:100%均践；
- 另外兩個邊欄設(shè)置負margin（本身width≤負margin大小≤父元素width）；
3. 圣杯布局的原理是怎樣的? 簡述實現(xiàn)圣杯布局的步驟
- 圣杯布局的原理：
- 設(shè)置浮動使三欄的位置相對自由靈活摩幔；
- 設(shè)置main區(qū)塊width:100%使主要元素占據(jù)整個中間空間（并且有擠下其他浮動元素的作用）彤委；
- 設(shè)置左邊欄：margin-left: -100%;使元素進入到main區(qū)塊的最左上角；（原理在例子下面闡述）
- 設(shè)置右邊欄：負邊距大小為本身高度或衡，使元素到main的最右上角焦影；
- 父元素設(shè)置一定大小的padding，然后運用position: relative屬性對左右邊欄進一步設(shè)置封断，防止其蓋住main區(qū)塊斯辰；
具體步驟如下：
step1:寫好html結(jié)構(gòu)以及基本樣式css：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
.ct {
border: 1px solid;
}
.main {
width: 100%;
height: 200px;
background: rgba(255, 0, 0, 0.5);
}
.sideL {
width: 100px;
height: 100px;
background: rgba(255, 255, 0, 0.5);
}
.sideR {
width: 100px;
height: 100px;
background: rgba(0, 255, 0, 0.5);
}
</style>
</head>
<body>
<div class="ct">
<div class="main">main區(qū)塊</div>
<div class="sideL">左邊欄</div>
<div class="sideR">右邊欄</div>
</div>
</body>
</html>
效果圖：
圣杯step1
step2：對元素進行浮動設(shè)置，并撐開父元素：
.ct:after {
content: '';
display: block;
clear: both; /* 撐開父元素 */
}
.main {
width: 100%;
height: 200px;
background: rgba(255, 0, 0, 0.5);
float: left; /* 設(shè)置浮動 */
}
.sideL {
width: 100px;
height: 100px;
background: rgba(255, 255, 0, 0.5);
float: left; /* 設(shè)置浮動 */
}
.sideR {
width: 100px;
height: 100px;
background: rgba(0, 255, 0, 0.5);
float: left; /* 設(shè)置浮動 */
}
圣杯step2
step3：負margin使邊欄進入到main里面：
.sideL {
width: 100px;
height: 100px;
margin-left: -100%; /* 左邊欄負margin設(shè)置為相對于父元素的-100% */
background: rgba(255, 255, 0, 0.5);
float: left;
}
.sideR {
width: 100px;
height: 100px;
margin-left: -100px; /* 右邊欄負margin為本身width大小 */
background: rgba(0, 255, 0, 0.5);
float: left;
}
圣杯step3
step4：設(shè)置父元素padding澄港，運用position: relative;定位兩邊欄：
* {
margin: 0;
padding: 0;
}
.ct {
border: 1px solid;
padding: 0 120px; /* 父元素設(shè)置內(nèi)邊距 */
}
.ct:after {
content: '';
display: block;
clear: both;
}
.main {
width: 100%;
height: 200px;
background: rgba(255, 0, 0, 0.5);
float: left;
}
.sideL {
position: relative;
left: -120px; /* 左邊欄定位到最左面 */
width: 100px;
height: 100px;
margin-left: -100%;
background: rgba(255, 255, 0, 0.5);
float: left;
}
.sideR {
position: relative;
left: 120px; /* 右邊欄定位到最右面 */
width: 100px;
height: 100px;
margin-left: -100px;
background: rgba(0, 255, 0, 0.5);
float: left;
}
至此椒涯，圣杯結(jié)構(gòu)就已經(jīng)出現(xiàn)了，確實比較像圣杯- -回梧。
補充：
無論是在圣杯布局還是雙飛翼布局中废岂，負margin的作用舉足輕重，它的具體原理是：
- 負margin本身計算并不違反規(guī)范狱意，負值會使子元素位置發(fā)生變化湖苞；（這里假設(shè)父元素不動，其實父元素也可以是其他元素的子元素）
- 負margin可以使父元素的width變大详囤；
描述：
- 這兩點沒有找到具體根據(jù)财骨，不過在《The Definitive Guide》中镐作，明確闡述了這種特性，并且在計算上并不違反規(guī)范隆箩，所以可以廣泛應(yīng)用该贾。
- 圣杯布局和雙飛翼布局是利用第一點，將子元素的間距變?yōu)樨撝蛋齐悠饋淼目傞L還是等于父元素的width杨蛋，所以計算合理，即可將元素自然上流理澎。
計算步驟如下：（300px=300px+100px-100px）
如果要實現(xiàn)兩欄布局逞力，只需要刪除右邊欄，然后將父元素padding 改一下設(shè)置即可：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
.ct {
border: 1px solid;
padding-left: 120px;
}
.ct:after {
content: '';
display: block;
clear: both;
}
.main {
width: 100%;
height: 200px;
background: rgba(255, 0, 0, 0.5);
float: left;
}
.sideL {
position: relative;
left: -120px;
width: 100px;
height: 100px;
margin-left: -100%;
background: rgba(255, 255, 0, 0.5);
float: left;
}
</style>
</head>
<body>
<div class="ct">
<div class="main">main區(qū)塊</div>
<div class="sideL">左邊欄</div>
</div>
</body>
</html>
圣杯改兩欄布局
4. 雙飛翼布局的原理? 實現(xiàn)步驟?
雙飛翼布局的原理和圣杯結(jié)構(gòu)原理大同小異糠爬，基本上就是在思路上的差別寇荧，圣杯布局是父元素padding容納邊欄，而雙飛翼結(jié)構(gòu)是改變main區(qū)塊子元素的margin大小來實現(xiàn)同樣效果执隧，具體如下：
- 浮動和負margin的原理和圣杯布局相同揩抡，詳見圣杯布局補充點。
- 給main區(qū)塊設(shè)置一個子元素镀琉，并且子元素左右margin設(shè)置一定數(shù)字大型北臁；
具體步驟如下：
step1：用圣杯布局的方法滚粟，將邊欄元素通過負margin移動到main區(qū)塊兩側(cè)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
.ct {
border: 1px solid;
}
.ct:after {
content: '';
display: block;
clear: both;
}
.main {
width: 100%;
height: 200px;
background: rgba(255, 0, 0, 0.5);
float: left;
}
.sideL {
width: 100px;
height: 100px;
margin-left: -100%;
background: rgba(255, 255, 0, 0.5);
float: left;
}
.sideR {
width: 100px;
height: 100px;
margin-left: -100px;
background: rgba(0, 255, 0, 0.5);
float: left;
}
</style>
</head>
<body>
<div class="ct">
<div class="main"></div>
<div class="sideL">左邊欄</div>
<div class="sideR">右邊欄</div>
</div>
</body>
</html>
基礎(chǔ)設(shè)置
step2：給main元素添加一個子元素，設(shè)置子元素的margin值及其他一些基礎(chǔ)屬性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
.ct {
border: 1px solid;
}
.ct:after {
content: '';
display: block;
clear: both;
}
.main {
width: 100%;
height: 200px;
float: left;
}
.main .wrap {
background: rgba(255, 0, 0, 0.5);
height: 200px;
margin: 0 120px; /* 給子元素添加兩側(cè)margin */
}
.sideL {
width: 100px;
height: 100px;
margin-left: -100%;
background: rgba(255, 255, 0, 0.5);
float: left;
}
.sideR {
width: 100px;
height: 100px;
margin-left: -100px;
background: rgba(0, 255, 0, 0.5);
float: left;
}
</style>
</head>
<body>
<div class="ct">
<div class="main">
<div class="wrap">main區(qū)塊</div> <!--添加一個類名為wrap的子元素-->
</div>
<div class="sideL">左邊欄</div>
<div class="sideR">右邊欄</div>
</div>
</body>
</html>
雙飛翼布局
如圖所示刃泌，雙飛翼布局就出現(xiàn)了凡壤，只是思路上和圣杯布局的有差別，兩者本質(zhì)上差別不大耙替。
代碼題
代碼1預(yù)覽
代碼2預(yù)覽
代碼3預(yù)覽
代碼4預(yù)覽
代碼5預(yù)覽
本文版權(quán)歸本人及饑人谷所有亚侠，轉(zhuǎn)載請注明來源。謝謝俗扇！
