1蚣旱、浮動元素有什么特征？對父容器彰触、其他浮動元素梯投、普通元素、文字分別有什么影響渴析？

特征: 浮動模型也是一種可視化格式模型,浮動的框可以左右移動（根據float熟悉性值而定）晚伙，直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣吮龄。浮動元素不在文檔的普通流中俭茧，文檔的普通中的元素表現的就像浮動元素不存在一樣。

• 對父容器的影響: 它不會超出父容器的邊框,可能會使得它的父容器高度塌陷漓帚。
• 對其他浮動元素的影響: 可能會因為某個浮動元素的高度比較高母债，而被卡住。
• 對普通元素的影響: 普通元素會表現的像浮動元素不存在一樣尝抖。
• 對文字的影響: 文字能夠察覺到浮動元素毡们，會圍繞浮動元素。

2昧辽、清除浮動指什么? 如何清除浮動? 兩種以上方法衙熔。

• 清除浮動指解決浮動帶來的一些問題。
• 如何清除浮動?
  • 1搅荞、 利用clear屬性红氯，清除浮動
  • 2框咙、使父容器形成BFC
  • 3、沒有副作用的方案痢甘，在內容最后喇嘱，加上空內容。
    代碼如下:

.clearfix {
    *zoom: 1;
}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

3塞栅、有幾種定位方式者铜，分別是如何實現定位的，參考點是什么放椰，使用場景是什么作烟？

• 一般常用的是3種，即普通流砾医，相對定位和絕對定位
  （1）static 默認值俗壹，在普通流中元素框的位置由元素在HTML中的位置決定。
  （2）relative 生成相對定位的元素藻烤，相對于元素本身正常位置進行定位绷雏，這個元素相對于它自己進行移動，元素在文檔流中占據原來的空間怖亭，只是表現出來位置會改變涎显，使用場景：就是想相對于自身移動下位置。
  （3）absolute 生成絕對定位的元素兴猩，絕對定位的元素的位置是相對于距離最近的非static祖先元素期吓，如果 沒有已定位的祖先元素，那么他的位置就相對于初始包含塊html定位倾芝。使用場景: 就是想相對祖先元素讨勤，移動下位置。

4晨另、z-index 有什么作用? 如何使用?

作用：對于一個已經定位的元素（即position屬性值是非static的元素）,z-index屬性指定元素在當前堆疊上下文中的堆疊層級潭千，z-index較大的元素會覆蓋較小的一個。
舉列說明

<div class="box1">dashed box
     <div class="box2"> yellow box</div>
     <div class="box3"> green box</div>
  </div>
------------------------------------------------------------------------------
.box1 {
  border: 3px dashed black;
  height: 100px;
}
.box2 {
  position: absolute;
  background: yellow;
  z-index: 1;
}
.box3 {
  position: absolute;
  background: green;
  z-index: 2;
}

如圖

z-index12.png

如果我們此時將 .box2 里的z-index和.box3里的z-index顛倒一下借尿，如下圖：

z-index21.png

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

區(qū)別：用相對定位使元素位置發(fā)生偏移路翻，元素占據的仍舊是原來的位置狈癞，只是表現出來的位置會發(fā)生改變。而用負margin,元素占據的不是原來的位置茂契，而是占據的是使用負margin之后的位置蝶桶。

6、BFC 是什么掉冶？如何生成 BFC真竖？BFC 有什么作用儡蔓？舉例說明

• BFC是塊級格式化上下文
• 如何生成BFC：只要給父元素加上一些屬性值
  比如: overflow: auto;
  overflow: hidden;
  display: inline-block;
  position: absolute;
  position: fixed;
  float: left;
  等等
• BFC的作用
  (1)阻止外邊距的合并

<div class="ct">
   <h1>h1</h1>
</div>
----------------------
.ct {
  background: pink;
  margin: 10px;
  overflow: auto;   /*  或者是overflow: hidden; */
}
.ct > h1 {
  background: pink;
  margin: 40px;
}

如圖 給父容器加auto或hidden.png

給父容器加auto或hidden.png

如果沒有生成BFC的話，那么外邊距將向較大的合并疼邀，即40px; 但是生成BFC之后喂江，margin為兩者之和即50px;
（2）BFC不會重疊浮動元素

<div class="ct">
   <div class="aside"></div>
    <div class="content">1、BFC會阻止垂直外邊距折疊
 （1）按照BFC的定義旁振，只有同屬于一個BFC時获询，兩個
元素才有可能發(fā)生垂直Margin的重疊，這個包括
相鄰元素拐袜，嵌套元素吉嚣，只要他們之間沒有阻擋（邊框，
非空內容蹬铺，padding等）就會發(fā)生margin重疊
（2）因此要解決margin重疊問題尝哆，只要讓它們不在
同一個BFC就行了，但是對于兩個相鄰元素來說甜攀，意義不大秋泄，
沒有必要給它們加個外殼，但是對于嵌套元素來說就很有
必要了规阀，只要把父元素設為BFC就可以了恒序。這樣子元素
的margin就不會和父元素的margin發(fā)生重疊了</div>
 </div>
--------------------------------
.ct {
   border: 1px solid black;
}
.aside {
  width: 50px;
  height: 50px;
  background: blue;
  float: left;
}
.content {
  background: yellow;
}

如圖 重疊浮動元素.png

重疊浮動元素.png

下面我們給class為content的元素，添加樣式 overflow: hidden;此時如圖：

不重疊浮動元素.png

<div class="ct">
    <div class="box"></div>
    <div class="box"></div>
  </div>
-----------------
.ct {
  background: blue;
}
.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  float: left;
}

如圖：

未給父容器創(chuàng)建BFC.png

可以觀察到此時給父容器添加背景完全是沒有效果的谁撼。因為父容器的高度為0;
下面我們給class為ct的這個元素添加樣式display: inline-block;如圖：

添加樣式.png

7、在什么場景下會出現外邊距合并厉碟？如何合并喊巍？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例

• 塊的頂部外邊距和底部外邊距有時被組合(折疊)為單個外邊距箍鼓，其大小是
  組合到其中的最大的外邊距崭参，這種行為稱為外邊距合并。
• 什么場景下會出現外邊距合并袄秩？
  （1）相鄰的兄弟姐妹元素
  合并兩者中的最大者
  （2） 塊級父元素與其第一個/最后一個子元素
  如果塊級父元素中阵翎，不存在上邊框逢并、上內邊距之剧、內聯元素、清除浮動 這四條屬性(也可以說砍聊，當上邊框寬度及上內邊距距離為0時）背稼，那么這個塊級元素和其第一個子元素的上邊距就可以說“挨到了一起”。此時這個塊級父元素和其第一個子元素就會發(fā)生上外邊距
  合并的現象玻蝌，換句話說蟹肘，此時這個父元素對外展現出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者词疼。類似的,若塊級父元素的margin-bottom與它的最后一個子元素margin-bottom
  之間沒有父元素的border、padding帘腹、inline-content贰盗、height、min-height阳欲、max-height 分隔時舵盈，就會發(fā)生外邊距合并現象。
  （3）空塊元素
  如果存在一個空的塊級元素球化，其border秽晚、padding、inline content筒愚、
  height赴蝇、min-height 都不存在。那么此時它的上下邊距中間
  將沒有任何阻隔巢掺，此時它的上下外邊距將會合并句伶。合并到其中的最大者，當有負邊距存在時陆淀，合并后的外邊距將是最大正邊距加上最小
  負邊距熄阻。
• 如何不讓相鄰元素合并
  一般都是兩個塊狀元素，那么為其中一個添加樣式display: inline-block;
• 給父子外邊距合并的范列

<div class="ct">
 <h1>h1</h1>
</div>
--------------------
.ct {
  background: pink;
}
.ct > h1 {
  background: #666;
  margin: 40px;
}

如圖 :

未加margin.png

此時我們給class為ct的元素添加樣式margin: 30px;
此時如圖:

加上margin.png

8浸剩、 代碼

1钾军、實現如下alert效果。
demo
源代碼
2绢要、實現如下表單效果吏恭。
demo
源代碼
3、實現如下模態(tài)框效果重罪。
demo
源代碼
4樱哼、實現如下導航欄效果
demo
源代碼