Day7 BFC
BFC：block formatting context 塊格式化上下文
怎么理解bfc，從定義上不好理解伶唯，我們需要知道的是bfc的功能特性，具備哪些特性就是bfc
1.inline-block
2.浮動(dòng)
3.display：flow-root （唯一功能就是觸發(fā)bfc）
4.絕對定位
5.overflow值不為visible
bfc可以做到：
爸爸管拙屙铩（包兹樾摇）兒子
如果爸爸滿足構(gòu)成一個(gè)BFC，且兒子同樣也構(gòu)成一個(gè)BFC钧椰，那么爸爸不一定能將孫子包住粹断，因?yàn)閮鹤釉趲O子，那么爸爸就不管孫子了
代碼解釋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC</title>
<style>
.dad{
border:10px solid red;
min-height: 10px;
display: flow-root;/*觸發(fā)BFC*/
}
.son{
background: green;
height: 100px;
float: left;
width: 300px;
margin-top: 100px;
}
.grandson{
height: 50px;
width: 200px;
background: blue;
margin-top: 200px;
}
</style>
</head>
<body>
<div class="dad">
<div class="son">
<div class="grandson">
</div>
</div>
</div>
</body>
</html>
文檔流影響元素的排列順序（文檔流：內(nèi)聯(lián)元素從左到右排列嫡霞，塊級元素從上到下排列）
bfc影響元素的寬高
一個(gè)想法：
可不可以將.ico圖標(biāo)換成用戶自定義的頭像瓶埋，試用于登錄之后點(diǎn)開個(gè)人面板，然后頂部.ico圖標(biāo)就是自己的頭像，很親切
注意：網(wǎng)頁的默認(rèn)font-size是16px
一個(gè)em和它自己font-size在值上是相等的
一個(gè)rem和根元素的font-size在值上是相等的
做響應(yīng)式首先要給我四個(gè)圖我才做
手機(jī)端养筒，ipad曾撤，電腦窄屏，電腦寬屏
