布局類型
- 浮動布局
- 流式布局
- 定位布局
- flex布局
- grid布局
布局詳解
1.浮動布局煮仇。
浮動布局是利用float的特性缸废，進行的布局型凳。我進行過的學習有：
1）. float + margin 的兩欄布局又跛。
<!DOCTYPE html>
<head>
<title>width_layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.content {
min-width: 300px;
}
.div1 {
width: 200px;
height: 300px;
background: green;
float: left;
}
.div2 {
height: 300px;
background: pink;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="content">
<div class="div1"></div>
<div class="div2"></div>
</div>
</body>
</html>
沒啥好說的吠勘，本來就很簡單嗦董，看到這里三欄自然而然就出來了:
2）fload + margin 三欄布局
<!DOCTYPE html>
<head>
<title>layout2</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
* {
margin: 0;
padding: 0;
}
.main {
height: 300px;
width: 100%;
min-width: 400px;
}
.main_left {
height: 300px;
width: 200px;
float: left;
background-color: green;
text-align: center;
}
.main_center {
height: 300px;
margin-left: 200px;
margin-right: 100px;
text-align: center;
background-color: pink;
}
.main_right {
height: 300px;
width: 100px;
float: right;
text-align: center;
background-color: blue;
}
.left{
height: 300px;
margin-left: 200px;
margin-right: 100px;
text-align: center;
background-color: red;
float: left;
}
</style>
</head>
<body>
<!-- <div class="main"> -->
<div class="main_right">我是右邊部分母谎，寬度不變</div>
<div class="main_left">我是左邊部分，寬度不變</div>
<!-- <div class="main_center">我是中間部分京革，寬度自適應</div> -->
<div class="main_center">我是中間部分奇唤，寬度自適應</div>
<!-- </div> -->
</body>
</html>
這里對float布局做個分析吧，對于float設計的出發(fā)點就是環(huán)繞匹摇，因此它對于普通的盒子咬扇，會產生環(huán)繞效果，上文的代碼中廊勃，就是環(huán)繞在center中懈贺，這里稍微需要注意的是，center需要放在最后面坡垫，否則會換行梭灿，這是因為float只會圍繞他后面的非float元素。
還有一點就是這種布局有一種缺點就是需要知道左右兩欄的寬度冰悠，center才能做出適配堡妒，下面給出優(yōu)化方案：
3) float + margin + BFC 三欄
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.center,.left,.right{
height: 100px;
}
.center{
display: table-cell;
width: 9000px;
background: red;
*display: inline-block;
*width: auto;
}
.left{
float: left;
width: 200px;
background: green;
}
.right{
float: right;
width: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</body>
</html>
寫法差距不大，只是center觸發(fā)BFC溉卓，利用了BFC的區(qū)域不會與float box重疊的效果來完成三欄涕蚤。順便提下BFC吧。6大規(guī)則：
（1）盒子按照垂直方向一個一個的放置的诵。
（2）盒子的垂直方向的間距是根據margin來決定的（可以解決子盒子的margin帶給了父的問題）万栅，相鄰的盒子margin會發(fā)生重疊。
（3）子盒子會跟父盒子的左邊想接觸西疤。
（4）BFC區(qū)域不會和float box發(fā)生重疊（本布局就是利用了這一點）
（5）作為一個隔離的獨立容器烦粒，容器的子元素不會影響外面的布局。（核心點）
（6）計算寬高時代赁，浮動元素也參與計算扰她。
2.流式布局
作為最普通的布局，將body作為滾動體芭碍，那么在移動端的webview可以利用其自身的滾動效果來達到一個高度適應的效果徒役，最經典的h5布局，目前許多網站都是用的這個布局（微博窖壕、淘寶）
這里放個demo:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
.header{
position: fixed;
height: 44px;
top: 0;
background: red;
left: 0;
right: 0;
text-align: center;
}
.body{
padding: 44px 0;
height:2000px;
}
.footer{
position: fixed;
height: 44px;
bottom: 0;
background: brown;
left: 0;
right: 0;
text-align: center;
}
</style>
</head>
<body>
<div class="header">頭部</div>
<div class="footer">底部</div>
<div class="body">
<div>哦哦哦哦哦哦</div>
<div>哦哦哦哦哦哦</div>
</div>
</body>
</html>
值得注意的是忧勿，很多同學都喜歡在mobile里面杉女，使用-webkit-overflow-scrolling：touch做全局屬性，那么在使用流式布局的時候鸳吸，切記把body和html給去掉熏挎，否則會導致body使用webview自帶的彈性效果（雖然效果一樣），重要的是fixed在滾動到底部的時候會遮住footer晌砾。
3.定位布局坎拐。
定位布局，其實就是利用position去做布局养匈。有時候哼勇，你希望你某個盒子可以根據父元素自動撐開，又不想去計算父元素的高度呕乎，那么可以將父元素設置為relative积担。而子元素設置為absolute，且top,right,left,bottom都為0楣嘁。那么子元素就會完全將父元素遮住磅轻。典型的一個應用就是移動端的一個經典布局珍逸，這里給出demo逐虚。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
.container{
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: hidden;
}
.header{
position: absolute;
height: 44px;
top: 0;
background: red;
left: 0;
right: 0;
text-align: center;
z-index: 2;
}
.body{
padding: 44px 0;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow-x: hidden;
overflow-y: auto;
background-color: bisque;
z-index: 1;
}
.content{
height: 2000px;
}
.footer{
position: absolute;
height: 44px;
bottom: 0;
background: brown;
left: 0;
right: 0;
text-align: center;
z-index: 2;
}
</style>
</head>
<body>
<div class="container">
<div class="header">頭部</div>
<div class="footer">底部</div>
<div class="body">
<div class="content">哦哦哦哦哦哦</div>
</div>
</div>
</body>
</html>
值得注意的是，這種布局谆膳，在滾動到底部或頭部的時候叭爱，整個webview都會跟著滾動，算是一個不完美的地方漱病，但是喜歡轉場動畫的童鞋們买雾，注意了，這種布局在做轉場動畫堪稱完美Ｑ蠲薄＠齑！
4.flex布局
flex布局是瀏覽器支持性較好的功能最為強大的布局注盈。
（1）首先介紹設置在容器的五大屬性
- flex-direction
設置主軸的方向晃危，一共有flex-direction: row | row-reverse | column | column-reverse; 四個值。 - flex-wrap
是否換行老客，這個也決定這align-items和align-content 誰起作用僚饭。一共三個值 nowrap|wrap|wrap-reverse - justify-content
主軸方向上項目的對齊方式， flex-start|flex-end|space-between|space-around | center 一共五個屬性 - align-items
flex-wrap 為 no-wrap的時候胧砰，起作用的垂直對齊方式的設置
一共五個屬性分別為 flex-start|flex-end|center|stretch|baseline
需要注意的是 stretch和baseline 一個是撐開另一個是基于文字對齊鳍鸵。 - align-content
flex-wrap為 wrap 或者 wrap-reverse 屬性和 align-item的屬性一樣，這里不做贅述尉间。
（2）設置在item的屬性值為：
- order
- flex-grow
- flex-shrink
- flex-basis
- align-self
為了做好的兼容性偿乖，建議搭建工程的童鞋使用autoprefixer击罪，flex兼容性不夠好，但是box兼容性還是比較好的汹想，然而box和flex因為一些策略不同外邓，導致使用一些特殊屬性的時候會出現(xiàn)一些奇怪的問題。
需要注意的是flex 是 flex-grow flex-shrink flex-basis的合寫古掏。默認值是 0 1 auto损话。我們在使用flex-basis的時候，如果只是為了設置寬度槽唾，那么切記使用overflow:hidden給盒子加上丧枪，不然當某個盒子的元素超過basis那么其他盒子就會變形。
5. grid布局
grid的網格布局庞萍，目前還沒有在瀏覽器中推廣拧烦，因此應用還不廣泛。目前有以下屬性钝计。
- grid-template-columns
- grid-template-rows
- grid-template-areas
- grid-column-gap
- grid-row-gap
- grid-gap
- justify-items
- align-items
- justify-content
- align-content
- grid-auto-columns
- grid-auto-rows
- grid-auto-flow
- grid
grid-template-columns 和 grid-template-rows是配合定義網格行列大小及數目的恋博。 值得注意的是grid-area 和 grid-template-areas的配合，前者是定義給item的名字私恬，后者是進行具體分配债沮，增加其靈活。
<html>
<head></head>
<style>
.item-a{
grid-area: header;
background:red;
}
.item-b{
grid-area: main;
background:blue;
}
.item-c{
grid-area: sidebar;
background:gold;
}
.item-d{
grid-area: footer;
background: green;
}
.container{
display:grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas: "header header header header"
"main main . sidebar"
"footer footer footer footer"
}
</style>
<body>
<div class="container">
<div class="item-a">header</div>
<div class="item-b">main</div>
<div class="item-c">sidebar</div>
<div class="item-d">footer</div>
</div>
</body>
</html>
justify-items start | end | center | stretch ; 一旦設置這個值本鸣，area設置的值和 grid-colums-start 和grid-colums-end設置的值可能會失效疫衩。寬度會變成1.
設置了 justify-items:left后的樣式
align-items start | end | center | stretch 垂直方向的。和 justify-items同理荣德。
值得注意的是前面兩種屬性是針對item本身的闷煤，內容本身占據的位置。align-content: start | end | center | stretch | space-around | space-between | space-evenly ;
這個屬性面向的是容器本身涮瞻。下面粘貼所有的情況鲤拿。
center
baseline
end
start
space-around
space-between
space-evenly
space-around和space-evenly的區(qū)別是區(qū)間是否平分。
stretch目前我測試過在chrome和firefox里面并沒有作用署咽。就這樣啦近顷，待會補充常用的布局方式。
