1.負(fù)邊距在讓元素產(chǎn)生偏移時(shí)和position：relative有什么區(qū)別?
- 通過負(fù)邊距進(jìn)行偏移的元素碳锈，它會放棄偏移前占據(jù)的空間混稽，這樣它文檔流中的其他元素就會“流”過來填充這部分空間缤言，所以這會造成其他元素的位置發(fā)生了變化宝当。
- position：relative也能使元素發(fā)生偏移，但是在文檔流中胆萧，它仍然占據(jù)著原來的位置庆揩，所以其他元素的位置不會發(fā)生變化。
看demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.ct{
width: 400px;
height: 400px;
border: 1px solid black;
margin-left: 100px;
}
.box{
width: 100px;
height: 100px;
}
.box:nth-child(1) {
background: pink;
}
.box:nth-child(2) {
background: green;
position: relative;
left: -50px;
top: -50px;
}
.box:nth-child(3) {
background: yellow;
}
</style>
</head>
<body>
<div class="ct">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>
看上圖跌穗，我們對第二個(gè)box使用relative订晌，使它向左上移動了50px，但是另外2個(gè)box的位置沒有發(fā)生改變蚌吸。
那么我們對第二個(gè)box改為使用負(fù)margin呢锈拨，看看效果：
.box:nth-child(2) {
background: green;
margin-left: -50px;
margin-top: -50px;
}
可以很明顯的看到，除了第二個(gè)box自身移動以外羹唠，第三個(gè)box跟著向上移動了50px推励。
所以，使用負(fù)margin會改變周圍其他元素的位置肉迫，而position：relative不會。
除了改變其他元素位置外稿黄，負(fù)margin還能改變自身元素的寬度喊衫，前提是這個(gè)元素沒有設(shè)置寬度。
看demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.ct{
width: 400px;
height: 200px;
border: 5px solid green;
margin: 0 auto;
}
.child{
height: 100%;
background: red;
}
</style>
</head>
<body>
<div class="ct">
<div class="child">
</div>
</div>
</body>
</html>
上圖看到杆怕，一個(gè)紅色背景的塊元素沒有設(shè)置寬度族购，它被包裹在一個(gè)寬度為400px，水平居中的父元素里陵珍。
給這個(gè)塊元素設(shè)置左右負(fù)margin看看
.child{
margin-left: -100px;
margin-right: -100px;
}
很明顯寝杖，從上圖看到這個(gè)塊元素的左右寬度增加了。
結(jié)論就是如果沒有設(shè)定width屬性互纯，設(shè)定負(fù)margin-left/right會將元素拖向?qū)?yīng)的方向瑟幕，并增加寬度。
這個(gè)特性將在任務(wù)代碼1中得到使用。
2.使用負(fù) margin 形成三欄布局有什么條件?
1.在HTML代碼中只盹，三欄要在同一個(gè)父元素中辣往，中間欄的代碼要在左右欄的上方，這樣也符合主內(nèi)容先渲染的語義化要求殖卑。
2.左右欄的寬度要固定站削，中間欄的寬度自適應(yīng)，三欄都設(shè)置向左浮動孵稽。
3.滿足上面條件后就能使用負(fù)margin來形成三欄布局了许起。具體方法是左欄使用負(fù)左margin，值為100%菩鲜，右欄使用負(fù)左margin园细，值為右欄自身的寬度。
4.這樣三欄就在同一行了睦袖，再利用一些其他的CSS屬性讓三欄的內(nèi)容互相不重疊珊肃，也就是圣杯布局和雙飛翼布局中使用的方法。
3.圣杯布局的原理是怎樣的? 簡述實(shí)現(xiàn)圣杯布局的步驟
在使用負(fù)margin讓三欄在同一行后馅笙，左右欄與中間欄會有內(nèi)容重疊伦乔，圣杯布局是這樣解決的：
對包含這三欄的父元素添加左右padding，值的大小可以是左右欄的寬度大小或者更大一點(diǎn)董习，然后再對左右欄使用position：relative烈和，讓它們分別向左右移動至合適的位置，使三欄之間沒有內(nèi)容重疊皿淋。
具體步驟：
- 完成基本的html部分招刹，中間欄要在左右欄的上面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>圣杯布局</title>
</head>
<body>
<div class="ct">
<div class="main">主區(qū)域</div>
<div class="aside">左邊欄</div>
<div class="extra">右邊欄</div>
</div>
</body>
</html>
- CSS部分，設(shè)置基本的CSS樣式窝趣，中間欄main寬度自適應(yīng)疯暑，左右欄寬度固定
<style type="text/css">
html,body{
margin: 0;
padding: 0;
}
.ct{
border: 1px solid;
}
.main{
width:100%;
height: 200px;
background: red;
}
.aside{
width: 100px;
height: 100px;
background: blue;
}
.extra{
width: 100px;
height: 100px;
background: yellow;
}
</style>
- 對三欄都設(shè)置浮動，父元素清除浮動哑舒；
.ct:after{
content: "";
display: block;
clear: both;
}
.mian,.aside,.extra{
float: left;
}
這個(gè)時(shí)候頁面是這樣：
- 對左右欄使用負(fù)margin
.aside{
margin-left: -100%;
}
.extra{
margin-left: -100px;
}
這個(gè)時(shí)候三欄就在同一行了妇拯，但是互相之間內(nèi)容有重疊
- 對父元素設(shè)置左右padding，對左右邊欄使用position：relative洗鸵，使三欄之間不再有重疊越锈。
.ct{
padding: 0 100px;
}
.aside{
position: relative;
left: -100px;
}
.extra{
position: relative;
left: 100px;
}
最后完成圣杯布局：
4.雙飛翼布局的原理? 實(shí)現(xiàn)步驟?
雙飛翼布局是這樣解決內(nèi)容重疊的：
給中間欄套一個(gè)父容器，讓這個(gè)父容器去自適應(yīng)寬度和浮動膘滨，中間欄再設(shè)置左右margin讓出空間給左右邊欄甘凭，左右欄就不需要設(shè)置相對定位了。
具體步驟：
- 先寫HTML部分火邓，中間欄套一個(gè)父容器丹弱，讓左右欄與和這個(gè)父容器成為兄弟元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>雙飛翼布局</title>
</style>
</head>
<body>
<div class="ct">
<div class="wrap">
<div class="main">主區(qū)域</div>
</div>
<div class="aside">左邊欄</div>
<div class="extra">右邊欄</div>
</div>
</body>
</html>
- CSS部分德撬，與圣杯布局一樣，左右欄寬度固定蹈矮，包裹著中間欄的容器寬度自適應(yīng)砰逻，使用float和負(fù)margin使它們在同一行，
<style type="text/css">
.ct {
border: 1px solid;
}
.ct:after {
content: "";
display: block;
clear: both;
}
.wrap {
width: 100%;
height: 200px;
float: left;
}
.main{
height: 200px;
background: red;
}
.aside {
width: 100px;
height: 100px;
background: blue;
float: left;
margin-left: -100%;
}
.extra {
width: 100px;
height: 100px;
background: yellow;
float: left;
margin-left: -100px;
}
這個(gè)時(shí)候三欄還有重疊部分
- 對中間欄使用左右margin泛鸟，讓出空間給左右邊欄
.main{
margin-left: 100px;
margin-right: 100px;
}
最后完成雙飛翼布局：
![]()
雙飛翼
本文版權(quán)歸本人和饑人谷所有蝠咆，轉(zhuǎn)載請注明來源。
