1、常見的水平垂直居中實現方案
最簡單的方案是flex布局
.container{display: flex;align-items: center;justify-content: center;
}
絕對定位配合margin:auto(一定要給.son寬高)
.father {position: relative;height: 300px;
}
.son {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width: 50px;height: 50px;
}
絕對定位配合transform實現
.father {position: relative;
}
.son {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}2、行內元素，塊級元素，空(void)元素(即沒有內容的HTML元素)
塊級元素: div、ul、li、dl、dt、dd、p、h1-h6、blockquote
行內元素: a、b、span、img、input、strong、select、label、em、button、textarea
空元素: br、meta、hr、link、input、img
3、BFC元素
我們在頁面布局的時候，經常出現以下情況：
- 這個元素高度怎么沒了？
- 這兩欄布局怎么沒法自適應？
- 這兩個元素的間距怎么有點奇怪的樣子？
- ......
BFC（Block Formatting Context）
即塊級格式化上下文，它是頁面中的一塊渲染區域，并且有一套屬于自己的渲染規則：
- 內部的盒子會在垂直方向上一個接一個的放置
- 對于同一個BFC的倆個相鄰的盒子的margin會發生重疊，與方向無關。
- 每個元素的左外邊距與包含塊的左邊界相接觸（從左到右），即使浮動元素也是如此
- BFC的區域不會與float的元素區域重疊
- 計算BFC的高度時，浮動子元素也參與計算
- BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然
如何生成一個BFC元素呢
- 根元素，即HTML元素
- 浮動元素：float值為left、right
- overflow值不為 visible，為 auto、scroll、hidden(常用)
- display的值為inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
- position的值為absolute或fixed
常用于以下3個場景
- 防止margin重疊(塌陷)
- 自適應多欄布局
- 清除內部浮動
防止margin重疊（塌陷）
正常情況下，如果沒有.container容器那么兩p間隔是100px，這就是margin重疊了，解決方案就是給其中一個p套上一個BFC(div加上overflow: hidden;)，那么兩p間隔是200px了
<style>.container {overflow: hidden;// 新的BFC}p {color: #f55;background: #fcc;width: 200px;line-height: 100px;text-align:center;margin: 100px;}
</style>
<body><p>Haha</p ><div class="container"><p>Hehe</p ></div>
</body>
清除內部浮動
正常情況下，由于浮動元素的存在.par是不會有高度的，可以給他加上overflow: hidden;變為BFC，就會計算浮動元素的高度了
<style>.par {border: 5px solid #fcc;width: 300px;overflow: hidden;}.child {border: 5px solid #f66;width:100px;height: 100px;float: left;}
</style>
<body><div class="par"><div class="child"></div><div class="child"></div></div>
</body>
自適應多欄布局
正常情況下.aside會浮動并且壓在.main上，可以根據BFC的區域不會與浮動盒子重疊的特性，把.main變為BFC，這樣.main就實現了寬帶自適應了，并且實現左右兩欄布局了。
<style>body {width: 300px;position: relative;}.aside {width: 100px;height: 150px;float: left;background: #f66;}.main {height: 200px;background: #fcc;overflow: hidden;}
</style>
<body><div class="aside"></div><div class="main"></div>
</body>
