一、負邊距在讓元素產生偏移時和position: relative有什么區別?
- 負邊距在讓元素產生偏移的時候其自身位置將會被其后元素所占據
-
position:relative在讓元素產生偏移的時候會保留其自身位置
比如如下圖所示
負邊距和position:relative偏移時的不同
二、使用負 margin 形成三欄布局有什么條件?
- 使用負margin形成三欄布局條件如下：
- 三欄布局中的三個區塊都要設置左浮動，并且在包容它們的父元素中清除浮動的影響
- 左右兩個區塊設置margin-left的值，其中左邊區塊設置為margin-left:-100%；右邊區塊設置為margin-left:-width，width是自身的寬度
- 左右兩個區塊寬度固定；中間區塊寬度為自適應
- 父容器中設置padding，左右區塊都設置通過position:relative來偏移
比如如下代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習</title>
<style>
*{
margin: 0;
padding: 0;
}
.center{
width: 500px;
height:500px;
padding: 0 150px;
margin: 0 auto;
border:1px solid black;
}
.center:after{
content: "";
display: block;
clear: both;
}
.center>div{
text-align: center;
}
.box1{
width: 500px;
height: 300px;
background-color: pink;
float: left;
}
.box2{
width: 150px;
height: 300px;
background-color: orange;
margin-left: -100%;
float: left;
position: relative;
left: -150px;
}
.box3{
width: 150px;
height: 300px;
background-color: olive;
float: left;
margin-left: -150px;
position: relative;
left: 150px;
}
</style>
</head>
<body>
<div class="center">
<div class="box1">主區塊</div>
<div class="box2">左欄</div>
<div class="box3">右欄</div>
</div>
</body>
</html>
效果圖如下所示
三欄布局
三、圣杯布局的原理是怎樣的? 簡述實現圣杯布局的步驟？
- 圣杯布局的原理是通過利用float和負margin，將元素擺放至我們將其設定的位置
- 圣杯布局具體步驟如下：
- 寫出頁面布局的html，如下
<div class="center">
<div class="main">主區塊</div>
<div class="left_aside">左欄</div>
<div class="right_aside">右欄</div>
</div>
- 設置各欄的寬度，如下
.center{
width: 80%;
margin: 0 auto;
border: 1px solid black;
}
.main{
width: 100%;
height: 300px;
background-color: pink;
}
.left_aside{
width: 100px;
height: 100px;
background-color: orange;
}
.right_aside{
width: 100px;
height: 100px;
background-color: olive;
}
- 通過設置三欄的float和左右兩欄的負margin，使左右兩欄上到.main上，并在父元素中清除浮動，如下
.center{
width: 80%;
margin: 0 auto;
border: 1px solid black;
}
.center::after{
content: "";
display: block;
clear: both;
}
.main{
width: 100%;
height: 300px;
background-color: pink;
float: left;
}
.left_aside{
width: 100px;
height: 100px;
background-color: orange;
float: left;
margin-left: -100%;
}
.right_aside{
width: 100px;
height: 100px;
background-color: olive;
float: left;
margin-left: -200px;
}
- 在父容器中設置左右的padding，其值為左右兩欄的寬度；對左右兩欄設置相對定位，左右偏移值為其自身寬度，如下
.center{
width: 80%;
margin: 0 auto;
padding: 0 100px;
border: 1px solid black;
}
.center::after{
content: "";
display: block;
clear: both;
}
.main{
width: 100%;
height: 100px;
background-color: pink;
float: left;
}
.left_aside{
width: 100px;
height: 100px;
background-color: orange;
float: left;
margin-left: -100%;
position: relative;
left: -100px;
}
.right_aside{
width: 100px;
height: 100px;
background-color: olive;
float: left;
margin-left: -100px;
position: relative;
left: 100px;
}
最終呈現的效果圖如下圖
圣杯布局效果圖
四、雙飛翼布局的原理? 實現步驟?
- 雙飛翼布局沒有圣杯布局中設置父容器的padding和通過相對定位來實現左右兩欄的偏移，其在中間主區塊下設置了新的子元素，通過子元素的左右margin達到布局的目的
- 雙飛翼布局的具體步驟如下：
- 寫出頁面布局的html，如下
div class="center">
<div class="main">
<div class="wrap"></div>
</div>
<div class="aside1"></div>
<div class="aside2"></div>
</div>
- 設置三欄的css樣式，通過float和負margin值使左右兩欄上到.main上，并在父元素中清除浮動，如下
.center{
margin: 0 auto;
border:1px solid black;
}
.center:after{
content: "";
display: block;
clear: both;
}
.main{
width: 100%;
height: 300px;
float: left;
}
.aside1{
width: 150px;
height: 300px;
background-color: orange;
margin-left: -100%;
float: left;
}
.aside2{
width: 150px;
height: 300px;
background-color: olive;
float: left;
margin-left: -150px;
}
- 在.main的子元素上設置左右外邊距即可，如下
.main .wrap{
height: 300px;
margin-left: 170px;
margin-right: 170px;
background-color: purple;
}
最終效果圖如下
雙飛翼布局效果圖
版權聲明：本教程版權歸鄧攀和饑人谷所有，轉載須說明來源！！！！
