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

• 浮動(dòng)元素不在文檔的普通流中碌奉，它可以根據(jù)float屬性值而左右移動(dòng)，直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣才停止移動(dòng)寒砖。
• 對(duì)父容器的影響：如果父容器的子元素都是浮動(dòng)元素赐劣，那么父容器會(huì)失去高度，在浮動(dòng)元素之外哩都。視覺上魁兼，父容器沒有包含住浮動(dòng)的子元素。
• 其它浮動(dòng)元素的影響：如果包含塊太窄無法容納水平排列的全部浮動(dòng)元素漠嵌，那么其它浮動(dòng)元素會(huì)向下移動(dòng)咐汞，直到有足夠的空間盖呼，而如果浮動(dòng)元素的高度不同，那么向下移動(dòng)的時(shí)候可能會(huì)被卡住化撕。
• 普通元素的影響：普通元素會(huì)視浮動(dòng)元素不見几晤，占據(jù)浮動(dòng)元素原有的位置，但會(huì)被浮動(dòng)元素遮罩植阴。
  對(duì)文字的影響：文字會(huì)感知到浮動(dòng)元素的存在栽连，會(huì)留出空間缕探，形成環(huán)繞效果。

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

• 清除浮動(dòng)是指如何讓一個(gè)沒有高度的div中兩個(gè)元素浮動(dòng)后，div的高度為0的父盒子重新包含子元素
• 清除浮動(dòng)：
• 添加額外標(biāo)簽設(shè)置clearfix類為clear:both;
  　　原理是這個(gè)空的div能讓父級(jí)獲取到高度秤掌，是因?yàn)樵O(shè)置之后這個(gè)div的左右都不能有浮動(dòng)元素，所以這個(gè)空的div元素會(huì)向下移動(dòng)虐秦，直到換行晓殊，而為了讓這個(gè)div能夠換行，父元素至少要包含浮動(dòng)元素的高度才能提高足夠的空間魁衙，這樣實(shí)現(xiàn)清除浮動(dòng)的影響

PS:clear:left|right是指清除左邊左浮動(dòng)的元素（或者右邊右浮動(dòng)的元素）

• 設(shè)置父元素為浮動(dòng)元素

*設(shè)置position:absolute

• overflow:hidden

• 父級(jí)div定義偽類:after和zoom;
  .clearfix:after {
  content:'';
  display:block;
  clear:both;
  }
  .clearfix {
  *zoom:1;
  }

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

• 有6種定位方式：
• inherit：從父元素繼承；
• static：默認(rèn)值纵隔，沒有定位翻诉，元素出現(xiàn)在正常的文檔流中。參考點(diǎn)是文檔流中的位置捌刮。
• relative：相對(duì)定位碰煌。相對(duì)于元素本身正常位置進(jìn)行定位，通過top绅作、bottom芦圾、left、right屬性來設(shè)置偏移量俄认。使用場(chǎng)景：為絕對(duì)定位設(shè)定參照物或?qū)υ刈陨砦恢眠M(jìn)行局部調(diào)整个少。
• absolute：絕對(duì)定位。相對(duì)于static定位意外的第一個(gè)祖先元素進(jìn)行定位眯杏，若都沒有發(fā)現(xiàn)則以html標(biāo)簽為參考進(jìn)行定位夜焦。使用場(chǎng)景：當(dāng)想讓元素參照特定參照物進(jìn)行定位時(shí)使用。
• fixed：固定定位岂贩。生成絕對(duì)定位元素茫经，相對(duì)于viewport進(jìn)行定位。
• sticky：對(duì)象在常態(tài)時(shí)遵循普通流。它就像是relative和fixed的合體卸伞，當(dāng)在屏幕中時(shí)按常規(guī)流排版褥紫，當(dāng)卷動(dòng)到屏幕外時(shí)則表現(xiàn)如fixed。

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

• 因?yàn)榻^對(duì)定位的元素脫離了普通流瞪慧，所以絕對(duì)定位的元素可以覆蓋頁(yè)面上的其它元素髓考。這時(shí)可以通過給元素設(shè)置z-index屬性來控制疊放順序，該屬性值越高弃酌，元素位置越靠上氨菇。

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

• position:relative;還占據(jù)原來的位置，只是相對(duì)自己原本位置發(fā)生偏移妓湘，不影響其它普通流中元素的位置查蓉。
• margin：除了讓元素自身發(fā)生偏移還影響其它普通流中的元素位置。

6. BFC 是什么榜贴？如何生成 BFC豌研？BFC 有什么作用？舉例說明

• BFC是塊級(jí)格式上下文唬党。其定義是：浮動(dòng)鹃共、絕對(duì)定位（絕對(duì)定位、固定定位）元素驶拱、塊級(jí)容器（如inline-block霜浴、 table-cell、table-caption）并不是塊級(jí)盒子蓝纲，還包括哪些overflow屬性值取值visible以外的塊級(jí)盒子阴孟，會(huì)為它們的內(nèi)容物創(chuàng)建一個(gè)新的塊級(jí)格式化上下文。對(duì)元素設(shè)置以下屬性就可以生成BFC：
  float: left | right;
  overflow: hidden | auto | scroll;
  display: table-cell | table-caption | inline-block;
  position: absolute | fixed;

• 特性：

• BFC會(huì)阻止垂直外邊距（margin-top税迷、margin-bottom）折疊

• 按照BFC的定義永丝，只有同屬于一個(gè)BFC時(shí)，兩個(gè)元素才有可能發(fā)生垂直Margin的重疊箭养，這個(gè)包括相鄰元素慕嚷，嵌套元素，只要他們之間沒有阻擋(例如邊框露懒，非空內(nèi)容闯冷，padding等)就會(huì)發(fā)生margin重疊砂心。

• 因此要解決margin重疊問題懈词，只要讓它們不在同一個(gè)BFC就行了，但是對(duì)于兩個(gè)相鄰元素來說辩诞，意義不大坎弯，沒有必要給它們加個(gè)外殼，但是對(duì)于嵌套元素來說就很有必要了，只要把父元素設(shè)為BFC就可以了抠忘。這樣子元素的margin就不會(huì)和父元素的margin發(fā)生重疊

• BFC不會(huì)重疊浮動(dòng)元素

• BFC可以包含浮動(dòng)

• BFC的作用有：
  （1） 解決margin重疊問題撩炊。所謂margin重疊是指處于同一個(gè)BFC的相鄰元素、嵌套元素崎脉，只要它們之間沒有阻擋（如：邊框拧咳、非空內(nèi)容、padding等）就會(huì)發(fā)生margin重疊囚灼。這是只要讓其中一個(gè)元素生成新的BFC就能解決margin重疊問題骆膝。
  （2） 清除浮動(dòng)。因?yàn)锽FC可以包含浮動(dòng)灶体，所以讓父容器生成新的BFC可以讓父容器在視覺上包圍了浮動(dòng)的子元素阅签，因而清除了浮動(dòng)
  談?wù)凚FC與ie特有屬性hasLayout
  CSS布局基礎(chǔ)——BFC

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

• 相鄰的兩個(gè)盒子和嵌套的盒子會(huì)出現(xiàn)外邊距合并
• 合并規(guī)則
• 外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)樟结，它們將形成一個(gè)外邊距养交。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
• 相鄰的兩個(gè)盒子上下邊距合并瓢宦，如圖

相鄰.png

• 解決辦法：

  
  
  相鄰2.png

相鄰3.png

• 嵌套元素margin合并层坠，如圖：

  
  
  嵌套.png

• 解決辦法：

  
  
  嵌套1.png
  
  
  嵌套2.png
  
  
  嵌套3.png
  
  
  嵌套4.png

8.代碼題

任務(wù)一

• 關(guān)鍵點(diǎn)在于利用浮動(dòng)的特性，把<span>x</span>放在第一位就可以把第二位塊元素覆蓋刁笙，而不用定位去做

任務(wù)二

• 關(guān)鍵點(diǎn)在pidding破花，運(yùn)用padding將input撐大，加上overflow:auto就可以做出下方有滑動(dòng)欄的效果

任務(wù)三

• 關(guān)鍵點(diǎn)兩點(diǎn)

  • 利用固定定位將背景撐開固定在瀏覽器展示位置

    .modal {
      position:fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0,0,0,0.3);
    }
    

  • 在不知道盒子寬高的情況下疲吸，可以使用transform:translate(-50%,-50%); 當(dāng)margin-top,margin-lfet的居中法使用
    .modal .panel {
    position:absolute;
    top:50%;
    left:50%;
    width: 600px;
    transform:translate(-50%,-50%);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2),0 4px 20px rgba(0,0,0,0.19);
    }

任務(wù)四