頁(yè)面布局需求：
- 三列布局，左右兩端固定臊旭，中間部分自適應(yīng)落恼。
- 中間欄DOM元素排在首位，在瀏覽器優(yōu)先渲染离熏。
布局要求.png
圣杯布局
- 中間元素占滿(mǎn)寬度
100%- 三元素分別
float:left佳谦，左右元素分別負(fù)的maigin-left，使得三元素中左右一行排列展示- 三元素進(jìn)行相對(duì)定位：
position:relative滋戳，左元素：left,右元素：right钻蔑，顯示中間元素的內(nèi)容區(qū)- 最外層容器去掉多余的padding：
padding:0 right(width) 0 left(width)
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main,
.left,
.right {
min-height: 300px;
float: left; //三元素一行排列
position: relative; //相對(duì)定位
}
.container {
padding: 0 300px 0 200px;
}
.main {
width: 100%;
background-color: bisque;
}
.left {
width: 200px;
background-color: aqua;
margin-left: -100%;
left: -200px; //相對(duì)定位：解決中間元素內(nèi)容被遮擋問(wèn)題
}
.right {
width: 300px;
background-color: darkorange;
margin-left: -300px;
right: -300px;
}
雙飛翼布局
雙飛翼布局區(qū)別于圣杯布局：
- 內(nèi)部塊多了一個(gè)元素
- 在解決內(nèi)部元素文本被遮擋問(wèn)題：沒(méi)有采用相對(duì)定位，而是采用
margin：0 right(width) 0 left(width)去解決奸鸯，更簡(jiǎn)潔易懂咪笑。
<div class="container">
<div class="main">
<div class="content">content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main,
.left,
.right {
min-height: 300px;
float: left;
}
.main {
width: 100%;
background-color: bisque;
padding: 0 300px 0 200px; // 第一種：外層元素增加內(nèi)padding顯出內(nèi)部文本
}
.content {
margin: 0 300px 0 200px; //第二種：內(nèi)部元素增加外margin以此來(lái)顯示文本
}
.left {
width: 200px;
background-color: aqua;
margin-left: -100%;
}
.right {
width: 300px;
background-color: darkorange;
margin-left: -300px;
}
flex彈性布局
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
.container {
display: flex;
flex-direction: row;
}
.main,
.left,
.right {
min-height: 300px;
}
.main {
background-color: bisque;
/* 第一種：flex-grow 放大中間元素的比例，使其占滿(mǎn)剩余全部空間府喳，默認(rèn)為0蒲肋，對(duì)剩余空間不做處理 */
flex-grow: 1;
flex: 1; //第二種方法：flex:1; 使元素獨(dú)占剩余的全部
}
.left {
width: 200px;
background-color: aqua;
/* order 屬性定義元素的排列順序蘑拯，越小越靠前钝满，默認(rèn)值為0 */
order: -1;
}
.right {
width: 300px;
background-color: darkorange;
}
絕對(duì)定位布局
- 絕對(duì)定位：會(huì)使得元素脫離文檔流，不占據(jù)空間申窘，所以絕對(duì)定位的元素會(huì)覆蓋頁(yè)面上的其他元素弯蚜，可以通過(guò)
z-index去控制文檔的堆疊層次。
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main,
.left,
.right {
min-height: 300px;
top: 0; // 還需要設(shè)置 `top:0` 剃法！
}
.container {
position: relative; // 絕對(duì)定位必須設(shè)置父級(jí)別元素`position:relative`參照物
}
.main {
margin: 0 300px 0 200px;
background-color: bisque;
}
.left {
width: 200px;
background-color: aqua;
//左右元素分別進(jìn)行l(wèi)eft:0,right:0的決定定位碎捺，脫離文檔流，占據(jù)以一排元素的左右兩端。
position: absolute;
left: 0;
}
.right {
width: 300px;
background-color: darkorange;
position: absolute;
right: 0;
}
