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

• 浮動(dòng)元素的特征有：元素脫離普通流, 塊級(jí)浮動(dòng)元素在一排顯示，內(nèi)聯(lián)元素支持寬高，沒有寬度時(shí)默認(rèn)內(nèi)容撐開寬度，

• 對(duì)父容器的影響：如果父容器的子元素都是浮動(dòng)元素，如果父容器沒有定義高度，那么父容器會(huì)失去高度，在浮動(dòng)元素之外

• 對(duì)其他浮動(dòng)元素的影響：浮動(dòng)元素可以左右移動(dòng)(根據(jù)float屬性值而定)，直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的邊緣

• 對(duì)普通元素的影響：浮動(dòng)元素后面的普通元素的框會(huì)表現(xiàn)的像浮動(dòng)元素不存在一樣

• 對(duì)文字的影響：如果浮動(dòng)的元素后面有一個(gè)文檔流中的元素，那么這個(gè)元素的框會(huì)表現(xiàn)的像浮動(dòng)元素不存在一樣，但是框的文本內(nèi)容會(huì)受到浮動(dòng)元素的影響:文本內(nèi)容會(huì)移動(dòng)以留出浮動(dòng)元素的空間(文檔流中的元素的框無法感知浮動(dòng)元素，但是普通元素內(nèi)部的文本內(nèi)容能感知到浮動(dòng)元素)。

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

• 使用clear屬性來清除浮動(dòng)
• BFC清除浮動(dòng)

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

position屬性是指定位類型，屬性值可以為：static、relative、absolute、fixed、inherit和sticky，sticky是CSS3新發(fā)布的一個(gè)屬性。

• static: 是position的默認(rèn)值，元素處于正常的文檔流中，會(huì)忽略left、top、right、bottom和z-index屬性
• relative: 是指給元素設(shè)置相對(duì)于原本位置的定位，元素并不脫離文檔流，因此元素原本的位置會(huì)被保留，其他的元素位置不會(huì)受到影響
• absolute:
  1. 設(shè)置了absolute的元素如果存在有祖先元素設(shè)置了position屬性不為static 屬性，則這時(shí)元素的定位對(duì)象為此已設(shè)置position屬性的祖先元素
  2. 如果并沒有設(shè)置了position屬性的祖先元素，則此時(shí)相對(duì)于body進(jìn)行定位
• fixed: 它參照的坐標(biāo)系是瀏覽器的窗口，固定定位的元素不隨著頁面滾動(dòng)而移動(dòng)，它會(huì)始終保持在那個(gè)位置
• sticky:在屏幕范圍（viewport）時(shí)該元素的位置并不受到定位影響（設(shè)置top、left等屬性無效），當(dāng)該元素的位置將要移出偏移范圍時(shí)，定位又會(huì)變成fixed，根據(jù)設(shè)置的left、top等屬性成固定位置的效果

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

z-index定義了z方向（與顯示屏垂直的方向，值越大者堆疊顯示在前面）的級(jí)別從而使元素有序堆疊顯示。
ps:該屬性值只對(duì)已定位的元素有效。

• 堆疊順序
• 不對(duì)元素設(shè)position時(shí)，文檔流后面的元素覆蓋前面的元素。
• 將元素設(shè)置的position設(shè)置為relative ，absolute 或者 fixed，元素會(huì)覆蓋沒有設(shè)置 position 屬性或者屬性值為 static 的元素。
• 一般情況下z-index值越大者在前面。
• 子元素繼承元素的堆疊關(guān)系，不論子元素的z-index值比父元素的兄弟元素大或者小，都繼承父元素與其兄弟元素的堆疊關(guān)系。

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

position:relative不論偏移到何處只是占據(jù)原來的位置，而margin比較霸道——偏移的位置都要被自己占據(jù)。

BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明

• BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干
• 生成BFC：浮動(dòng)、絕對(duì)定位的元素(absolute、fixed定位)、塊容器(display屬性為inline-block、table、table-cell、table、table-caption)、帶有overflow屬性(該屬性值不為visible和inherit)的display為block的塊級(jí)元素會(huì)在其內(nèi)部建立新的塊級(jí)格式化上下文
• BFC作用：元素們處于同一個(gè)塊級(jí)格式化上下文時(shí)，會(huì)遵守相同的規(guī)則/格式(例如父子元素的margin會(huì)重疊，同一個(gè)BFC內(nèi)的子元素上下margin會(huì)重疊)，但是處于不同的塊級(jí)格式化上下文時(shí)，元素的排列展示遵守的規(guī)則/格式是不同的(處于不同的BFC的父子元素的margin不會(huì)重疊--->父級(jí)元素處于一個(gè)BFC中，父級(jí)元素內(nèi)部新建一個(gè)BFC)。

• 示例：

  
  
  

  BFC清理浮動(dòng)

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

• 塊的頂部外邊距和底部外邊距有時(shí)被組合(折疊)為單個(gè)外邊距，其大小是組合到其中的最大外邊距，這種行為稱為外邊距合并

• 毗鄰的兩個(gè)兄弟元素之間的外邊距合并

• 例：

  
  
  

  相鄰兩元素外邊距合并

• 塊級(jí)父元素與其第一個(gè)/最后一個(gè)子元素

• 例：

  
  
  

  相鄰父元素與子元素的外邊距合并

• 負(fù)邊距合并（兩個(gè)元素margin-bottom： 20px；和margin-top： -20px；的合并）

• 例：

  
  
  

  負(fù)邊距合并

代碼作業(yè)1
代碼作業(yè)2
代碼作業(yè)3
代碼作業(yè)4