1.HTML微格式

由于HTML中缺少相應(yīng)的元素琳彩，很難突出顯示人汛兜、地點(diǎn)或日期等類型的信息躲查。為了解決這個問題友存，有一組開發(fā)人員決定開發(fā)一套標(biāo)準(zhǔn)的命名約定和標(biāo)記模式來表示這些數(shù)據(jù)。這些命名約定基于vCard和iCalendar等現(xiàn)有的數(shù)據(jù)格式斋扰，現(xiàn)在成為微格式(microformat)。舉例如下（代碼采用hCard格式）：

<div class="vcard">
  <p><a class="url fn" >Andy Budd</a>
    <span class="org">Clearleft Ltd</span>
    <a class="email" href="mailto:info@andybudd.com"></a>
  </p>
  <p class="adr">
    <span class="locality">Brighton</span>
    <span class="country-name">England</span>
  </p>
</div>

微格式讓我們可以以一種特定的方式標(biāo)記數(shù)據(jù)，讓其他程序和服務(wù)可以訪問它杂靶。
當(dāng)前有9個正式的微格式，還有14個格式草案酱鸭，包括：

• 用于日期吗垮、日歷和事件的hCalendar
• 用于人和組織的hCard
• 用于人之間關(guān)系的XFN
• 用于產(chǎn)品說明的hProduct（草案）
• 用于原料和烹調(diào)步驟的hPecipe（草案）
• 用于產(chǎn)品和事件審查的hReview（草案）
• 用于博客帖子等片段式內(nèi)容的hAtom（草案）

2.html代碼驗(yàn)證

W3C驗(yàn)證地址：http://validator.w3.org/
也可以使用游覽器書簽的方法，驗(yàn)證器bookmarklet凹髓，這是一小段JavaScript代碼烁登；
也可以使用游覽器插件。

3.偽類的連接

通過把偽類連接在一起蔚舀，可以創(chuàng)建更復(fù)雜的行為饵沧，比如在已訪問鏈接的未訪問鏈接上實(shí)現(xiàn)不同的鼠標(biāo)懸停效果：

a:visited:hover { color:olive;}

4.子選擇器和相鄰?fù)x擇器在IE7中的小bug

在IE7中，如果父元素和子元素之間有HTML注釋赌躺，就會出問題狼牺。

5.注釋技巧

當(dāng)文件內(nèi)容過長，尋找特定內(nèi)容會很困難礼患。一種改進(jìn)方法是在每個注釋頭中添加一個標(biāo)志是钥。這個標(biāo)志僅僅是頭文本前面的一個額外字符掠归，一般不會出現(xiàn)在文件中。搜索這個標(biāo)志和注釋頭中的前幾個字母悄泥，就可以立即找到要尋找的文件部分虏冻。所以，在實(shí)例中弹囚，搜索 “@group” 就會立即找到文件中的相關(guān)部分厨相。

/* @group typography */

6.刪除注釋

注釋會使CSS文件顯著加大。因此余寥，你可能需要從樣式表中去掉一些注釋领铐。可以使用一些在線的CSS優(yōu)化器宋舷，不但能夠刪除注釋绪撵，還可以刪除空白，這可以從代碼中去掉額外的字節(jié)祝蝠。
減小文件大小的最好方法可能是啟用服務(wù)器壓縮音诈。如果使用Apache服務(wù)器，那么應(yīng)該安裝mod_gzip或mod_deflate绎狭。所有現(xiàn)代游覽器都可以處理用GZIP壓縮的文件并進(jìn)行即時(shí)解壓细溅。這能夠?qū)TML和CSS文件減小大約80%，這可以減少對帶寬的占用儡嘶，大大加快頁面的下載速度喇聊。

7.CSS2.1的outline屬性

CSS2.1包含<code>outline</code> 屬性。與<code>border</code> 屬性不同蹦狂，輪廓繪制在元素框之上誓篱，所以他們不影響元素的大小或定位。因此凯楔，輪廓有助于修復(fù)bug窜骄，因?yàn)樗鼈儾挥绊戫撁娴牟季郑蠖鄶?shù)現(xiàn)代游覽器（包括IE8）支持輪廓摆屯，但是IE7和更低版本不支持輪廓邻遏。

8.外邊距疊加

當(dāng)兩個或更多垂直外邊距相遇時(shí)，它們將形成一個外邊框虐骑。這個外邊框的高度等于兩個發(fā)生疊加的外邊距的高度中的較大者准验。
1.當(dāng)一個元素出現(xiàn)在另一個元素上面時(shí)，第一個元素的底外邊距與第二個元素的頂外邊距發(fā)生疊加廷没。

情況1

2.當(dāng)一個元素包含在另一個元素中時(shí)（假設(shè)沒有內(nèi)邊距或邊框?qū)⑼膺吘喾指糸_）糊饱，他們的頂或底外邊距也會發(fā)生疊加。

情況2

3.外邊距本身也會發(fā)生疊加腕柜。假如有一個空元素济似，他有外邊距矫废，但是沒有邊框或內(nèi)邊距。在這種情況下砰蠢，頂外邊距和底外邊距就碰到了一起蓖扑，它們會發(fā)生疊加。

情況3

4.如果情況3的外邊距碰到另一個元素的外邊距台舱，它還會發(fā)生疊加律杠。

情況4

只有在普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距疊加。行內(nèi)框竞惋、浮動框或絕對定位框之間的外邊距不會疊加柜去。

9.可視化格式模型

CSS中有3中基本的定位機(jī)制：普通流、浮動和絕對定位拆宛。除非專門指定嗓奢，否則所有框都在普通流中定位。顧名思義浑厚，普通流中元素框的位置由元素在HTML中的位置決定股耽。

1. 普通流：
   塊級框從上到下一個接一個地垂直排列，框之間的垂直距離由框的垂直外邊距計(jì)算出來钳幅。
   行內(nèi)框在一行中水平排列物蝙。可以使用水平內(nèi)邊距敢艰、邊框和外邊距調(diào)整它們的水平間距诬乞。但是，垂直內(nèi)邊距钠导、邊框和外邊距不影響行內(nèi)框的高度震嫉。同樣，在行內(nèi)框上設(shè)置顯式的高度或者寬度也沒有影響辈双。由一行形成的水平框稱為 行框责掏，行框的高度總是足以容納它包含的所有行內(nèi)框柜砾。但是湃望，設(shè)置行高可以增加這個框的高度。因此痰驱，修改行內(nèi)框尺寸的唯一方法是修改行高或者水平邊框证芭、內(nèi)邊框或外邊距。

2. 相對定位：
   如果對一個元素進(jìn)行相對定位担映，它將出現(xiàn)它所在的位置上废士。然后，可以通過設(shè)置垂直或水平位置蝇完，讓這個元素“相對于”它的起點(diǎn)移動官硝。
   在使用相對定位時(shí)矗蕊，無論是否移動，元素仍然占據(jù)原來的空間氢架。因此傻咖，移動元素會導(dǎo)致它覆蓋其他框。

3. 絕對定位：
   相對定位實(shí)際上被看做普通流定位模型的一部分岖研，因?yàn)樵氐奈恢檬窍鄬τ谒谄胀髦械奈恢玫那洳佟Ｅc之相反，絕對定位使元素的位置與文檔流無關(guān)孙援，因此不占據(jù)空間害淤。普通文檔流中其他元素的布局就像絕對定位元素不存在一樣。
   因?yàn)榻^對定位與文檔流無關(guān)拓售，所以它們可以覆蓋頁面上的其他元素窥摄。可以通過設(shè)置<code>z-index</code> 屬性來控制這些框的疊放次序础淤。<code>z-index</code> 值越高溪王，框在棧中的位置就越高。

4. 固定定位：
   固定定位是絕對定位的一種值骇。差異在于固定元素的包含塊是視口（<code>viewport</code>）莹菱。這使我們能夠創(chuàng)建總是出現(xiàn)在窗口中相同位置的浮動元素。

5. 浮動：

10.背景圖像效果

設(shè)置背景圖像位置時(shí)吱瘩，可以使用像素?cái)?shù)道伟，也可以使用百分?jǐn)?shù)。百分?jǐn)?shù)定位并不對背景圖像的左上角進(jìn)行定位使碾，而是使用圖像上的一個對應(yīng)點(diǎn)蜜徽。如果指定垂直和水平位置都是20%，那么實(shí)際上是在將圖像上距離左上角20%的點(diǎn)定位到父元素上距離左上角20%的位置票摇，如圖：

背景圖像的定位

1. 圓角框--滑動門技術(shù)(sliding doors technique)
2. 圓角框--山頂角(mountaintop corner)

11.CSS縮放視差效果

利用多層背景圖像百分比定位拘鞋。

12.為目標(biāo)鏈接設(shè)置樣式

除了鏈接到特定的文檔之外，還可以使用包含片段標(biāo)識符的鏈接鏈接到頁面的特性部分矢门，實(shí)現(xiàn)的方式實(shí)在 href 的末尾加上一個 ＃ 字符盆色，然后加上要鏈接的元素ID。
該跳轉(zhuǎn)到的元素可以設(shè)置樣式祟剔，以便于看到跳轉(zhuǎn)的位置隔躲。

.comment:target { background: red;}

13.使用a標(biāo)簽制作按鈕時(shí)注意點(diǎn)

如果使用這種技術(shù)，那么要確保元素是真正的鏈接物延，而不是更新服務(wù)器宣旱。否則，可能會出現(xiàn)意外的結(jié)果叛薯。在Google加速程序啟動時(shí)浑吟，人們發(fā)現(xiàn)CMS或Web應(yīng)用程序中的內(nèi)容神秘地消失了笙纤。有時(shí)候，站點(diǎn)的全部內(nèi)容在一夜之間就消失了组力。這是因?yàn)檫@些工具的開發(fā)人員使用錨鏈接而不是用表單元素作為刪除按鈕粪糙。Google加速程序會訪問這些鏈接以便緩存它們，這樣就會無意間刪除內(nèi)容忿项！搜索引擎的spider可以造成相同的結(jié)果蓉冈，遞歸地刪除大量數(shù)據(jù)。因此轩触，決不要使用鏈接更新服務(wù)器寞酿。或者用技術(shù)術(shù)語來說脱柱，鏈接應(yīng)該只用于GET請求伐弹，決不要用于POST請求。

14.表格特有的元素

<code>caption</code>：它基本上用作表格的標(biāo)題
<code>summary</code>：可以用于表格標(biāo)簽榨为，用來描述表格的內(nèi)容惨好，與圖像的alt文本相似，summary應(yīng)該總結(jié)表格中的數(shù)據(jù)随闺。

15.表格盒模型

CSS規(guī)范有兩個表格邊框模型：單獨(dú)的和疊加的日川。
在單獨(dú)模型中，在各個單元格周圍有邊框矩乐，而在疊加模型中龄句，單元格共享邊框。大多數(shù)瀏覽器默認(rèn)采用單獨(dú)模型散罕，但是我個人認(rèn)為疊加模型更有用分歇。因此，通常要做的一件事就是將表格的<code>border-collapse</code> 屬性設(shè)置為<code>collapse</code>欧漱。

16.流式布局

在使用流式布局時(shí)职抡，尺寸是用百分?jǐn)?shù)而不是像素設(shè)置的。這使流式布局能夠相對于游覽器窗口進(jìn)行伸縮误甚。隨著游覽器窗口變大缚甩，列也會變寬。相反靶草，隨著窗口變小蹄胰，列的寬度也減小岳遥。流式布局可以非常高效地使用空間奕翔。最好的流式布局甚至不會引起用戶的注意。
但是浩蓉，流式布局也不是沒有問題的派继。在窗口寬度較小的時(shí)候宾袜，行變得非常窄，很難閱讀驾窟。在多列布局中尤其如此庆猫。因此，有必要添加以像素或em為單位的<code>min-width</code>绅络，從而防止布局變得太窄月培。但是，如果<code>min-width</code>設(shè)置得太大恩急，流式設(shè)計(jì)也會遇到與固定寬度布局相似的限制杉畜。
與之相反，如果設(shè)計(jì)橫跨游覽器窗口整個衷恭，那么行就變得太長此叠，也很難閱讀∷嬷椋可以采取幾個措施避免這個問題灭袁。首先，不要橫跨游覽器而是讓容器之跨越寬度的一部分窗看，比如85%茸歧。還可以考慮用百分?jǐn)?shù)設(shè)置外邊距和內(nèi)邊距。這樣的話显沈，內(nèi)邊距和外邊距的寬度將會隨著窗口尺寸而變举娩，可以防止列太快地變得過寬。最后构罗，對于非常嚴(yán)重的情況铜涉，也可以選擇為容器設(shè)置最大寬度，以防止內(nèi)容在大顯示器上變得過寬遂唧。

17.彈性布局

雖然流式布局可以充分利用可用空間芙代，但是在大分辨率顯示器上，行仍然會過長盖彭，讓用戶不舒服纹烹。相反，在窄窗口中或者增加文本字號時(shí)召边，行會變得非常短铺呵，內(nèi)容很零碎。對于這個問題隧熙，彈性布局可能是一種解決方案片挂。
彈性布局相對于字號（而不是游覽器寬度）來設(shè)置元素的寬度。以em為單位設(shè)置寬度，可以確保在字號增加時(shí)整個布局隨之?dāng)U大音念。這可以將行長保持在可閱讀的范圍沪饺，對于視力弱或有認(rèn)知障礙的人尤其有用。
與其他布局技術(shù)一樣闷愤，彈性布局也有自己的問題整葡。彈性布局的一些問題與固定寬度布局相同，比如不能充分利用可用空間讥脐。另外遭居，因?yàn)樽痔栐黾訒r(shí)整個布局會加大，所以彈性布局會變得比游覽器窗口寬旬渠，導(dǎo)致水平滾動條出現(xiàn)魏滚。為了防止這種情況，可能需要在容器div上添加100%的<code>max-width</code>坟漱。IE6和更低版本不支持<code>max-width</code>鼠次，但是較新的版本都支持它。如果要在IE6中支持<code>max-width</code>芋齿，可以使用JavaScript腥寇。

18.hasLayout

IE游覽器bug多問題的原因之一是，顯示引擎使用一個稱為布局（hasLayout）的內(nèi)部概念觅捆。布局問題是許多IE/Win顯示bug的根源赦役，所以理解這個概念以及它如何影響CSS是有幫助的。
Windows上的IE使用布局概念來控制元素的尺寸和定位栅炒。那些“擁有布局”的元素負(fù)責(zé)本身及其子元素的尺寸設(shè)置和定位掂摔。如果一個元素“沒有擁有不布局”，那么它的尺寸和位置由最近的擁有布局的祖先元素控制赢赊。

在默認(rèn)情況下?lián)碛胁季值脑匕?/p>

• body
• html(標(biāo)準(zhǔn)模式中)
• table
• tr乙漓、td
• img
• hr
• input、select释移、textarea叭披、button
• iframe、embed玩讳、object涩蜘、applet
• marguee

布局概念是Windows上的IE特有的，而且它不是CSS屬性熏纯。盡管設(shè)置某些CSS屬性會使元素?fù)碛胁季滞耄窃贑SS中無法顯示地設(shè)置布局≌晾剑可以使用JavaScript函數(shù) hasLayout查看一個元素是否擁有布局误窖。如果元素?fù)碛胁季侄Ｅ蹋@個函數(shù)就返回ture，否則返回false贩猎。hasLayout是一個只讀屬性熊户，所以無法使用JavaScript進(jìn)行設(shè)置萍膛。

設(shè)置以下CSS屬性會自動地使元素?fù)碛胁季?/p>

• float: left 或 right
• display: inline-block
• width: 任何值
• height: 任何值
• zoom: 任何值(Microsoft屬性-不能通過檢驗(yàn))
• writing-mode: tb-rl(Microsoft屬性-不能通過檢驗(yàn))

在IE7中吭服，以下屬性也成了布局觸發(fā)器

• overflow: hidden、scroll 或 auto
• min-width: 任何值
• max-width: 除none之外的任何值

布局會出現(xiàn)的問題

• 擁有布局的元素不會收縮
• 布局元素對浮動進(jìn)行自動清理
• 相對定位的元素沒有布局
• 在擁有布局的元素之間外邊距不疊加
• 在沒有布局的塊級鏈接上蝗罗，單擊區(qū)域只覆蓋文本
• 在滾動時(shí)艇棕，列表項(xiàng)上的背景圖像間歇性的顯示和消失

19.兼容性修復(fù)的方法

1. IE條件注釋
   條件注釋是一種專有的對常規(guī)HTML注釋的Microsoft擴(kuò)展。條件注釋在其他所有游覽器看來是常規(guī)注釋串塑，因此本質(zhì)上是無害的沼琉。因此條件注釋通常被看做處理IE特有的bug的最好的方法。條件注釋在Windows上的IE5中首次出現(xiàn)桩匪，并且得到了Windows游覽器的所有后續(xù)版本的支持打瘪。

   //將特定的樣式表提供給IE5和更高的所有版本，那么可以在HTML文檔的開頭放置以下代碼
   <!-- [if IE]
      <link red="stylesheet" type="text/css" href="/css/ie.css">
   -->
   

   //將特定的樣式表提供給IE6
   <!-- [if IE 6]
      <link red="stylesheet" type="text/css" href="/css/ie.css">
   -->
   

   ?``` HTML
   //將特定的樣式表提供給一組游覽器傻昙，比如IE5和IE5.5
   <!-- [if lt IE 6]
     <link red="stylesheet" type="text/css" href="/css/ie.css">
   -->
   

2. IE for Mac 帶通過濾器
3. 應(yīng)用星號 HTML hack
   最著名闺骚、最有用的CSS過濾器之一是星號HTML hack。這個過濾器非常容易記住妆档，它針對IE6和更低版本僻爽。正如你知道的，HTML元素被認(rèn)為是網(wǎng)頁上的第一個元素（即根元素）贾惦。但是胸梆，IE的老版本有一個匿名的根元素，它包圍著HTML元素须板，可以使用通用選擇器指定包圍在另一個元素中的HTML元素碰镜。因?yàn)檫@種情況只在IE6和更低版本中出現(xiàn)，所以可以將特定的規(guī)則應(yīng)用于這些游覽器习瑰。

   <code>* html {
     width: 1px;
   }</code>
   

4. 應(yīng)用于子選擇器的hack
   如果希望創(chuàng)建會被IE的老版本忽略的規(guī)則洋措，不需要顯式地指定這些游覽器〗芄簦可以使用子選擇器hack菠发。這種技術(shù)實(shí)際上不是hack，他只是使用了IE老版本不理解而現(xiàn)代游覽器能夠理解的選擇器贺嫂。
   在這個示例中滓鸠，使用子選擇器hack對Windows上的IE6和IE6隱藏透明的背景PNG圖像。

   html>body {
       background-image: url(bg.png);
   }
   

20.常見bug及其修復(fù)方法

1. 雙外邊距浮動bug
2. 3像素文本偏移bug
3. IE6的重復(fù)字符bug
4. IE6的“藏貓貓”bug
5. 相對容器中的絕對定位

21.text-overflow

如果文本太長第喳，在包含它的元素中放不下糜俗，text-overflow會裁斷它。使用ellipsis值在被截?cái)嗟奈谋竞竺婕由鲜÷蕴枺?..）。