問答

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

1. 特征：

• 浮動(dòng)模型也是一種可視化格式模型莉御，浮動(dòng)的框可以左右移動(dòng)（根據(jù)float屬性值而定），直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣俗冻。浮動(dòng)元素不在文檔的普通流中礁叔，文檔的普通流中的元素表現(xiàn)的就像浮動(dòng)元素不存在一樣.
• 如果包含塊兒太窄無法容納水平排列的三個(gè)浮動(dòng)元素,那么其它浮動(dòng)塊兒向下移動(dòng),直到有足夠的空間,如果浮動(dòng)元素的高度不同,那么向下移動(dòng)的時(shí)候可能被卡住

2. 影響：
3. 對(duì)父容器：父容器可能看不到該浮動(dòng)元素，即可能父元素高度塌陷
4. 對(duì)其他浮動(dòng)元素：如果包含塊兒太窄無法容納水平排列的三個(gè)浮動(dòng)元素,那么其它浮動(dòng)塊兒向下移動(dòng),直到有足夠的空間,如果浮動(dòng)元素的高度不同,那么向下移動(dòng)的時(shí)候可能被卡住
5. 對(duì)普通元素：浮動(dòng)元素之前的普通元素不受影響迄薄。浮動(dòng)元素之后的普通元素因感知不到浮動(dòng)元素的存在會(huì)被浮動(dòng)元素覆蓋琅关。
6. 對(duì)文字：文字所在行框（或display：inline-block）因?yàn)楦?dòng)元素的擠壓而縮短，從而圍繞浮動(dòng)元素排列。

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

1. 解決父容器高度塌陷的問題
2. 清除浮動(dòng)的方法

• 最后面加一個(gè)元素涣易，設(shè)置clear:float
• BFC清除浮動(dòng)画机，設(shè)置父容器為BFC，形成BFC的方法：
• float為 left|right
• overflow為 hidden|auto|scroll
• display為 table-cell|table-caption|inline-block
• position為 absolute|fixed
• 通用方案：設(shè)置:after的樣式為清除浮動(dòng)（若支持IE6新症、7：*zoom:1）

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

1. 5種方式：inherit,static,absolute,relative,fixed
2. 如何實(shí)現(xiàn)定位，參考點(diǎn)隆嗅，使用場(chǎng)景：
3. inherit:定位繼承方式幾成父容器界阁，(若父容器是相對(duì)定位，它也是相對(duì)定位)
4. static:默認(rèn)值胖喳，是普通文檔流
5. absolute:
   • 元素框從文檔流完全刪除泡躯，并相對(duì)于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊丽焊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉较剃，就好像元素原來不存在一樣。元素定位后生成一個(gè)塊級(jí)框粹懒，而不論原來它在正常流中生成何種類型的框重付。
   • 參考點(diǎn)： 最近的不是static定位的祖先容器
   • 使用場(chǎng)景：元素水平垂直居中
6. relative:
   • 元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀凫乖，它原本所占的空間仍保留
   • 參考：是自身在文檔流中的位置
   • 場(chǎng)景：圖片小位移确垫，作為絕對(duì)定位的參考點(diǎn)
7. fixed:
   • 元素框的表現(xiàn)類似于 absolute，不過其包含塊是視窗本身
   • 參考點(diǎn)：瀏覽器窗口
   • 場(chǎng)景：位置固定的彈窗或返回頂部按鈕等

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

1. 作用：控制非文檔流元素的疊放順序帽芽，該屬性值越高删掀，元素位置越靠上。
2. 使用：當(dāng)設(shè)置為relative导街、absolute或fixed時(shí)披泪，通過設(shè)置z-index決定疊放順序

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

1. position:relative

不會(huì)影響其他元素：顯示位置發(fā)生變化，文檔流位置不變

2. 負(fù)margin

會(huì)影響其他元素：顯示位置和文檔流位置均發(fā)生變化

6.BFC 是什么搬瑰？如何生成 BFC款票？BFC 有什么作用？舉例說明

1. BFC直譯為“塊級(jí)格式化范圍”(Block Formatting Context)泽论。是 W3C CSS 2.1 規(guī)范中的一個(gè)概念艾少，它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用翼悴。當(dāng)涉及到可視化布局的時(shí)候缚够，Block Formatting Context提供了一個(gè)環(huán)境，HTML元素在這個(gè)環(huán)境中按照一定規(guī)則進(jìn)行布局。一個(gè)環(huán)境中的元素不會(huì)影響到其它環(huán)境中的布局谍椅。比如浮動(dòng)元素會(huì)形成BFC误堡，浮動(dòng)元素內(nèi)部子元素的主要受該浮動(dòng)元素影響，兩個(gè)浮動(dòng)元素之間是互不影響的雏吭。這里有點(diǎn)類似一個(gè)BFC就是一個(gè)獨(dú)立的行政單位的意思锁施。也可以說BFC就是一個(gè)作用范圍∷伎郑可以把它理解成是一個(gè)獨(dú)立的容器沾谜，并且這個(gè)容器的里box的布局，與這個(gè)容器外的毫不相干胀莹。
2. 形成BFC的方法：
   • float為 left|right
   • overflow為 hidden|auto|scroll
   • display為 table-cell|table-caption|inline-block
   • position為 absolute|fixed
3. 作用：

• 設(shè)置父元素為BFC可以清除浮動(dòng)基跑，代碼范例

• 解決margin重疊問題。只要讓它們不在同一個(gè)BFC就行了描焰，但是對(duì)于兩個(gè)相鄰元素來說媳否，意義不大，沒有必要給它們加個(gè)外殼荆秦，但是對(duì)于嵌套元素來說就很有必要了篱竭，只要把父元素設(shè)為BFC就可以了。這樣子元素的margin就不會(huì)和父元素的margin發(fā)生重疊步绸，[代碼范例](http://js.jirengu.com/torejixoni/1/edit)
  

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

1. 兩種情況：

• 當(dāng)兩個(gè)垂直方向相鄰元素都不是浮動(dòng)元素時(shí),相鄰上或下外邊距取較大值進(jìn)行合并
• 父子元素間沒有阻擋（如：邊框吕喘、非空內(nèi)容、padding等）時(shí)發(fā)生上或下外邊距合并刑桑。

2. 滿足上面兩種情況：相鄰非浮動(dòng)元素氯质，父子元素沒有阻擋
3. 分兩種情況
   • 垂直相鄰元素外邊距合并
     • 設(shè)置浮動(dòng)
     • 設(shè)置其中一個(gè)元素display:inline-block等等
   • 父子元素外邊距合并：
     • 為父元素設(shè)置padding或border
     • 設(shè)置父元素為BFC
4. 父子元素合并范例

代碼

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

代碼鏈接

2.實(shí)現(xiàn)如下表單效果祠斧， 效果范例13

代碼鏈接

3.實(shí)現(xiàn)如下模態(tài)框效果闻察， 效果范例11

代碼鏈接

4.實(shí)現(xiàn)如下導(dǎo)航欄效果，效果范例12

代碼鏈接