-
BFC 是什么哪亿？如何生成 BFC？BFC 有什么作用贤笆？舉例說明蝇棉。
BFC( Block Formatting Context)塊級(jí)格式化上下文。 它是指一個(gè)獨(dú)立的塊級(jí)渲染區(qū)域芥永，只有Block-level BOX參與银萍，該區(qū)域擁有一套渲染規(guī)則來約束塊級(jí)盒子的布局，且與區(qū)域外部無關(guān)恤左。
CSS2.1中規(guī)定滿足下列CSS聲明之一的元素便會(huì)生成BFC贴唇。- 根元素
- float的值不為none
- overflow的值不為visible
- display的值為inline-block、table-cell飞袋、table-caption
- position的值為absolute或fixed
一個(gè)BFC會(huì)成為一個(gè)簡單的UI模塊戳气，可以被移動(dòng)到任何位置，并且不會(huì)被其他UI影響巧鸭，亦不會(huì)與其他UI沖突瓶您。因?yàn)锽FC的條件是正常文檔流內(nèi)的塊級(jí)元素，或是清除浮動(dòng)的父元素纲仍，或是脫離文檔流的絕對(duì)/固定定位呀袱。
另外BFC會(huì)造成子元素的margin重疊。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊郑叠。
-
在什么場景下會(huì)出現(xiàn)外邊距合并夜赵？如何合并？如何不讓相鄰元素外邊距合并乡革？給個(gè)父子外邊距合并的范例
MDN文檔中的描述：外邊距合并
根據(jù)文檔描述寇僧，只有上下外邊距才會(huì)出現(xiàn)邊距合并，在兩個(gè)值中取大的沸版。三種基本情況：- 相鄰兄弟元素之間嘁傀；
- 父元素與其第一個(gè)子元素可能合并上邊距，與最后一個(gè)子元素可能合并下邊距视粮；
- 空的塊級(jí)元素自己的上下邊距也可以合并细办。
三種情況可能會(huì)疊加。
合并規(guī)則：
- 即使合并值中有0蕾殴，依然正常計(jì)算笑撞。所以子元素的margin值可能會(huì)溢出到父元素外面。
- 所需合并值都為正区宇，則取最大值娃殖；
- 有正有負(fù)，取最大正值減去最大絕對(duì)值的負(fù)值议谷；
- 都為負(fù)值炉爆，取最大絕對(duì)值的負(fù)值
禁止外邊距合并的方法：
- 改變布局方式，浮動(dòng)元素和絕對(duì)定位元素不會(huì)計(jì)算外邊距卧晓；
- 父子元素之間芬首，可以添加一個(gè)padding（padding: 1px;）或者border（border: 1px solid transparent）；
- 空元素需要給一個(gè)高度逼裆。height郁稍、min-height、border胜宇、padding或者干脆加進(jìn)一些內(nèi)容耀怜，都可以撐開這個(gè)元素恢着，后面的元素就不會(huì)再參加計(jì)算了。
-
什么是 CSS hack财破？在哪個(gè)網(wǎng)站查看標(biāo)簽(屬性)的瀏覽器兼容情況掰派。
不同廠商的瀏覽器、同一瀏覽器的不同版本左痢、不同時(shí)期的瀏覽器對(duì)CSS的解析實(shí)現(xiàn)都不完全一樣靡羡，使得同一套代碼會(huì)產(chǎn)生不同的效果，與我們的預(yù)期結(jié)果會(huì)有偏差俊性，這時(shí)需要對(duì)不同的瀏覽器做特殊的處理略步，使頁面表現(xiàn)盡可能一致。
對(duì)不同的瀏覽器做專門的CSS處理定页，這種方式叫做CSS hack趟薄。
查看兼容性的網(wǎng)站：Can I use。這個(gè)網(wǎng)站也可以查詢一些ECMA標(biāo)準(zhǔn)拯勉、js庫竟趾、原生jsAPI等的兼容情況。
-
ie6宫峦、7的 hack 寫法是岔帽？
屬性前綴法(即類內(nèi)部Hack)：例如 IE6能識(shí)別下劃線""和星號(hào)" "，IE7能識(shí)別星號(hào)" "导绷，但不能識(shí)別下劃線""犀勒，IE6~IE10都認(rèn)識(shí)"\9"，但firefox前述三個(gè)都不能認(rèn)識(shí)
選擇器前綴法(即選擇器Hack)
IE條件注釋法(即HTML條件注釋Hack)：針對(duì)所有IE(注：IE10+已經(jīng)不再支持條件注釋)： 妥曲，針對(duì)IE6及以下版本：贾费。這類Hack不僅對(duì)CSS生效，對(duì)寫在判斷語句里面的所有代碼都會(huì)生效.box{
color: red;
_color: blue; /ie6/
color: pink; /ie67/
color: yellow\9; /ie/edge 6-8*/
}
<!–-[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
-
如下屬性檐盟，兼容哪些瀏覽器褂萧？
- inline-block: IE8以上完全支持
- min-width/min-height IE7以上，7葵萎、8不支持inherit值
- :before,:afte: IE9以上完全支持
- div:hover IE7以上完全支持
- background-size IE9以上完全支持
- 圓角 IE9以上完全支持
- 陰影
box-shadow：IE9以上完全支持
text-shadow：IE10以上支持导犹，不支持spread - 動(dòng)畫/漸變
animation：IE10以上完全支持
Gradients：IE10以上支持背景漸變和重復(fù)漸變
-
漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)分別是什么意思？
漸進(jìn)增強(qiáng)意味著先按照所需要兼容的最低版本的瀏覽器進(jìn)行開發(fā)羡忘，然后逐漸增加一些新的特性滿足更高版本瀏覽器用戶的體驗(yàn)谎痢。漸進(jìn)增強(qiáng)開發(fā)難度高于優(yōu)雅降級(jí)，這種開發(fā)模式可以保證所有用戶都可正常使用所有功能卷雕，不過用戶體驗(yàn)可能低于優(yōu)雅降級(jí)的開發(fā)方式节猿。
優(yōu)雅降級(jí)正好相反，先按一般用戶使用的瀏覽器版本進(jìn)行開發(fā)漫雕，保證大部分用戶的正常使用滨嘱，然后對(duì)低版本的瀏覽器做一些兼容去兼顧少量低版本用戶峰鄙。優(yōu)雅降級(jí)的開發(fā)模式可能導(dǎo)致少部分用戶甚至無法正常使用網(wǎng)站的功能，但是開發(fā)簡單速度快九孩，可以使用新特性先馆，會(huì)帶來更好的用戶體驗(yàn)。
-
以下工具/名詞是做什么的躺彬？
條件注釋
IE Hack
js 能力檢測
html5shiv.js
respond.js
css reset
normalize.css
Modernizr
postCSS
條件注釋：IE瀏覽器支持在一段注釋中書寫代碼，并注明適配的瀏覽器版本梅惯，符合版本的瀏覽器可以運(yùn)行該注釋中的代碼宪拥，不符合的瀏覽器會(huì)將該部分代碼看作是注釋。此功能僅對(duì)IE瀏覽器有效铣减。
IE Hack：IE的CSS中有一些bug她君，輸入* - / /9 等等不符合一般CSS標(biāo)準(zhǔn)的符號(hào)時(shí)，IE可以識(shí)別葫哗，一般其他的瀏覽器都不能識(shí)別缔刹。利用這一特性我們可以針對(duì)IE做出一些CSS上的調(diào)整。注意IE一直在修復(fù)這些問題劣针，有些原來支持IE9或IE10的寫法可能不被更高等級(jí)的瀏覽器支持校镐。
js 能力檢測：對(duì)于不同的瀏覽器，不檢測其版本捺典，而是檢測其是否具有需要使用的功能鸟廓。比如Ajax基于XMLHttpRequest對(duì)象，在IE中對(duì)應(yīng)為ActiveXObject襟己，代碼中如果判斷XMLHttpRequest為undefined不存在引谜，那么后面的請(qǐng)求則使用ActiveXObject對(duì)象完成相應(yīng)功能。
html5shiv.js：用于解決IE9以下版本瀏覽器對(duì)HTML5新增標(biāo)簽不識(shí)別擎浴，并導(dǎo)致CSS不起作用的問題员咽。利用腳本document.createElement()創(chuàng)建對(duì)應(yīng)的腳本，CSS選擇器便可正確應(yīng)用到該標(biāo)簽贮预。
respond.js：讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢贝室。
css reset：重置樣式，清除瀏覽器默認(rèn)樣式萌狂，并配置適合設(shè)計(jì)的基礎(chǔ)樣式（強(qiáng)調(diào)文本是否大多是粗體档玻、主文字色，主鏈接色茫藏，主字體等）误趴。
normalize.css：使瀏覽器可以更加一致地呈現(xiàn)所有元素，并符合現(xiàn)代標(biāo)準(zhǔn)务傲。它精確地只針對(duì)需要標(biāo)準(zhǔn)化的樣式凉当。
Modernizr：是一個(gè) JavaScript 庫枣申，用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性。Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS看杭，無論瀏覽器是否支持這些特性忠藤。這是處理漸進(jìn)增強(qiáng)的完美方案。
postCSS：使用JS幫助重新生成標(biāo)準(zhǔn)CSS代碼楼雹，提供功能有批量增加廠商前綴模孩、標(biāo)準(zhǔn)化CSS、支持使用預(yù)處理器的CSS寫法贮缅、提供模擬的CSS命名空間榨咐、內(nèi)置的網(wǎng)格系統(tǒng)。
