1、table方式布局
效果圖：
直接用table等標簽布局,table布局自動垂直居中
亦可用 display:table == <table>、display:table-cell == <td>等css屬性代替table標簽的效果
代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<style>
.main{
width:200px;
height:100px;
}
.left{
background-color:lightsalmon;
}
.right{
background-color:lightskyblue;
}
</style>
<body>
<table class="main">
<tbody>
<tr>
<td class="left">1</td>
<td class="right">2</td>
</tr>
</tbody>
</table>
</body>
</html>
2、經典的盒子模型
百度百科的經典圖：
通過控制div等盒子的margin(外邊距)，padding(內填充)，border(邊框)，width(寬)，height(長)等數據構造合適的布局
3、flex布局
推薦阮一峰老師的flex教程
彈性盒子，顧名思義寬和高是有彈性的，會自適應（不設置寬高會自動填充）
效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<style>
.main{
display:flex;
width:300px;
height:100px;
/* 排列方向 flex-direction
row：從左到右 row-reverse:從右到左
column:從上到下 column-reverse:從下到上
*/
flex-direction: row;
/* 換行 flex-wrap
nowrap:(默認) 不換行
wrap: 換行 第一行在上
wrap-reverse: 換行 第一行在下
*/
flex-wrap: nowrap;
/* flex-flow 是 flex-direction 和 flex-wrap 的簡寫
模板為 flex-flow: <flex-direction> || <flex-wrap>
*/
/* 主軸上的對齊方式 justify-content
flex-start:(默認)左對齊
flex-end:右對齊
center:居中
space-between:兩端對齊，項目之間間隔相等
space-around:每個項目之間兩側的間隔都相等
*/
justify-content: space-between;
/* 交叉軸上對齊 align-items
flex-start:交叉軸起點對齊
flex-end:交叉軸終點對齊
center:交叉軸中點對齊
baseline:項目的第一行文字對齊
stretch:(默認)如果項目未設置高度或auto，將占滿整個容器的高度
*/
align-items:center;
/* align-content 定義多根軸線的對齊方式 */
}
.left{
width:50px;
background-color:lightsalmon;
}
.contain{
width:50px;
background-color:lightskyblue;
}
.right{
width:50px;
background-color:lightgreen;
}
</style>
<body>
<div class="main">
<div class="left">1</div>
<div class="contain">2</div>
<div class="right">3</div>
</div>
</body>
</html>
除了盒子整體的屬性外，可以給盒子里的每個項目設置具體的屬性
- order: integer || 0，數值越小，排列越靠前，默認為0
- flex-grow: number || 0，定義項目的放大比例，默認為0
- flex-shrink:number || 1，定義項目中的縮小比例，默認為1
- flex-basis: length || auto，定義了在分配多余空間之前，項目占據的主軸空間（main size）
- flex： flex-grow flex-shrink ? || flex-basis //定義三個屬性的簡寫
- align-self 設置單個項目與其他項目不一樣的對齊方式，默認繼承父元素的繼承方式