1.負(fù)邊距在讓元素產(chǎn)生偏移時(shí)和position: relative有什么區(qū)別?
答：使用負(fù)邊距的時(shí)候會(huì)改變?cè)卦谖臋n流中的位置。如圖一所示;對(duì)于Box2設(shè)置了margin:-20px;下面的黃色Box3也會(huì)隨著向上移動(dòng)。負(fù)邊距的作用能拉動(dòng)其他沒(méi)有脫離文檔流的元素，而設(shè)置position：relative之后元素原來(lái)在文檔流中占據(jù)的空間仍會(huì)保留，如圖2所示，它只是相對(duì)于自己原來(lái)在文檔流中的位置進(jìn)行偏移。
2.使用負(fù) margin 形成三欄布局有什么條件?
答：
- 首先需要有一個(gè)父容器和其下三個(gè)并列的兄弟子元素，并且三個(gè)子元素都設(shè)置浮動(dòng)。
- 父容器需要設(shè)置內(nèi)邊距padding
- 主要區(qū)塊應(yīng)寫(xiě)在最前面，保證優(yōu)先被渲染
- 左側(cè)欄的margin-left應(yīng)設(shè)置為-100%,右側(cè)欄margin-left設(shè)置為它本身的寬度。
3.圣杯布局的原理是怎樣的? 簡(jiǎn)述實(shí)現(xiàn)圣杯布局的步驟
答：圣杯布局主要是運(yùn)用了負(fù)邊距，浮動(dòng)和相對(duì)定位去完成一個(gè)三欄布局。
步驟：
①首先寫(xiě)出圣杯布局的DOM結(jié)構(gòu)，對(duì)三個(gè)區(qū)塊設(shè)置寬度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<link rel="stylesheet" type="text/css" href="task1.css">
</head>
<body>
<div class="ct">
<div class="main">Main</div>
<div class="aside">Aside</div>
<div class="extra">Extra</div>
</div>
</body>
</html>```
body{
font-family: "微軟雅黑";
}
.ct{
width:800px;
border:1px solid;
}
.main{
width:500px;
height:300px;
background:#003151;
color:#ffffff;
}
.aside{
width:100px;
height:100px;
background:#7698A1;
}
.extra{
width:100px;
height:100px;
background:#D91B22;
}```
②對(duì)三個(gè)區(qū)塊設(shè)置浮動(dòng)以及aside和extra的負(fù)邊距，讓它們飄到main上面。（在父容器清除浮動(dòng)）
③最后設(shè)置父容器的內(nèi)邊距為aside和extra的自身寬度，并且對(duì)這倆欄設(shè)置相對(duì)定位為自身寬度。
.ct{
width:800px;
padding:0 100px;
border:1px solid;
}
.ct::after{
content: "";
display: block;
clear: both;
}
.main{
float:left;
width:100%;
height:300px;
background:#003151;
color:#ffffff;
text-align: center;
}
.aside{
float:left;
position:relative;
left:-100px;
margin-left:-100%;
width:100px;
height:100px;
background:#7698A1;
text-align: center;
}
.extra{
float:left;
position:relative;
left:100px;
margin-left:-100px;
width:100px;
height:100px;
background:#D91B22;
text-align: center;
}```
####4.雙飛翼布局的原理? 實(shí)現(xiàn)步驟?
答：雙飛翼布局與圣杯布局的不同點(diǎn)在于，它不是用主區(qū)塊中設(shè)置padding來(lái)形成三欄的方式，而是在主區(qū)塊中設(shè)置一個(gè)子元素，再對(duì)這個(gè)子元素設(shè)置外邊距的值來(lái)形成三欄。
.main{
float:left;
width:100%;
height:300px;
color:#ffffff;
text-align: center;
}
.aside{
float:left;
margin-left:-100%;
width:100px;
height:300px;
background:#7698A1;
text-align: center;
}
.extra{
float:left;
margin-left:-100px;
width:100px;
height:300px;
background:#D91B22;
text-align: center;
}
.main .child{
height:300px;
margin-left:150px;
margin-right:150px;
background:#003151;
}```
****本文版權(quán)歸饑人谷_鬼腳七和饑人谷所有，轉(zhuǎn)載請(qǐng)注明來(lái)源。****
