布局分類
- 固定寬，一般為960 / 1000 / 1024 px
- 不固定寬，靠文檔流的原理布局
- 響應(yīng)式布局过椎，PC上固定寬度，手機(jī)上不固定寬度
三種布局思路
1戏仓，float
元素浮動(dòng)之后疚宇，它會(huì)被移出正常的文檔流亡鼠，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框敷待，或者碰到另外一個(gè)浮動(dòng)的元素间涵。
- 兼容IE9，不響應(yīng)式不給手機(jī)看
如果父元素里只有浮動(dòng)元素榜揖，那它的高度會(huì)是0勾哩！想要它自適應(yīng)即包含所有浮動(dòng)元素，需要清除它的子元素举哟。
一種方法叫做clearfix思劳，即clear一個(gè)不浮動(dòng)的 [::after]，CSS偽元素::after用來創(chuàng)建一個(gè)偽元素炎滞，作為已選中元素的最后一個(gè)子元素敢艰。通常會(huì)配合content屬性來為該元素添加裝飾內(nèi)容诬乞。這個(gè)虛擬元素默認(rèn)是行內(nèi)元素册赛，偽元素。
給父元素加clearfix見下方：
container::after {
content: "";
display: block;
clear: both;
}
2震嫉，flex
flex 規(guī)定了彈性元素如何伸長(zhǎng)或縮短以適應(yīng)flex容器中的可用空間森瘪，必要時(shí)用負(fù)margin。
.container{
display:flex; /*or inline-flex*/
}
改變items流動(dòng)方向
flex-direction:
row //行正排列票堵，從左到右
row-reverse //行-逆排列扼睬，右到左
column //列-正排列
column-reverse //列-逆排列
改變折行
flex-warp:
nowrap，不折行
wra悴势，折行
wrap-reverse 窗宇，反折行
改變主軸對(duì)齊方式
justify-content:
flex-start
flex-end
center
space-between
space-around
space-evenly
改變次軸對(duì)齊方式
align-items:
flex-start
flex-start
flex-end
center
stretch
baseline
多行內(nèi)容
align-content:
flex-start
flex-end
center
stretch
space-between
space-around
3，grid
CSS Grid 網(wǎng)格布局教程 - 阮一峰的網(wǎng)絡(luò)日志
網(wǎng)格布局（Grid）是最強(qiáng)大的 CSS 布局方案特纤。
它將網(wǎng)頁劃分成一個(gè)個(gè)網(wǎng)格军俊，可以任意組合不同的網(wǎng)格，做出各種各樣的布局捧存。
以前粪躬，只能通過復(fù)雜的CSS框架達(dá)到的效果，現(xiàn)在瀏覽器內(nèi)置了昔穴。但目前只兼容最新的瀏覽器
