1.負(fù)邊距在讓元素產(chǎn)生偏移時(shí)和position: relative有什么區(qū)別?
答：position:relative產(chǎn)生偏移時(shí)，原來所在的空間不會被其他元素占據(jù)，而使用-margin時(shí)原來所在的空間會被占據(jù) 例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position：relative與-margin</title>
<style>
.ct{
width:200px;
border:1px solid #0f0;
width:400px;
height:400px;
}
.box1{
/* position:relative; */
width:100px;
height:100px;
background:#f00;
margin-left:-50px;
margin-top:-50px;
}
.box2{
position:relative;
width:100px;
height:100px;
background:#00f;
}
.box3{
width:100px;
height:100px;
background:#0f0;
position:relative;
top:-20px;
}
.box4{
width:100px;
height:100px;
background:#0ff;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>
搜狗截圖16年07月29日1611_1.png
2.使用負(fù) margin 形成三欄布局有什么條件?
答：
- 三欄都需要設(shè)置
float：left并且父元素設(shè)置清除浮動(dòng)。 - 主內(nèi)容放在上面，利于搜索引擎優(yōu)化，側(cè)邊欄放在下面。
- 主內(nèi)容寬度為自適應(yīng)100%，兩個(gè)側(cè)邊欄為固定寬度。
- 左側(cè)邊欄設(shè)置寬度為
margin-left：-100%有側(cè)邊欄設(shè)置margin-left負(fù)其自己本身的寬度。
3.圣杯布局的原理是怎樣的? 簡述實(shí)現(xiàn)圣杯布局的步驟。
答：
- 先設(shè)置好三欄，主內(nèi)容放在最上面兩側(cè)邊欄放在下面，使他們?nèi)龣谶M(jìn)行左浮動(dòng)，父元素清除浮動(dòng)。
- 設(shè)置兩個(gè)側(cè)邊欄的負(fù)邊距左邊為-100%，右邊為-其自己本身的寬度。
- 由于兩個(gè)側(cè)邊欄遮擋住了主內(nèi)容，我們需要將側(cè)邊欄從主內(nèi)容移出，設(shè)置父元素的左右padding，寬度為側(cè)邊欄寬度。
- 我們再使用position：relative把側(cè)邊欄從主內(nèi)容欄移出即可。
demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style>
*{
padding:0;
margin:0;
}
.ct{
border:1px solid #0f0;
padding:0 100px;
}
.ct:after{
content:' ';
display:block;
clear:both;
}
.box1{
width:100%;
height:100px;
background:#f00;
float:left;
}
.box2{
position:relative;
width:100px;
height:100px;
background:#00f;
float:left;
margin-left:-100%;
left:-100px;
}
.box3{
width:100px;
height:100px;
background:#0f0;
position:relative;
float:left;
margin-left:-100px;
left:100px;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">main</div>
<div class="box2">left</div>
<div class="box3">right</div>
</div>
</body>
</html>
搜狗截圖16年07月29日1656_2.png
4.雙飛翼布局的原理? 實(shí)現(xiàn)步驟?
答：前兩個(gè)跟圣杯布局一樣，后面就是給主內(nèi)容內(nèi)嵌套一個(gè)div，給這個(gè)div設(shè)置自適應(yīng)寬度，再給它設(shè)置與側(cè)邊欄寬度一樣的margin即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>雙飛翼布局</title>
<style>
*{
margin:0;
padding:0;
}
.ct{
border:1px solid;
}
.ct:after{
content:" ";
display:block;
clear:both;
}
.box1{
float:left;
width:100%;
height:100px;
background:#ff0;
}
.box2{
float:left;
width:100px;
height:100px;
background:#f0f;
margin-left:-100%
}
.box3{
float:left;
width:100px;
height:100px;
background:#0f0;
margin-left:-100px;
}
.main{
margin:0 100px;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">
<div clas"main">main</div>
</div>
<div class="box2">left</div>
<div class="box3">right</div>
</div>
</body>
</html>
搜狗截圖16年07月29日1823_3.png
本文版權(quán)歸本人及饑人谷所有，轉(zhuǎn)載請注明出處。
