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

• 浮動(dòng)模型也是一種可視化模型，浮動(dòng)的框可以左右移動(dòng)（根據(jù)float的屬性值而定），直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣，浮動(dòng)元素不在文檔的普通流中，文檔的普通流中的元素表現(xiàn)得就像浮動(dòng)元素不存在一樣；

• 對(duì)父容器的影響：當(dāng)父容器里的子元素加了浮動(dòng)以后，父元素就感知不到該子元素的存在，父容器的高度就會(huì)塌陷；

  
  
  eb50562be51ae255aac0ffbce0799bd.png

• 對(duì)其他浮動(dòng)元素的影響:當(dāng)浮動(dòng)元素碰到另一個(gè)浮動(dòng)的元素的邊框，該浮動(dòng)元素就會(huì)停止移動(dòng)。

  
  
  8b31004a140cff930d0e4fabe1cc367.png

• 對(duì)普通元素的影響：當(dāng)浮動(dòng)元素遇到普通流元素，普通流元素表現(xiàn)得就像浮動(dòng)元素不存在一樣；

  
  
  d467c70c360f69b9f2c0c69bb8b2847.png

• 對(duì)文本的影響：文本會(huì)感知到浮動(dòng)元素的存在，會(huì)移開(kāi)給浮動(dòng)元素留出空間；

  
  
  bfe0628d4c485b33dacefc3885d3038.png

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

• 清理浮動(dòng)是指解決父容器高度塌陷的問(wèn)題
  -如何清理浮動(dòng)：1.使父容器形成BFC；
  2.clear:(left/right/both)屬性;
  3.在父容器最后加上一個(gè)空的div;

• clear屬性的例子：

  
  
  17923314e835a0bf743fd36a9eca55b.png

• 父元素設(shè)置BFC例子

  
  
  7f4b366d45fd6a372b2c34b93746887.png

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

• 相對(duì)定位：position:relative;相對(duì)元素本身位置進(jìn)行定位； 參考點(diǎn)：元素本身位置 使用場(chǎng)景：當(dāng)頁(yè)面上的icon沒(méi)有按照需求對(duì)其時(shí)，就可以設(shè)置一個(gè)position:relative;
• 絕對(duì)定位：position:absolute;相對(duì)于static定位以外的第一個(gè)祖先定位進(jìn)行定位 參考點(diǎn)：絕對(duì)定位的元素是相對(duì)于距離最近的非static祖先元素決定的，如果沒(méi)有已經(jīng)定位的祖先元素，那么它的位置就相對(duì)于初始包含塊html來(lái)決定 使用場(chǎng)景：首先檢查父容器里面有沒(méi)有定位元素，如果父元素里沒(méi)有定位元素，則向父元素的父元素找查找定位元素，若還沒(méi)有定位元素，則一直找到html的根節(jié)點(diǎn)，以父元素或html的跟節(jié)點(diǎn)位置進(jìn)行偏移。
• 固定定位：position:fixed;在一個(gè)頁(yè)面中，無(wú)論如何滾動(dòng)頁(yè)面，該頁(yè)面的某個(gè)標(biāo)題按鈕一直保持不動(dòng)； 參考點(diǎn)：相對(duì)于瀏覽器窗口進(jìn)行定位；

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

• 通常情況下，HTML頁(yè)面被認(rèn)為是二維的，因?yàn)槲谋?、圖像和其他元素排列在頁(yè)面上而不重疊。在這種情況下，只有一個(gè)渲染進(jìn)程，所以元素都知道其他元素所占用空間，Z-index屬性可讓你在渲染內(nèi)容時(shí)調(diào)整對(duì)象分層的順序；
• 在CSS2.1中，所以的盒模型元素都處于三維坐標(biāo)系中，除了我們常用的橫坐標(biāo)和縱坐標(biāo)，盒模型還可以沿著"Z軸"層疊擺放，當(dāng)他們相互覆蓋時(shí)，Z軸的順序就十分重要了。這意味著CSS允許你在現(xiàn)有的渲染引擎上層疊的擺放盒模型元素，所以的層都可以用一個(gè)整數(shù)（Z軸順序）來(lái)表明當(dāng)前在Z軸的位置。數(shù)字越大，元素越靠近觀察者，Z軸順序由Z-index屬性來(lái)指定。
• Z-index值較大的元素將層疊在Z-index值較小的元素之上。

Z-index只對(duì)定位元素有效（position:absolute/relative/fixed）的對(duì)象，用來(lái)確定定位元素在垂直于顯示屏方向（稱(chēng)為Z軸）上的層疊順序，也就是說(shuō)如果不是定位元素，對(duì)其設(shè)置Z-index是無(wú)效的。

• 2d47b4d3dc79722779a8f93458d651e.png
• aa9f74b8599ae5f811d817a7cfe15cf.png

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

• position:relative;對(duì)于文檔中的普通流來(lái)說(shuō)是不存在的；
• 負(fù)margin;對(duì)于文檔的普通流來(lái)說(shuō)，負(fù)margin是存在的，當(dāng)負(fù)margin讓某位元素移動(dòng)的時(shí)候，挨著該元素的另一位元素也會(huì)跟著一起移動(dòng)的。

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

• BFC：塊級(jí)格式化上下文；
• 如何生成BFC:display:inline-block; display:absolute; display:fixed; display:float; display:table-cell; overflow:hidden; overflow:auto; overflow:scroll;都會(huì)建立一個(gè)新的塊級(jí)格式化上下文；

• BFC會(huì)阻止垂直外邊距(margin-top/margin-bottom)折疊；按照BFC的定義，只有同屬于一個(gè)BFC時(shí)，兩個(gè)元素才有可能發(fā)生BFC的重疊，這個(gè)包括相鄰元素，嵌套元素，只要它們之間沒(méi)有阻擋（例如邊框，非空元素，padding等）就會(huì)發(fā)生margin的重疊，對(duì)于嵌套元素，只要把父容器設(shè)置為BFC,就可以阻止外邊距合并了；對(duì)于相鄰元素，只要把其中一個(gè)元素設(shè)置為BFC，就可以阻止外邊距合并。
  

  阻止相鄰元素合并：
  30dd82fa67b2730e78edfcb3c126a5d.png
  
  
  8e450d374099b98c0d325f00612646a.png
  
  
  阻止嵌套元素合并：
  2f889ad60664871f9af7ebbe8d838d9.png
  
  
  078a03a6294cb8982af62b0fce96ccd.png
  
  BFC可以包含浮動(dòng)元素：
  dbf82b0f27110e9f03eca0db51375c4.png
  
  BFC不會(huì)重疊浮動(dòng)元素：
  
  9afbfdc0c77d33cd742d27df343e426.png
  
  
  18e76e881b9c5eb70c8ea912a05cc98.png

7.

在什么情況下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
同屬一個(gè)BFC的情況下會(huì)出現(xiàn)外邊距合并,若是相鄰的元素，則把其中一個(gè)元素設(shè)置為BFC;
若是嵌套元素，則需要把其父元素設(shè)置為BFC,就可以阻擋外邊距合并。

4364704839e6469d5bd7097d94e45f8.png

c345d4ccda6f388fe37f9534c886feb.png

3a2a76c2052a82b4f2e3bcfbbf1a10e.png

1.實(shí)現(xiàn)如下alert效果,效果范例

• 作業(yè)

2. 實(shí)現(xiàn)如下表單效果,效果范例

• 作業(yè)
  3.實(shí)現(xiàn)如下模態(tài)框效果效果范例
• 作業(yè)
  4.實(shí)現(xiàn)如下導(dǎo)航欄效果效果范例
• 作業(yè)