本章主要介紹常見的布局實(shí)現(xiàn)蠕蚜，包括：
[1] 兩列布局
[2] 三列布局
[3] 彈性 (Flex) 布局
[1] 兩列布局
- 子列固定寬度（設(shè)置
absolute扣囊、float）乎折，主列自適應(yīng)屏幕（調(diào)整margin）。 - 有
absolute + margin侵歇、float + margin骂澄、float + 負(fù)margin等方式。
<!DOCTYPE html>
<html>
<head>
<title>兩列布局</title>
<meta charset="utf-8">
<style type="text/css">
/* 方法1: absolute + margin 方式 */
/* 優(yōu)點(diǎn): 可以優(yōu)先渲染主元素 main 中的內(nèi)容*/
/* 缺點(diǎn): aside 列脫離了文檔流, 當(dāng) aside 列比 main 列高時(shí)會(huì)覆蓋后面的布局 */
.container1 {
position: relative;
margin: 10px;
border: 1px solid #000;
}
.aside1 {
position: absolute;
top: 0; /* 優(yōu)先渲染 main 中內(nèi)容時(shí)不可以省略惕虑，因?yàn)?main1 中的 margin-left 占據(jù)了 200px 的大小 */
left: 0;
width: 200px;
height: 100px;
background-color: rgba(255, 0, 0, .5);
}
.main1 {
height: 100px;
margin-left: 200px; /* 左側(cè) 200px 被側(cè)邊欄覆蓋 */
background-color: rgba(0, 255, 0, .5);
}
/* 方法2: float + margin 方式 */
/* 優(yōu)點(diǎn)和缺點(diǎn)與方法 1 前者相反 */
.container2 {
position: relative;
margin: 10px;
border: 1px solid #000;
}
.aside2 {
float: left;
width: 200px;
height: 100px;
background-color: rgba(255, 0, 0, .5);
}
.main2 {
height: 100px;
margin-left: 200px; /* 左側(cè) 200px 被側(cè)邊欄覆蓋 */
background-color: rgba(0, 255, 0, .5);
}
/* 方法3: float + 負(fù)margin 方式 (即雙飛翼布局) */
/* 浮動(dòng) container 和 aside 列, 通過 負(fù)margin 正確定位 aside 列
* container 寬度值設(shè)為 100%
* main 列的 margin-left 消除被 aside 覆蓋的部分
* aside 不包括在 container 中
*/
/* 優(yōu)點(diǎn): 解決了 float + margin 不能優(yōu)先渲染 main 中的內(nèi)容 */
.container3 {
float: left; /* 浮動(dòng) */
width: 100%;
border: 1px solid #000;
}
.aside3 {
float: left;
margin-left: -100%; /* 調(diào)整到合適位置 */
width: 200px;
height: 100px;
background-color: rgba(255, 0, 0, .5);
}
.main3 {
height: 100px;
margin-left: 200px; /* 左側(cè) 200px 被側(cè)邊欄覆蓋 */
background-color: rgba(0, 255, 0, .5);
}
</style>
</head>
<body>
<!-- 能優(yōu)先渲染 main -->
<div class="container1">
<div class="main1">主列</div> <!-- 如果想要交換兩列, 需要將 .aside1 中的 left 改成 right, .main1 中的 margin-left 改成 margin-right -->
<div class="aside1">子列</div>
</div>
<!-- 不能優(yōu)先渲染 main -->
<div class="container2">
<div class="aside2">子列</div>
<div class="main2">主列</div> <!-- 如果想要交換兩列, 需要將 .aside2 中的 float 改成 right, .main2 中的 margin-left 改成 margin-right -->
</div>
<!-- 能優(yōu)先渲染 main, 注意: aside 不包括在 container 中-->
<div class="container3">
<div class="main3">主列</div> <!-- 如果想要交換兩列, 需要將 .aside3 中的 float 改成 right, .main3 中的 margin-left 改成 margin-right -->
</div>
<div class="aside3">子列</div>
</body>
</html>
兩列布局.png
[1] 三列布局
- 兩側(cè)固定寬度（設(shè)置
absolute坟冲、float），主列自適應(yīng)屏幕（調(diào)整margin）溃蔫。 - 有
absolute + margin健提、float + margin、float + 負(fù)margin等方式伟叛。
<!DOCTYPE html>
<html>
<head>
<title>三列布局</title>
<meta charset="utf-8">
<style type="text/css">
/* 方法1: absolute + margin 方式 */
/* 優(yōu)點(diǎn): 可以優(yōu)先渲染主元素 main 中的內(nèi)容*/
/* 缺點(diǎn): leftSide 和 rightSide 列脫離了文檔流, 當(dāng) leftSide 和 rightSide 列比 main 列高時(shí)會(huì)覆蓋后面的布局 */
.container1 {
position: relative;
margin: 10px;
border: 1px solid #000;
}
.leftSide1 {
position: absolute;
top: 0; /* 優(yōu)先渲染 main 中內(nèi)容時(shí)不可以省略私痹，因?yàn)?main1 中的 margin 占據(jù)了 左、右的大小 */
left: 0;
width: 200px;
height: 100px;
background-color: rgba(255, 0, 0, .5);
}
.rightSide1 {
position: absolute;
top: 0; /* 優(yōu)先渲染 main 中內(nèi)容時(shí)不可以省略统刮，因?yàn)?main1 中的 margin 占據(jù)了 左紊遵、右的大小 */
right: 0;
width: 300px;
height: 100px;
background-color: rgba(255, 0, 0, .5);
}
.main1 {
height: 100px;
margin: 0 300px 0 200px; /* 左側(cè) 200px 被側(cè)邊欄覆蓋 */
background-color: rgba(0, 255, 0, .5);
}
/* 方法2: float + margin 方式 */
/* 優(yōu)點(diǎn)和缺點(diǎn)與方法 1 前者相反 */
.container2 {
position: relative;
margin: 10px;
border: 1px solid #000;
}
.leftSide2 {
float: left;
width: 200px;
height: 100px;
background-color: rgba(255, 0, 0, .5);
}
.rightSide2 {
float: right;
width: 300px;
height: 100px;
background-color: rgba(255, 0, 0, .5);
}
.main2 {
height: 100px;
margin: 0 300px 0 200px; /* 左側(cè) 200px 被側(cè)邊欄覆蓋 */
background-color: rgba(0, 255, 0, .5);
}
/* 方法3: float + 負(fù)margin 方式 (即雙飛翼布局) */
/* 浮動(dòng) container 和 side 列, 通過 負(fù)margin 正確定位 side 列
* container 寬度值設(shè)為 100%
* main 列的 margin-left 消除被 side 覆蓋的部分
* side 不包括在 container 中
*/
/* 優(yōu)點(diǎn): 解決了 float + margin 不能優(yōu)先渲染 main 中的內(nèi)容 */
.container3 {
float: left; /* 浮動(dòng) */
width: 100%;
border: 1px solid #000;
}
.leftSide3 {
float: left;
margin-left: -100%; /* 調(diào)整到合適位置 */
width: 200px;
height: 100px;
background-color: rgba(255, 0, 0, .5);
}
.rightSide3 {
float: right;
margin-left: -100%; /* 調(diào)整到合適位置 */
width: 300px;
height: 100px;
background-color: rgba(255, 0, 0, .5);
}
.main3 {
height: 100px;
margin: 0 300px 0 200px; /* 左側(cè) 200px 被側(cè)邊欄覆蓋 */
background-color: rgba(0, 255, 0, .5);
}
</style>
</head>
<body>
<!-- 能優(yōu)先渲染 main -->
<div class="container1">
<div class="main1">主列</div>
<div class="leftSide1">左列</div>
<div class="rightSide1">右列</div>
</div>
<!-- 不能優(yōu)先渲染 main -->
<div class="container2">
<div class="leftSide2">左列</div>
<div class="rightSide2">右列</div>
<div class="main2">主列</div>
</div>
<!-- 能優(yōu)先渲染 main, 注意: side 不包括在 container 中-->
<div class="container3">
<div class="main3">主列</div>
</div>
<div class="leftSide3">左列</div>
<div class="rightSide3">右列</div>
</body>
</html>
三列布局.png
[3] 彈性 (Flex) 布局
- 彈性布局：采用 Flex 布局的元素，稱為 Flex 容器（flex container）侥蒙，它的所有子元素自動(dòng)成為容器成員暗膜，稱為 Flex 項(xiàng)目（flex item）。
- 用法：
display：flex（不能與float鞭衩、position混用）学搜； - (父)容器屬性：
flex-flow（包括flex-direction、flex-wrap）醋旦、justify-content（水平）恒水、align-items（垂直）、align-content饲齐； - (子)項(xiàng)目屬性：
order钉凌、flex-grow、flex-shrink捂人、flex-basis御雕、flex、align-self滥搭。
- 用法：
接下來是幾個(gè)應(yīng)用 Flex 布局的例子：
- 三列等寬布局
<style type="text/css">
#main {
width: 220px;
border: 1px solid black;
display: flex; /* 使用彈性布局 */
}
#main div {
flex: 1; /* 所有彈性盒模型對(duì)象的子元素都有相同的長度, 忽略它們內(nèi)部的內(nèi)容 */
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">紅色</div>
<div style="background-color:lightblue;">藍(lán)色</div>
<div style="background-color:lightgreen;">帶有更多內(nèi)容的綠色 div</div>
</div>
</body>
三列等寬布局.png
- 隨機(jī)變換盒子顏色
<style type="text/css">
#main {
width: 800px;
height: 400px;
border: 1px solid black;
display: flex; /* 使用彈性布局 */
flex-flow: row wrap; /* flex-direction (規(guī)定 Flex 項(xiàng)目按行分布) 和 flex-wrap (Flex 項(xiàng)目自動(dòng)換行) */
justify-content: space-between; /* 水平等距 */
align-items: center; /* 垂直居中 */
}
#main div { /* 定義 Flex 項(xiàng)目 */
width: 100px;
height: 100px;
margin: 2px;
}
</style>
</head>
<body>
<div id="main">
<!-- Js 生成的 Flex 項(xiàng)目 -->
</div>
<script>
var color = ["#FFD700", "#FF4040", "#D1EEEE", "#CAFF70", "#C1CDCD", "#B03060", "#9ACD32", "#7CFC00", "#FF8C00"];
for (var i=0; i < 13; i++) {
var div = document.createElement('div');
var pos = Math.floor(Math.random() * color.length);
div.style.background = color[pos];
var num = Math.floor(Math.random() * 100); /* 生成一個(gè) [0, 100) 大小的整數(shù) */
div.style.order = num; /* Flex 項(xiàng)目按照從小到大的順序顯示 */
div.innerHTML= num;
document.getElementById('main').appendChild(div);
}
</script>
</body>
隨機(jī)變換盒子顏色.png
更多關(guān)于 Flex 用法酸纲，可以參考文章
Flex 布局語法教程
