Question1：浮動(dòng)元素有什么特征？對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響?

• 先了解什么是文檔流： 文檔是html元素在頁(yè)面中排列布局的方式，塊狀元素自上到下排列，行內(nèi)元素由左到右排列。
• 浮動(dòng)（float）： 可以讓元素脫離文檔流，瀏覽器渲染時(shí)感知不到它的存在，就好像浮在上面的感覺(jué)！浮動(dòng)的值有：float： top | right | bottom | left; 對(duì)一個(gè)元素進(jìn)行的float設(shè)置，可以對(duì)其上、右、下、左設(shè)置。
• 浮動(dòng)的定義（w3c）: 浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂Ｓ捎诟?dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。
• 影響：
  -父容器：父容器框就是浮動(dòng)元素的包含框就是浮動(dòng)框碰到它就會(huì)停止。

Paste_Image.png

對(duì)父元素的所有子元素進(jìn)行了浮動(dòng)，其內(nèi)容會(huì)塌陷(如下圖所示)

Paste_Image.png

Question2：清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法

浮動(dòng)的特性，導(dǎo)致本屬于普通流中的元素浮動(dòng)之后，包含框內(nèi)部由于不存在其他普通流元素了，也就表現(xiàn)出高度為0（高度塌陷）。在實(shí)際布局中，往往這并不是我們所希望的，所以需要閉合浮動(dòng)元素，使其包含框表現(xiàn)出正常的高度。
-方法：
1.添加空標(biāo)簽
2.父元素設(shè)置overflow：hidden；

Question3：有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么，使用場(chǎng)景是什么？

• 相對(duì)定位（position：relative；）： 相對(duì)其元素本身進(jìn)行定位，原來(lái)所占據(jù)的文檔流位置不變，緊緊是可視化排列布局發(fā)生了位置便宜；可對(duì)top、right、left、bottom進(jìn)行設(shè)置。
• 絕對(duì)定位（position：absolute；） ：相對(duì)于第一個(gè)非static父元素進(jìn)行絕對(duì)定位；如果一直沒(méi)有找到父元素，則根據(jù)根節(jié)點(diǎn)html元素進(jìn)行定位，對(duì)于設(shè)置絕對(duì)定位的元素脫離了文檔流，可對(duì)top、right、bottom、left進(jìn)行設(shè)置。
• 固定定位（position： fixed；）：相對(duì)窗口（viewport）進(jìn)行定位；脫離文檔流，可對(duì)top、right、bottom、left進(jìn)行設(shè)置。

Question4：z-index 有什么作用? 如何使用?

所有瀏覽器都支持z-index屬性，其設(shè)置的是元素的堆疊順序，擁有更高的堆疊順序的元素處于擁有低順序的前面，可設(shè)置為負(fù)的。

• 只有在定位的情況下才能用：
  position：relative；
  position： absolute；
  position：fixed；

Question5：position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別

position:relative:

Paste_Image.png

負(fù)margin：

Paste_Image.png

Question6：如何讓一個(gè)固定寬高的元素在頁(yè)面上垂直水平居中?

Paste_Image.png

Question7：BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說(shuō)明

• BFC即Block Formatting Context的縮寫(xiě)，中文譯為塊級(jí)格式化上下文。它是一個(gè)獨(dú)立渲染區(qū)域，只有Block-level box參與，它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。

• BFC布局規(guī)則：
  1.內(nèi)部的box會(huì)在垂直方向一個(gè)接一個(gè)地放置。
  2.box垂直方向的距離有margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰box的margin會(huì)發(fā)生重疊。
  3.每個(gè)元素的margin box的左邊，與包含塊border box的左邊相互接觸。即使浮動(dòng)也是一樣。
  4.bfc就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也是如此。
  5.bfc區(qū)域不會(huì)與float box重疊。
  6.bfc就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也是如此。
  7.計(jì)算bfc的高度時(shí)，浮動(dòng)元素也參與計(jì)算。

• 能生成BFC的元素：
  1.根元素 html
  2.float屬性不為none
  3.position為absolute或者fixed
  4.display為inline-block ,table-cell,flex,inlin-flex,(flex是彈性布局的意思)
  5.overflow不為visible

• 作用：
  1.自適應(yīng)兩欄布局
  第一欄設(shè)置了浮動(dòng)，兩欄局域發(fā)生了重疊，要讓第二欄不與浮動(dòng)元素重疊，把它變?yōu)锽FC即可.

  
  
  Paste_Image.png

Paste_Image.png

2.清除內(nèi)部浮動(dòng)，解決父元素高度塌陷問(wèn)題

父元素中兩個(gè)子元素都發(fā)生了浮動(dòng)

讓父元素變成BFC解決高度塌陷問(wèn)題

Question8：在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例

-同在一個(gè)BFC內(nèi)的元素垂直外邊距會(huì)發(fā)生合并；

垂直外邊距合并

-讓其中一個(gè)被一個(gè)BFC塊包裹著獨(dú)立出來(lái)

解決垂直外邊距合并問(wèn)題

Question9：實(shí)現(xiàn)如下效果，每種效果都用一個(gè)標(biāo)簽來(lái)實(shí)現(xiàn)

Question10：實(shí)現(xiàn)如下導(dǎo)航條