css兼容性
- css兼容性說白了就是為了照顧舊版本的瀏覽器，因?yàn)樾掳姹镜臑g覽器都很符合w3c規(guī)范概作。針對(duì)不同瀏覽器腋妙，書寫不同的樣式，并通過腳本來判斷瀏覽器版本讯榕，來顯示效果骤素。主要是通過css hack來實(shí)現(xiàn)。
屬性hack
- 前置hack（注意：所有屬性都可以這樣設(shè)置）
-
_color: red;ie6專屬愚屁，只有ie6才會(huì)應(yīng)用 -
*color: red;只有ie7及其以下才會(huì)應(yīng)用
-
- 后置hack
-
color: red\9;只針對(duì)ie6-10有效 -
color: red\0;只針對(duì)ie8-10有效 -
color: red\9\0;只針對(duì)ie9-10有效 -
color: red!important這是提高css權(quán)重的济竹，但這種設(shè)置方法只有ie7及其以上和其他瀏覽器識(shí)別，ie6不識(shí)別 - 正常的書寫順序是：正常 * _ 先正常再局部霎槐，保證層疊正常送浊。
-
選擇器hack
- 與屬性hack應(yīng)用單個(gè)屬性不同，選擇器hack可以應(yīng)用到整個(gè)選擇器
-
*html 選擇器 {}在選擇器前加了*html就只有ie6會(huì)識(shí)別并應(yīng)用樣式 -
*+html 選擇器 {}在選擇器前加了*+html就只有ie7會(huì)識(shí)別并應(yīng)用樣式 - 媒體選擇器暫時(shí)還沒學(xué)丘跌，等學(xué)了css3之后再來補(bǔ)充
條件注釋語(yǔ)法
<! -- [if ie 版本]>判斷內(nèi)容;<![ end if] -->-
<! -- [if gte ie 版本]>判斷內(nèi)容;<![end if] -->- gte是大于等于罕袋；gt是大于；lte是小于等于碍岔；lt是小于
-
<! -- [if ! ie] --><! -->判斷內(nèi)容浴讯；<! -- <! --[end if]-->ie10以上和非ie瀏覽器 - 這些語(yǔ)句大多數(shù)ie10以上都不再支持了，如果需要為低版本ie專門寫一套css可以通過這樣的方法來判斷并引入css文件蔼啦。
css常見BUG
- ie6瀏覽器浮動(dòng)盒子設(shè)置margin會(huì)出現(xiàn)雙倍外邊距問題榆纽，解決方法：display:inline-block，轉(zhuǎn)換為行內(nèi)塊元素
- ie6設(shè)置高度小于19px會(huì)默認(rèn)19px的問題捏肢，解決方法:設(shè)置overflow:hidden(推薦)奈籽、height:0;、font-size:0鸵赫、line-height:0;
- ie7及其以下版本衣屏，li標(biāo)簽里兩個(gè)以上元素浮動(dòng)，會(huì)讓每個(gè)li標(biāo)簽之間有空白縫隙辩棒。解放方法與圖片縫隙類似狼忱，用vertical-align設(shè)置非默認(rèn)值（baseline）的值即可膨疏。
- ie6使用奇數(shù)寬高會(huì)出現(xiàn)定位不精確的BUG，解決方法沒有钻弄，只能盡量避免佃却，設(shè)置寬高用偶數(shù)值
- ie6盒子盡管設(shè)置了寬和高，但內(nèi)容超出時(shí)窘俺，會(huì)自動(dòng)撐開盒子高度饲帅。解決方法是：overflow:hidden。
闖關(guān)題總結(jié)
- 邊框如果不設(shè)置顏色和樣式瘤泪，不管多粗都不會(huì)顯示
- background屬性不會(huì)繼承
- !doctype不是html標(biāo)簽
- radio和checkbox默認(rèn)值是checked="checked"
- margin和padding設(shè)置百分比值都是參考父元素的width
- 如果給當(dāng)前元素設(shè)置z-index灶泵，那么它的偽元素z-index會(huì)失效，要避免
BFC介紹與作用
- block formatting context 直譯過來就是塊級(jí)格式化上下对途，它是一塊渲染的區(qū)域赦邻，在區(qū)域內(nèi)部盒子不管怎么調(diào)都可以，不會(huì)影響到外部的盒子掀宋，它的模式與清除浮動(dòng)相似深纲。
- display:block|list-item|table可以具備觸發(fā)BFC的條件仲锄，它們都有一個(gè)共同的特性劲妙，由內(nèi)容、內(nèi)邊距儒喊、邊框镣奋、外邊距組成。
觸發(fā)BFC的條件
- 設(shè)置了float且值不為none
- 設(shè)置absolute或者fixed
- 設(shè)置了display:inline-block|table-cell|table-caption|flex|inline-flex
- overflow值不為visible
成為BFC元素具有的特性
- 內(nèi)部盒子從頂部開始怀愧，垂直的一個(gè)一個(gè)的排列
- 盒子垂直方向設(shè)置外邊距時(shí)侨颈，會(huì)出現(xiàn)外邊距合并
- 內(nèi)部盒子的邊緣會(huì)觸碰到父盒子邊框的內(nèi)部邊緣
- BFC區(qū)域不會(huì)和浮動(dòng)盒子產(chǎn)生交集，而是貼在浮動(dòng)盒子邊緣芯义，簡(jiǎn)單說就是不會(huì)再被浮動(dòng)的盒子壓住哈垢。
- 計(jì)算盒子高度時(shí)，會(huì)把浮動(dòng)盒子的高度也計(jì)算上（與清除浮動(dòng)相同的功能）
成為BFC元素的作用
- 清除浮動(dòng)扛拨，根據(jù)BFC的第五的特性耘分。
- 解決外邊距合并。既然同一個(gè)BFC區(qū)域的盒子垂直外邊距會(huì)合并绑警，那么反過來想求泰，讓垂直相鄰的兩個(gè)盒子不在同一個(gè)BFC區(qū)域不就不會(huì)合并了嗎？所以給其中一個(gè)盒子再設(shè)置一個(gè)BFC觸發(fā)條件（最喜歡用overflow:hidden來設(shè)置）计盒，就可以解決外邊距合并渴频。
- 制作右側(cè)自適應(yīng)盒子。因?yàn)樘匦员逼簦珺FC區(qū)域不會(huì)與浮動(dòng)盒子發(fā)生交集卜朗，這樣可用通過給上方的盒子設(shè)置浮動(dòng)拔第，下方盒子觸發(fā)BFC而形成右側(cè)自適應(yīng)盒子的效果。簡(jiǎn)單說就是聊替，BFC區(qū)域會(huì)跑到浮動(dòng)盒子右邊與頂線對(duì)齊楼肪，浮動(dòng)盒子大小發(fā)生變化，BFC區(qū)域自動(dòng)變化寬度惹悄，讓內(nèi)容也同時(shí)變化春叫，實(shí)現(xiàn)自適應(yīng)的效果。（可能不好理解泣港，動(dòng)手試試就理解了暂殖。）
絕對(duì)定位對(duì)齊右側(cè)版心
- 先
left：50%,然后往右走版心的一半距離即可，即：margin-left：版心一半距離
背景透明和元素透明
-
background: rgba(0,0,0,.1-1)背景透明顧名思義当纱，只設(shè)置背景顏色或者背景圖片透明呛每，不影響內(nèi)容。 - opacity:0-1 元素透明坡氯，元素內(nèi)的所有內(nèi)容包括背景都設(shè)置透明
- filter:alpha(opacity:1-100) 這個(gè)只針對(duì)IE的舊版本晨横，因?yàn)樗鼈儾徽J(rèn)識(shí)上面兩個(gè)
優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)
- 它們是一種布局思路，正好相反箫柳。優(yōu)雅降級(jí)是以最新的瀏覽器版本為準(zhǔn)來布局手形，然后通過一些調(diào)整來兼容低版本瀏覽器。而漸進(jìn)增強(qiáng)是以低版本為準(zhǔn)悯恍。
- 現(xiàn)在一般是優(yōu)雅降級(jí)比較多库糠。
