BFC
- block formatting context
- 塊級元素在渲染的時候是怎么樣的規(guī)則進行布局的
BFC的產(chǎn)生
- 根元素（htnl元素）
- float不為none
- position為absolute或者fixed
- display為inline-block,flex或者inline-flex;
- overflow不為visible
特性
- BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
- 計算BFC的高度時，浮動元素也參與計算。
- 外邊距合并
- 浮動元素對塊級元素的影響
BFC
邊距合并問題
-父子合并
子元素的margin會合并到祖先元素中
- 自己合并
p標(biāo)簽的自己的內(nèi)容產(chǎn)生了合并
空的margin上下合并產(chǎn)生了合并
如何解決外邊距合并
瀏覽器兼容
CSS hack寫法
BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明。
BFC是 塊級元素格式化塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素與其他元素交互的區(qū)域。
- 根元素
- float不為0
- position為absolute或者fixed
- display為inline-block或者inline-flex
- overflow不為visable
BFC可以處理邊距合并還有contain float的問題
實現(xiàn)下方鏈接中的效果，附上預(yù)覽鏈接。
(demo)
在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
- 相鄰元素合并時的邊距取兩個元素連接處的外邊距較大一方為真實的邊距。
- 父子元素合并不僅僅是父子元素，可能會和更上階的父元素合并，邊距取父子元素中的最大值。
- 元素里沒有內(nèi)容時上下margin會產(chǎn)生合并。
- 合并的兩部分， 外邊距中取最大值的部分
- 在父子元素中給父元素設(shè)置Padding或者bording
對兄弟元素添加一個BFC
- demo
什么是 CSS hack？在哪個網(wǎng)站查看標(biāo)簽(屬性)的瀏覽器兼容情況。
- CSS hack是一種編碼技術(shù)，用于隱藏或顯示CSS標(biāo)記，具體取決于瀏覽器，版本號或功能。 瀏覽器對CSS行為有不同的解釋，對W3C標(biāo)準(zhǔn)有不同程度的支持。
- 地址
ie6、7的 hack 寫法是？
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
如下屬性，兼容哪些瀏覽器？
- inline-block >=ie8
- min-width/min-height >=ie8;
- :before,:after: >=ie8
- div:hover >=ie7
- inline-block >=ie8
- background-size >=ie9
- 圓角 >=ie9
- 陰影 >= ie9
- 動畫/漸變 >=ie10
漸進增強和優(yōu)雅降級分別是什么意思？
- 漸進增強(progressive enhancement): 針對低版本瀏覽器進行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗
- 優(yōu)雅降級 (graceful degradation): 一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進行兼容。
以下工具/名詞是做什么的?
-
條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。
-
IE Hack
ie hacks 和 css hacks 幾乎一致
-
js 能力檢測
能力檢測，它的目標(biāo)不是識別特定的瀏覽器，而是識別瀏覽器的能力！
-
html5shiv.js
利用createElement() 實現(xiàn)自定義標(biāo)簽
-
respond.js
媒體查詢
-
css reset
就是一個css，把默認樣式都去掉了
-
normalize.css
reset太暴力了 ，改變其它的樣式，使得
-
Modernizr
以前處理兼容針對的是瀏覽器，把支持的屬性放到class上面 在css可以這樣寫了
-
postCSS
PostCSS是一個軟件開發(fā)工具，它使用基于JavaScript的插件來自動執(zhí)行常規(guī)CSS操作。
##盡可能多的列舉瀏覽器兼容的處理范例
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 僅對ie67有效 */
}
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
<!--[if lt IE 9]>
<script src="https://oss./html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss./respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
來源：http://www./content-4-160851.html
|
