精通CSS：高級(jí)Web標(biāo)準(zhǔn)解決方案（第2版）
來(lái)源：程序員人生 發(fā)布時(shí)間：2014-11-12 08:40:10 閱讀次數(shù)：4001次
精通CSS：高級(jí)Web標(biāo)準(zhǔn)解決方案（第2版）
跳轉(zhuǎn)至：
導(dǎo)航、
搜索
- 層疊重要度：（也就是說(shuō)，用戶!important可以覆蓋inline style）
- !important、用戶>作者、最后是閱讀器/用戶代理
- 規(guī)則特殊性（次序）的計(jì)算：a,b,c,d 如果相同，后定義的優(yōu)先
- 如果是inline style，a=1
- b=ID選擇器（#id）的個(gè)數(shù)
- c=類、偽類、屬性選擇器的個(gè)數(shù)
- d=類型、偽元素選擇器的個(gè)數(shù)
- => 大網(wǎng)站復(fù)雜內(nèi)容情況下如何管理規(guī)則次序？？？
- @import比link慢？
- p41 （垂直）margin疊加（=max(upper's margin-bottom, down's margin-top)）
- 元素嵌套包括、空元素都會(huì)產(chǎn)生疊加
- only for 普通文檔流的block框，inline、float、position:absolute的不會(huì)疊加
- inline：設(shè)置高度、寬度沒(méi)有作用，line-height
- => inline-block
- 沒(méi)法直接對(duì){匿名block、文本line框}利用樣式
- position:relative：可以指定left、top“相對(duì)”原來(lái)位置，元素依然占據(jù)原來(lái)的空間
- position:absolute：元素不占據(jù)文檔流空間（這相當(dāng)于提升其z-index？）
- 相對(duì)距離它最近的先人元素定位（由此可以看出CSS是先定位先人元素，后子孫元素的？）
- position:fixed：相對(duì)viewport（1般用于用戶評(píng)論）
- position:float：可以（脫離文檔流）左右移動(dòng)，直到碰到包括框（containing box）或另外一個(gè)浮動(dòng)框
- 如果包括塊（containing block？）沒(méi)法水平容納下所有元素，其他float元素將下移
- 文本元素會(huì)受float的影響，造成類似于WORD‘文字環(huán)繞’的效果
- 要禁止之，對(duì)這些文本行clear float。
- 可以使用1個(gè)空元素clear:both，使得父容器包括浮動(dòng)元素。（也能夠直接float容器，但這會(huì)影響下1個(gè)元素）
- .clearFloat:after { content:"."; height:0; visibility:hidden; display:block; clear:both; }
- IE 6-中的‘Holly hack’
- p56 利用背景圖像創(chuàng)建項(xiàng)目符號(hào)
- p65 圓角框在CSS 3里很容易處理，在CSS 2.1時(shí)期的各種tricks略過(guò)
- 9切分的border-image: url(user-corner.gif) 25% 25% 25% 25% / 25px round round;
- CSS投影：box-shadow
- CSS視差：background-position: 20% 0;
- 圖像替換（CSS 2.1）：
- FIR：文本的display:none造成不合適屏幕瀏覽器
- Phark：使用text-indent:⑸000px; 對(duì)關(guān)閉圖像但打開(kāi)CSS的情況無(wú)效
- sIFR（JS+Flash）
- p87 CSS 3允許:target偽類？（恩，這么做沒(méi)有信息泄漏問(wèn)題）
- 外鏈樣式（常見(jiàn)于Wiki）
- p92 文本在行框中總是垂直居中的（？？），設(shè)置line-height便可，使用height會(huì)致使文本不是垂直居中，從而必須設(shè)置額外的padding
- CSS Tooltip：不如最簡(jiǎn)單的title屬性吧?
- p105 在導(dǎo)航條中突出顯示當(dāng)前頁(yè)面：使用2個(gè)ID，其中1個(gè)利用到body元素上，進(jìn)行組合匹配（這樣，導(dǎo)航條的后臺(tái)不需要特殊處理。。。）酷！
- p114 IE老版本不支持在非錨元素上使用:hover，可以用JS或.htc行動(dòng)文件啟用這個(gè)功能
- CSS圖像映照：用1個(gè)div包住img，設(shè)置其大小等于圖像并position:relative; 然后讓各個(gè)li元素相對(duì)div定位，用:hover顯示border線。。。
- p129 遠(yuǎn)距離翻轉(zhuǎn)：實(shí)際上很簡(jiǎn)單，讓錨元素包住1個(gè)div/span/li，然后用絕對(duì)定位把這些包括元素移動(dòng)到頁(yè)面其他位置，設(shè)置錨元素的:hover便可。
- p136 table元素border的2種模型：collapse|separate
- 表單元素
- fieldset：分塊標(biāo)題（Group Panel/Box）
- label的2種使用方式：嵌套包括input；使用for屬性關(guān)聯(lián)input（id）
- p153 ‘所有CSS布局的根本都是3個(gè)基本概念：定位、浮動(dòng)、margin操縱。’
- IE 6-不支持margin:auto; 榮幸的是，IE把text-align:center;誤解為讓所有東西居中，而不單單是文本（。。。）
- p159 在符合標(biāo)準(zhǔn)的閱讀器中，如果元素的內(nèi)容太大，它只會(huì)超越box以外。但是，IE會(huì)擴(kuò)大全部元素（。。。-_-）
- 3列布局：分解為2個(gè)嵌套的兩列布局？？？
- p164 流式布局：+ min-width！（哈哈，我覺(jué)得可以出1個(gè)在線的CSS考試系統(tǒng)了，題目就是精確到px的布局，要JS進(jìn)行檢驗(yàn)效果對(duì)不對(duì)。。。哈）
- p166 彈性布局：相對(duì)字號(hào)（em單位）布局（對(duì)支持頁(yè)面縮放的閱讀器而言沒(méi)有必要）
- body{font-size:62.5%;} 只以em為單位設(shè)置容器的寬度，內(nèi)部寬度依然使用%
- p170 faux列（略）
- bug與修復(fù)bug
- IE的‘具有布局’（hasLayout）
- 設(shè)置以下屬性會(huì)使元素具有布局：float、display:inline-block;、width/height、zoom、writing-mode:tb-rl;
- IE7中增加了：overflow、min-width:任何值、max-width:除none外任何值
- 例如：IE中文本段落具有布局，不會(huì)出現(xiàn)環(huán)繞float元素的效果
- 又如：IE 6-中，具有布局的元素會(huì)毛病地?cái)U(kuò)大以適應(yīng)內(nèi)容尺寸 ...
- hack和過(guò)濾器（略）
- IE 6-上的常見(jiàn)bug：
- 任何浮動(dòng)元素的margin加倍？？？改成display:inline;
- 3px文本偏移
- 1系列浮動(dòng)元素的最后元素的最后幾個(gè)字符重復(fù)：刪除注釋（。。。！）
- *IE6的‘peek-a-boo’bug
- *相對(duì)容器中的絕對(duì)定位（o, i c，shit）：.rel-container{height:1%;}
- 案例研究
- Roma Italia
- Cufon？用所選的字體顯示html，不需要任何圖像或@font-face（？？？）：所選字體的EULA必須允許在Web上進(jìn)行字體嵌入
- Climb the Mountains
- :first-child
- 組合class
生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
------分隔線----------------------------
------分隔線----------------------------
