1.浮動元素有什么特征季率？對父容器乾巧、其他浮動元素、普通元素涧郊、文字分別有什么影響?
- 浮動模型也是一種可視化模型贯被，浮動的框可以左右移動（根據(jù)float的屬性值而定），直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣妆艘，浮動元素不在文檔的普通流中彤灶，文檔的普通流中的元素表現(xiàn)得就像浮動元素不存在一樣；
-
對父容器的影響：當(dāng)父容器里的子元素加了浮動以后批旺，父元素就感知不到該子元素的存在幌陕，父容器的高度就會塌陷；
eb50562be51ae255aac0ffbce0799bd.png -
對其他浮動元素的影響:當(dāng)浮動元素碰到另一個浮動的元素的邊框汽煮，該浮動元素就會停止移動搏熄。
8b31004a140cff930d0e4fabe1cc367.png -
對普通元素的影響：當(dāng)浮動元素遇到普通流元素，普通流元素表現(xiàn)得就像浮動元素不存在一樣逗物；
d467c70c360f69b9f2c0c69bb8b2847.png -
對文本的影響：文本會感知到浮動元素的存在搬卒，會移開給浮動元素留出空間；
bfe0628d4c485b33dacefc3885d3038.png
2.清除浮動指什么? 如何清除浮動? 兩種以上方法
- 清理浮動是指解決父容器高度塌陷的問題
-如何清理浮動：1.使父容器形成BFC翎卓；
2.clear:(left/right/both)屬性;
3.在父容器最后加上一個空的div; -
clear屬性的例子：
17923314e835a0bf743fd36a9eca55b.png -
父元素設(shè)置BFC例子
7f4b366d45fd6a372b2c34b93746887.png
3.有幾種定位方式契邀，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么失暴，使用場景是什么坯门？
- 相對定位：position:relative;相對元素本身位置進(jìn)行定位； 參考點(diǎn)：元素本身位置 使用場景：當(dāng)頁面上的icon沒有按照需求對其時逗扒，就可以設(shè)置一個position:relative;
- 絕對定位：position:absolute;相對于static定位以外的第一個祖先定位進(jìn)行定位 參考點(diǎn)：絕對定位的元素是相對于距離最近的非static祖先元素決定的古戴，如果沒有已經(jīng)定位的祖先元素，那么它的位置就相對于初始包含塊html來決定 使用場景：首先檢查父容器里面有沒有定位元素矩肩，如果父元素里沒有定位元素现恼，則向父元素的父元素找查找定位元素，若還沒有定位元素黍檩，則一直找到html的根節(jié)點(diǎn)叉袍，以父元素或html的跟節(jié)點(diǎn)位置進(jìn)行偏移。
- 固定定位：position:fixed;在一個頁面中刽酱，無論如何滾動頁面喳逛，該頁面的某個標(biāo)題按鈕一直保持不動； 參考點(diǎn)：相對于瀏覽器窗口進(jìn)行定位棵里；
4.z-index 有什么作用? 如何使用?
- 通常情況下润文，HTML頁面被認(rèn)為是二維的姐呐，因?yàn)槲谋尽D像和其他元素排列在頁面上而不重疊典蝌。在這種情況下曙砂，只有一個渲染進(jìn)程，所以元素都知道其他元素所占用空間骏掀，
Z-index屬性可讓你在渲染內(nèi)容時調(diào)整對象分層的順序麦轰； - 在CSS2.1中，所以的盒模型元素都處于三維坐標(biāo)系中砖织，除了我們常用的橫坐標(biāo)和縱坐標(biāo)，盒模型還可以沿著"Z軸"層疊擺放末荐，當(dāng)他們相互覆蓋時侧纯，Z軸的順序就十分重要了。這意味著CSS允許你在現(xiàn)有的渲染引擎上層疊的擺放盒模型元素甲脏，所以的層都可以用一個整數(shù)（Z軸順序）來表明當(dāng)前在Z軸的位置眶熬。數(shù)字越大，元素越靠近觀察者块请，Z軸順序由
Z-index屬性來指定娜氏。 -
Z-index值較大的元素將層疊在Z-index值較小的元素之上。
Z-index只對定位元素有效（position:absolute/relative/fixed）的對象墩新，用來確定定位元素在垂直于顯示屏方向（稱為Z軸）上的層疊順序贸弥，也就是說如果不是定位元素，對其設(shè)置Z-index是無效的海渊。
- 2d47b4d3dc79722779a8f93458d651e.png
- aa9f74b8599ae5f811d817a7cfe15cf.png
5.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- position:relative;對于文檔中的普通流來說是不存在的绵疲；
- 負(fù)margin;對于文檔的普通流來說，負(fù)margin是存在的臣疑，當(dāng)負(fù)margin讓某位元素移動的時候盔憨，挨著該元素的另一位元素也會跟著一起移動的。
6.BFC 是什么讯沈？如何生成 BFC郁岩？BFC 有什么作用？舉例說明
- BFC：塊級格式化上下文缺狠；
- 如何生成BFC:
display:inline-block;display:absolute;display:fixed;display:float;display:table-cell;overflow:hidden;overflow:auto;overflow:scroll;都會建立一個新的塊級格式化上下文问慎； -
BFC會阻止垂直外邊距(margin-top/margin-bottom)折疊；按照BFC的定義儒老，只有同屬于一個BFC時蝴乔，兩個元素才有可能發(fā)生BFC的重疊，這個包括相鄰元素驮樊，嵌套元素薇正，只要它們之間沒有阻擋（例如邊框片酝，非空元素，padding等）就會發(fā)生margin的重疊挖腰，對于嵌套元素雕沿，只要把父容器設(shè)置為BFC,就可以阻止外邊距合并了；對于相鄰元素猴仑，只要把其中一個元素設(shè)置為BFC审轮，就可以阻止外邊距合并。
阻止相鄰元素合并：
30dd82fa67b2730e78edfcb3c126a5d.png
8e450d374099b98c0d325f00612646a.png
阻止嵌套元素合并：2f889ad60664871f9af7ebbe8d838d9.png
078a03a6294cb8982af62b0fce96ccd.png
BFC可以包含浮動元素：dbf82b0f27110e9f03eca0db51375c4.png
BFC不會重疊浮動元素：
9afbfdc0c77d33cd742d27df343e426.png
18e76e881b9c5eb70c8ea912a05cc98.png
7.
在什么情況下會出現(xiàn)外邊距合并辽俗？如何合并疾渣？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
同屬一個BFC的情況下會出現(xiàn)外邊距合并,若是相鄰的元素崖飘，則把其中一個元素設(shè)置為BFC;
若是嵌套元素榴捡，則需要把其父元素設(shè)置為BFC,就可以阻擋外邊距合并。
4364704839e6469d5bd7097d94e45f8.png
c345d4ccda6f388fe37f9534c886feb.png
3a2a76c2052a82b4f2e3bcfbbf1a10e.png
1.實(shí)現(xiàn)如下alert效果,效果范例
- 實(shí)現(xiàn)如下表單效果,效果范例
