CSS是前端基礎(chǔ)技能之一，而CSS最重要的功能就是網(wǎng)站布局熄驼。
CSS布局方式有很多像寒，從遠(yuǎn)古時代的table（表格）布局-->float（浮動）布局-->position（定位）布局-->flex（彈性）布局-->grid（網(wǎng)格）布局（還未正式推出），下面咱們簡單談一談各種布局的用法及其優(yōu)缺點(diǎn)瓜贾。
table布局就是將網(wǎng)站當(dāng)做一個表單來做诺祸，這里不做展開，因?yàn)楝F(xiàn)在基本不這么用了祭芦。
1.float
float：浮動筷笨。float剛開始并不是為了用來網(wǎng)頁布局，而是用來解決圖文信息中圖片與文本沖突的問題的龟劲。
如下圖：
這種常見的圖文效果胃夏，沒有float之前是很難達(dá)到的。有了float之后只需要加一個float：left昌跌，輕松搞定仰禀。
<style>
.content{
margin: 100px auto;
width: 300px;
}
.box{
float: left;
}
</style>
<body>
<div class="content">
<div class="box"><img src="./imgs/authority-employee.png" alt=""></div>
<div class="text">CSS（層疊樣式表）是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁蚕愤，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化答恶。有三種方法可以在站點(diǎn)網(wǎng)頁上使用樣式表：外部樣式表、內(nèi)部樣式表和內(nèi)聯(lián)樣式萍诱。</div>
</div>
</body>
‘咦亥宿，如果float可以處理圖文的問題，那用來布局不也可以嗎砂沛？’烫扼，后來有人用float試著用于網(wǎng)頁布局，還真的可以碍庵。
網(wǎng)頁中最常見的布局如下：
用float做
<style>
body,ul,li{
padding: 0;
margin: 0;
list-style: none;
}
.header{
height: 100px;
background-color: hotpink;
}
.nav{
height: 100px;
line-height: 100px;
text-align: center;
}
.nav li{
float: left;
width: 100px;
height: 100px;
margin-left: 20px;
background-color: yellowgreen;
}
.main{
width: 1000px;
height: 500px;
margin: 0 auto;
}
.article{
width: 800px;
height: 500px;
background-color:yellow;
float: left;
}
.aside{
width: 200px;
height: 500px;
background-color:skyblue;
float: left;
}
.footer{
height: 100px;
background-color: greenyellow;
}
</style>
<body>
<!--頭部start-->
<div class="header">
<!--導(dǎo)航start-->
<ul class="nav">
<li><a href="#">導(dǎo)航1</a></li>
<li><a href="#">導(dǎo)航2</a></li>
<li><a href="#">導(dǎo)航3</a></li>
</ul>
<!--導(dǎo)航end-->
</div>
<!--頭部end-->
<!--主體start-->
<div class="main">
<!--文章start-->
<div class="article"></div>
<!--文章end-->
<!--側(cè)邊欄start-->
<div class="aside"></div>
<!--側(cè)邊欄end-->
</div>
<!--主體end-->
<!--底部start-->
<div class="footer"></div>
<!--底部end-->
</body>
比table布局要方便不少映企，不過float隨之而來的帶來了 “浮動高度塌陷”的問題：
如果浮動元素的父元素沒有設(shè)定高度，當(dāng)其子元素浮動后静浴，父元素就因?yàn)閮?nèi)部沒有子元素?fù)纹饛亩叨茸優(yōu)?堰氓；
引申：網(wǎng)頁元素一般分為 普通流，浮動流苹享，定位流双絮。其中普通流和浮動流在一個層級上浴麻，定位流>浮動流>普通流。
之后為了解決這個問題搞出來一系列清除“浮動高度塌陷”的策略方法囤攀，非常麻煩软免。
2.position
position：定位；顧名思義焚挠，就是確定位置膏萧。position同樣可以用做網(wǎng)頁布局。
<style>
body,ul,li{
padding: 0;
margin: 0;
list-style: none;
}
.header{
height: 100px;
background-color: hotpink;
}
.nav{
height: 100px;
line-height: 100px;
text-align: center;
/*父元素用相對定位*/
position: relative;
}
.nav li{
/*子元素用絕對定位*/
position: absolute;
width: 100px;
height: 100px;
background-color: yellowgreen;
}
.nav li:nth-child(1){
left: 20px;
}
.nav li:nth-child(2){
left: 140px;
}
.nav li:nth-child(3){
left: 260px;
}
.main{
width: 1000px;
height: 500px;
margin: 0 auto;
position: relative;
}
.article{
width: 800px;
height: 500px;
background-color:yellow;
}
.aside{
width: 200px;
height: 500px;
background-color:skyblue;
position: absolute;
top: 0;
right: 0;
}
.footer{
height: 100px;
background-color: greenyellow;
}
</style>
<body>
<!--頭部start-->
<div class="header">
<!--導(dǎo)航start-->
<ul class="nav">
<li><a href="#">導(dǎo)航1</a></li>
<li><a href="#">導(dǎo)航2</a></li>
<li><a href="#">導(dǎo)航3</a></li>
</ul>
<!--導(dǎo)航end-->
</div>
<!--頭部end-->
<!--主體start-->
<div class="main">
<!--文章start-->
<div class="article"></div>
<!--文章end-->
<!--側(cè)邊欄start-->
<div class="aside"></div>
<!--側(cè)邊欄end-->
</div>
<!--主體end-->
<!--底部start-->
<div class="footer"></div>
<!--底部end-->
</body>
同樣的效果
不過position需要計(jì)算每一個元素的位置蝌衔，而且這個位置是定死的榛泛，略顯繁瑣和笨重。實(shí)際上position我平常只用來定位一些小的標(biāo)簽之類的東西噩斟。position優(yōu)點(diǎn)在于不像float那樣會影響其他元素曹锨。
關(guān)鍵點(diǎn)：子絕父相。需要定位的元素用absolute絕對定位剃允，其父元素用 relative相對定位沛简。還有fixed固定定位，他是以html為父元素的定位硅急。
3.flex（推薦）
flex：彈性覆享；彈性布局很好的解決了float和position的問題佳遂，非常好用营袜。
使用方法：
在父元素使用 display:flex;確定彈性作用的范圍。
然后
justify-content：center（space-around丑罪，space-between等）荚板；水平方向布局；
align-items:center(flex-start,flex-end等);垂直方向布局吩屹；
<style>
body,ul,li{
padding: 0;
margin: 0;
list-style: none;
}
.header{
height: 100px;
background-color: hotpink;
}
.nav{
height: 100px;
line-height: 100px;
text-align: center;
display: flex;
}
.nav li{
/*子元素用絕對定位*/
width: 100px;
height: 100px;
margin-left: 20px;
background-color: yellowgreen;
}
.main{
width: 1000px;
height: 500px;
margin: 0 auto;
display: flex;
}
.article{
width: 800px;
height: 500px;
background-color:yellow;
}
.aside{
width: 200px;
height: 500px;
background-color:skyblue;
}
.footer{
height: 100px;
background-color: greenyellow;
}
</style>
<body>
<!--頭部start-->
<div class="header">
<!--導(dǎo)航start-->
<ul class="nav">
<li><a href="#">導(dǎo)航1</a></li>
<li><a href="#">導(dǎo)航2</a></li>
<li><a href="#">導(dǎo)航3</a></li>
</ul>
<!--導(dǎo)航end-->
</div>
<!--頭部end-->
<!--主體start-->
<div class="main">
<!--文章start-->
<div class="article"></div>
<!--文章end-->
<!--側(cè)邊欄start-->
<div class="aside"></div>
<!--側(cè)邊欄end-->
</div>
<!--主體end-->
<!--底部start-->
<div class="footer"></div>
<!--底部end-->
</body>
不過flex不兼容IE8及以下的瀏覽器跪另。
4.grid（未正式推出）
大部分情況下flex布局已經(jīng)能滿足需要，不過flex只能用作一維布局煤搜，也就是說免绿，flex一次只能作用于一條線。如果想要進(jìn)行二維布局擦盾，必須翻轉(zhuǎn)坐標(biāo)二次彈性嘲驾，這樣會顯得不夠優(yōu)雅，這時候grid（網(wǎng)格）布局就發(fā)展起來了迹卢。
grid布局用法和flex相似辽故，但是作用于二維布局。
先在父元素使用 display:grid;確定網(wǎng)格作用范圍腐碱；
然后
grid-template-columns: 40px 50px auto 50px 40px;（行）
grid-template-rows: 25% 100px auto;（列）
等等屬性誊垢，這里只簡單介紹，大家了解有這個東西就行。
在現(xiàn)實(shí)工作用喂走，以flex為主殃饿，position輔助已經(jīng)足夠應(yīng)對所有問題。
