BFC
一、BFC是什么
BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"身冀。它是一個(gè)獨(dú)立的渲染區(qū)域钝尸，只有Block-level box參與括享， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干珍促。
二铃辖、如何形成BFC
-
float屬性不設(shè)為none -
position屬性設(shè)為absolute或fixed -
display設(shè)為inline-block、table-cell猪叙、table-caption娇斩、flex或inline-flex -
overflow不設(shè)為visible
三、BFC有什么作用
- 避免外邊距合并
- 防止正常文檔流中元素占據(jù)浮動(dòng)元素位置
- 消除浮動(dòng)
- 實(shí)現(xiàn)自適應(yīng)布局
外邊距合并
一穴翩、外邊距合會(huì)出現(xiàn)在什么場(chǎng)景下
只有在普通文檔流中會(huì)出現(xiàn)外邊距合并犬第，脫離了文檔流的不會(huì)出現(xiàn)外邊距合并。
二芒帕、外邊距如何合并
- 值均為正或負(fù)時(shí)歉嗓，合并絕對(duì)值最大的值
- 一正一負(fù)時(shí)，兩值帶符號(hào)相加
三背蟆、如何不讓相鄰元素外邊距合并
- 不同BFC的元素不會(huì)發(fā)生外邊距合并
- 如果是父子關(guān)系鉴分，父元素設(shè)置
padding或border可以阻止外邊距合并
消除合并前
消除合并后
CSS hack
一、什么是CSS hack
由于不同廠商的瀏覽器带膀，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等志珍，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7垛叨，對(duì)CSS的解析認(rèn)識(shí)不完全一樣伦糯，因此會(huì)導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果嗽元。
這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫不同的CSS舔株，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。
參考網(wǎng)站：饑人谷CSS hack
二还棱、ie6载慈、7的hack怎么寫
常見的ie hack寫法如下
.box{
color: red;
_color: blue; /* ie6 */
*color: pink; /* ie67 */
color: yellow\9; /* ie/edge 6-8 */
}
<!--[if ie]>
<link rel="stylesheet" href="ie7.css" type="text/css">
<![endif]-->
三、瀏覽器兼容屬性
-
inline-block:>=ie8
-
min-width/min-height:>=ie8
-
:before/:after: >=ie8
-
div:hover: >=ie7
-
background-size: >=ie9
-
圓角: >=ie9
-
陰影: >=ie9
-
動(dòng)畫/漸變: >=ie10
四珍手、漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)
- 漸進(jìn)增強(qiáng)：一開始就針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面办铡，完成基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果琳要、交互寡具、追加功能達(dá)到更好的體驗(yàn)。
- 優(yōu)雅降級(jí)：一開始就構(gòu)建站點(diǎn)的完整功能稚补，然后針對(duì)瀏覽器測(cè)試和修復(fù)童叠。比如一開始使用 CSS3 的特性構(gòu)建了一個(gè)應(yīng)用，然后逐步針對(duì)各大瀏覽器進(jìn)行 hack 使其可以在低版本瀏覽器上正常瀏覽。
五厦坛、名詞解釋
- 條件注釋
IE中的條件注釋（Conditional comments）對(duì)IE的版本和IE非IE有優(yōu)秀的區(qū)分能力五垮，是WEB設(shè)計(jì)中常用的hack方法，只能用于IE5以上杜秸。如果你安裝了多個(gè)IE放仗，條件注釋將會(huì)以最高版本的IE為標(biāo)準(zhǔn)。
條件注釋的基本結(jié)構(gòu)和HTML的注釋()是一樣的撬碟。因此IE以外的瀏覽器將會(huì)把它們看作是普通的注釋而完全忽略它們诞挨。IE將會(huì)根據(jù)if條件來判斷是否如解析普通的頁面內(nèi)容一樣解析條件注釋里的內(nèi)容。
<!--[if ie]>
<link rel="stylesheet" href="ie7.css" type="text/css">
<![endif]-->
- IE Hack
CSS Hack大致有3種表現(xiàn)形式呢蛤， CSS屬性前綴法惶傻、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack，實(shí)際項(xiàng)目中CSS Hack大部分是針對(duì)IE瀏覽器不同版本之間的表現(xiàn)差異而引入的其障。 - js能力檢測(cè)
瀏覽器的能力檢測(cè)目標(biāo)不是檢測(cè)特定的瀏覽器银室，而是檢測(cè)瀏覽器的能力。這樣静秆，只需要檢測(cè)瀏覽器是否支持特定的能力粮揉，就可以給出特定的解決方案巡李。這一部分檢測(cè)是解決瀏覽器兼容問題的主要檢測(cè)抚笔。 - html5shiv.js
用于解決IE9以下版本瀏覽器對(duì)HTML5新增標(biāo)簽不識(shí)別，并導(dǎo)致CSS不起作用的問題侨拦。由于IE6-8還有很大一部分用戶殊橙，為了讓網(wǎng)站瀏覽者都能正常的訪問HTML5網(wǎng)站，解決方案就有使用Javascript來使不支持HTML5的瀏覽器支持HTML標(biāo)簽狱从。目前大多網(wǎng)站采用的這種方式（Bootcss官方例子也是如此）膨蛮。
原理：利用腳本document.createElement(“”)創(chuàng)建對(duì)應(yīng)的腳本，CSS選擇器便可正確應(yīng)用到該標(biāo)簽季研。
使用：考慮到IE9是支持html5的敞葛，所以直接在HTML頁面的head標(biāo)簽中添加腳本引用即可 - respond.js
讓不支持CSS3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。 - css reset
將瀏覽器的默認(rèn)樣式全部去掉与涡，就是通過重新定義標(biāo)簽樣式惹谐。“覆蓋”瀏覽器的CSS默認(rèn)屬性驼卖。 - normalize.css
normalize.css 是一個(gè)可定制的CSS文件氨肌，使瀏覽器呈現(xiàn)的所有元素，更一致和符合現(xiàn)代標(biāo)準(zhǔn)酌畜。它正是針對(duì)只需要統(tǒng)一的元素樣式擅这。該項(xiàng)目依賴于研究瀏覽器默認(rèn)元素風(fēng)格之間的差異贮喧，精確定位需要重置的樣式帝火。這是一個(gè)現(xiàn)代的巷怜，HTML5-ready 的CSS重置樣式集。 - Modernizr
Modernizr 是一個(gè) JavaScript 庫宰衙，用于檢測(cè)用戶瀏覽器的 HTML5 與 CSS3 特性。它可以方便地為各種情況編寫 JavaScript 和 CSS，無論瀏覽器是否支持這些特性蕉扮。這是處理漸進(jìn)增強(qiáng)的完美方案。
原理：Modernizr 會(huì)在頁面加載后立即檢測(cè)特性颗圣；然后創(chuàng)建一個(gè)包含檢測(cè)結(jié)果的 JavaScript 對(duì)象喳钟，同時(shí)在 html 元素加入方便你調(diào)整 CSS 的 class 名。 - postCSS
postCSS 是使用 JS 插件來轉(zhuǎn)換 CSS 的工具在岂，支持變量奔则，混入，未來 CSS 語法蔽午，內(nèi)聯(lián)圖像等等易茬。它包括 CSS 解析器，CSS 節(jié)點(diǎn)樹 API及老，一個(gè)源映射生成器和一個(gè)節(jié)點(diǎn)樹 stringifier抽莱。
