常見(jiàn)布局（PC）
- 固定寬度布局——缺點(diǎn)：屏幕尺寸不夠時(shí)會(huì)出現(xiàn)滾動(dòng)條晌缘。
- 彈性布局（布局隨瀏覽器變化）——缺點(diǎn)：代碼復(fù)雜饰豺。
- 響應(yīng)式布局——多終端（PC亿鲜、Pad、Phone）冤吨。
單欄布局
- 常見(jiàn)布局：
<div id="layout">
<div id="header">頭部</div>
<div id="main">內(nèi)容</div>
<div id="footer">尾部</div>
</div>
- 進(jìn)化（減少無(wú)意義標(biāo)簽蒿柳，便于控制局部）
<div id="header" class="layout">頭部</div>
<div id="main" class="layout">內(nèi)容</div>
<div id="footer" class="layout">尾部</div>
通過(guò)#xxx設(shè)置樣式背景等，
通過(guò).xxx設(shè)置內(nèi)容排版等漩蟆。
- 通欄布局
<div id="header">
<div class="layout">頭部</div>
</div>
<div id="main">
<div class="layout">內(nèi)容</div>
</div>
<div id="footer">
<div class="layout">尾部</div>
</div>
注：可能會(huì)出現(xiàn)“滾動(dòng)背景色”垒探，此時(shí)給body設(shè)置"min-width"即解決問(wèn)題。
雙列布局
一般為一列固定寬度怠李，另一列寬度自適應(yīng)圾叼。
- 例：
- HTML：
<div id="content clearfix">
<div class="aside">aside</div>
<div class="main">main</div>
</div>
- CSS：
.aside {
width: 200px;
min-height: 300px;
float: left;
}
.main {
margin-left: 210px;
}
.clearfix {
content: "\200B";
display: block;
clear: both;
height: 0;
}
三列布局
一般為兩側(cè)固定寬度蛤克，中間自適應(yīng)。
- 例：
- HTML：
<div id="content clearfix">
<div class="aside left">aside-left</div>
<div class="aside right">aside-right</div>
<div class="main">main</div>
</div>
- CSS：
.aside {
width: 200px;
min-height: 300px;
float: left;
}
.aside.right {
float: right;
}
.main {
margin-left: 210px;
margin-right: 210px;
}
.clearfix {
content: "\200B";
display: block;
clear: both;
height: 0;
}
注：三列設(shè)置浮動(dòng)時(shí)要注意html中的文檔順序問(wèn)題夷蚊，要保證浮動(dòng)元素先渲染（即浮動(dòng)的寫(xiě)在不浮動(dòng)的前面）构挤，如果不想糾結(jié)于此，那么就都設(shè)置浮動(dòng)惕鼓。
一些點(diǎn)
- max-width會(huì)在屏幕不夠大時(shí)自動(dòng)縮放內(nèi)容筋现，但有可能會(huì)影響內(nèi)容的顯示。
- 內(nèi)部元素居中
一般情況下箱歧，使用如下CSS代碼：
.parent {
text-align: center;
}
.child {
display: inline-block;
}
或者：
給想居中的塊套個(gè)div矾飞，設(shè)置margin: 0 auto;，再給塊設(shè)置float呀邢。
若為IE6等不支持inline-block的情況：
.child {
*display: inline;
*zoom: 1;
}
- 使用inline-block設(shè)置水平垂直絕對(duì)居中
- 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<main>123456</main>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.wrapper {
background-color: #f1f1f1;
width: 600px;
height: 400px;
text-align: center;
}
main {
background-color: #fff;
width: 200px;
height: 200px;
display: inline-block;
vertical-align: middle;
}
.wrapper:before,
.wrapper:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
Flex布局
Flex之前的布局
- normal flow
- float+ clear
- position: relative + absolute
- display: inline-block
- 負(fù)margin
Flex出現(xiàn)
一種新的布局方式——Flex布局
- 塊級(jí)布局側(cè)重垂直方向洒沦，行內(nèi)布局側(cè)重水平方向，F(xiàn)lex布局與方向無(wú)關(guān)驼鹅。
- Flex布局可實(shí)現(xiàn)空間自動(dòng)分配微谓、自動(dòng)對(duì)齊。
- Flex適用于簡(jiǎn)單的線性布局输钩。
常用Flex屬性
Flex container屬性
flex-direction: row（行展示）、row-reverse（反向行展示）仲智、column（列展示）买乃、column-reverse（列反向展示）;
flex-wrap: no-wrap（不換行，自動(dòng)對(duì)齊）钓辆、wrap（換行）;
justify-content: space-between（占兩頭剪验，多余空間勻中間）、space-around（多余空間均勻分布周?chē)┣傲lex-start（從起點(diǎn)開(kāi)始排布）功戚、flex-end（從終點(diǎn)開(kāi)始排布）、center（居中排布）;
align-items: stretch（側(cè)軸似嗤，伸展至和最高一樣高）啸臀、flex-start（側(cè)軸起點(diǎn)）、flex-end（側(cè)軸終點(diǎn)）烁落、center（側(cè)軸居中）乘粒；
align-content: 多行之間的對(duì)齊方式調(diào)整（使用較少）。
Flex item屬性
flex-grow: 增長(zhǎng)比例（自動(dòng)分配空白空間）伤塌；
flex-shrink: 收縮比例（空間不夠時(shí)自動(dòng)收縮）灯萍；
flex-basis: 默認(rèn)大小（一般不用）每聪；
order: 順序（強(qiáng)制排序旦棉，每個(gè)都得排）齿风；
align-self: 給單獨(dú)的元素設(shè)置對(duì)齊方式；
使用Flex布局
手機(jī)頁(yè)面布局
幾個(gè)要點(diǎn)：
- 重置樣式
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;/* 使用IE盒模型绑洛，便于尺寸控制 */
}
- 布局的幾個(gè)重要代碼
.layout {
height: 100vh;/* 排滿屏幕 */
margin: 0 auto;
background-color: #ccc;
display: flex;
flex-direction: column;
- 內(nèi)容部分幾個(gè)重要代碼
main {
flex-grow: 1;/* 布滿空白位置 */
overflow: auto;/* 內(nèi)容超出時(shí)可滾動(dòng) */
}
產(chǎn)品列表
幾個(gè)重要代碼
.layout>ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
/* 寬度設(shè)在了layout救斑，為700px */
}
.layout>ul>li {
margin: 20px 0;
padding: 10px;
background-color: #fff;
border: 2px solid #ddd;
}
PC頁(yè)面布局
（略，見(jiàn)后實(shí)例）
完美居中
.parent {
height: 400px;
background-color: #ccc;
display: flex;
justify-content: conter;
align-items: center
}
一些實(shí)例
注：多行文本溢出顯示省略號(hào)
webkit的可以參考：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;/* 第幾行想開(kāi)始省略诊笤，就填幾 */
overflow: hidden;
不保證有效果系谐，私有前綴的屬性屬于實(shí)驗(yàn)屬性，可能隨著瀏覽器的升級(jí)移除讨跟。
- 導(dǎo)航欄
導(dǎo)航欄-float
導(dǎo)航欄-flex - 兩欄布局
兩欄布局-float
兩欄布局-flex - 三欄布局
三欄布局-float
三欄布局-flex - 列表
列表 - 圖文
圖文
