* 浮動(dòng)元素有什么特征百匆？對(duì)父容器环疼、其他浮動(dòng)元素习霹、普通元素、文字分別有什么影響?
浮動(dòng)元素有什么特征炫隶？->
1.脫離普通文檔流淋叶，不占據(jù)原來的位置. 浮動(dòng)元素左右移動(dòng)至包含框或者另一個(gè)浮動(dòng)元素的框的邊緣。塊級(jí)元素當(dāng)浮動(dòng)元素不存在等限，內(nèi)聯(lián)元素環(huán)繞浮動(dòng)元素排列爸吮。具體可參考<css權(quán)威指南>
對(duì)父容器芬膝、其他浮動(dòng)元素望门、普通元素、文字分別有什么影響?
- 對(duì)于父容器而言锰霜，如果沒有設(shè)置其高度筹误，而子元素設(shè)置float，會(huì)造成‘塌陷’的效果癣缅〕簦可用BFC原理或者清除浮動(dòng)解決.
- 對(duì)于其他浮動(dòng)元素而言： 如果寬度足夠會(huì)水平排列; 不足會(huì)下移靠左/右移動(dòng);當(dāng)?shù)谝粋€(gè)浮動(dòng)元素的高度大于第3個(gè)浮動(dòng)元素的高度并且整體寬度不足以水平放下多個(gè)浮動(dòng)元素,會(huì)造成‘卡住’的效果
- 普通元素：
* 當(dāng)為塊級(jí)元素時(shí)會(huì)當(dāng)浮動(dòng)元素不存在
* [當(dāng)為內(nèi)聯(lián)元素時(shí)會(huì)‘感知’浮動(dòng)元素，環(huán)繞浮動(dòng)元素友存。->[鏈接](http://js.jirengu.com/tucexasixa/2/edit)
* 清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
- 在水平方向上沒有浮動(dòng)元素存在.
- 包裹一層‘外套’,BFC
- 改變?cè)氐拇怪狈较虻奈恢?clear: left/botn/right
* 有幾種定位方式祷膳，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么屡立，使用場(chǎng)景是什么直晨？
position: relative 根據(jù)自身定位
absolute 根據(jù)父級(jí)設(shè)置定位來絕對(duì)定位,都沒有根據(jù)HTML來進(jìn)行定位.
fixed 根據(jù)瀏覽器窗口來進(jìn)行定位
static 默認(rèn)樣式
sticky 可以看成是relative和fixed的集合體.當(dāng)在頁面可視范圍內(nèi)以relative，當(dāng)頁面滾動(dòng)超出目標(biāo)區(qū)域時(shí)膨俐，以fix定位.
一般 absolute 配合 relative使用.當(dāng)父容器的寬高可變時(shí)勇皇，使用絕對(duì)水平垂直居中。
sticky 是css3的新屬性焚刺，兼容性不太好.
* z-index 有什么作用? 如何使用?
層疊上下文 .配合定位使用 z-index大的在上,小的在下敛摘。參考鏈接->關(guān)于z-index
* position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
根據(jù)元素還在普通文檔角度看。設(shè)置positon: relative 還在原來的文檔流乳愉，-margin則相反兄淫。
* BFC 是什么屯远？如何生成 BFC？BFC 有什么作用捕虽？舉例說明
塊級(jí)格式化上下文(block formart context) css2.1新增的一個(gè)概念氓润。它是頁面中的一個(gè)渲染區(qū)域，有自己的一套渲染規(guī)則薯鳍。里面的子元素根據(jù)這個(gè)規(guī)則進(jìn)行定位. （可以理解為一個(gè)與外界格局的包含塊咖气，里面不管浮動(dòng) 定位 什么的 即使在怎么'翻江倒海'都不會(huì)其臨邊的元素.該怎么就怎么顯示）
body 根元素
浮動(dòng)元素
定位元素 position: absolute/fixed
positon: relative/sticky/static不會(huì)觸發(fā)BFC
qq 20170503230045
display: inline-block /table-cell/flex
overflow: auto/hidden/srcoll 除了visible
一般如果父容器不設(shè)置高度，里面的子元素采用某種方式脫離文檔流挖滤，會(huì)造成高度塌陷崩溪。BFC可以解決父容器沒有高度的問題。
比如實(shí)現(xiàn)一個(gè)兩欄布局: [父元素可以實(shí)現(xiàn)高度自適斩松。,可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的二欄布局.->兩欄布局
* 在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并伶唯？如何合并？如何不讓相鄰元素外邊距合并惧盹？給個(gè)父子外邊距合并的范例
普通文檔流乳幸，同一個(gè)塊級(jí)上下文中 的垂直方向上。為什么會(huì)產(chǎn)生這種效果,完全是歷史遺留問題钧椰，主要是為了解決文字排版的需求粹断。
比如相鄰的塊級(jí)分別設(shè)置margin為50px 和 100px. 會(huì)選擇大的margin會(huì)參考值
比如 元素內(nèi)嵌套多個(gè)div，最終參考的是marign最大的那個(gè)指.
qq 20170503232222
相鄰的兩個(gè)元素一個(gè)正maing一個(gè)是負(fù)margin嫡霞，最終取計(jì)算后的值瓶埋。
可以不在同一個(gè)塊級(jí)上下文中.設(shè)置border padding。會(huì)創(chuàng)建一個(gè)BFC
