離去是為了更好的開始，新的開始、新的工作馬上開始了。一直以來覺得在css上面根基不是很強大，打算花一周時間將《css禪意花園》《精通css網頁布局》重新總結一遍，主要將以前沒注意的東東做個筆記。
布局是需要縝密的結構分析和設計
第一天 css布局基礎
1）在html中匯入外部樣式表（兩種方法）
1-1)
1-2)
2) doctype(文件型別)與css的關係
其實doctype只是一組機器可讀規範，雖然中間包含了檔案的url，但瀏覽器不回去讀取這些檔案，僅用於識別，然後決定以什麼樣的規範去執行頁面中的**。
xhtml1.0提供了三種dtd宣告科選擇：
2-1) 過渡型 （transitional）：要求非常鬆散的dtd，使用者可繼續使用html 4.0.1 的標籤，但是要符合xhtml的寫法
>
2-2)嚴格型（strict）：不能使用任何表現層的標籤和屬性，如
2-3)框架型（frameset）：頁面中包含框架
一般採用過渡型，容易通過w3c驗證，努力目標為嚴格型。
3）選擇符
3-1)常見選擇
p //即選擇凡是設定了class屬性的div元素，再例如img[alt][title]{}// 即設定了alt和title的img元素
3-2-3-2)匹配屬性值選擇符：img[alt="影象"][title="影象"]
3-2-3-3)模糊匹配屬性值選擇符：類似於正規表示式的匹配模式，包含以下5種：
3-2-3-3-1)[|=]：連字元匹配，以連字元為分隔符，以匹配屬性值中區域性字串
[class|="blue"]{}
3-2-3-3-2)[~=]：空白符匹配，以空白符為分隔符，以匹配屬性值中區域性字串
[class~="blue"]{}
3-2-3-3-3)[^=]：字首匹配
[class^="red"]{}\
3-2-3-3-4)[$=]：字尾匹配
[class$="green"]{}\
3-2-3-3-5)[*=]：字串匹配，匹配屬性值存在的指定的字元
div [class*="gre"]{}
3-3)通配選擇符
margin:0;
padding:0;
3-4)偽類和偽元素選擇符：主要是針對一些特殊的元素，如a，body(first-leteer)
a:link
a:hover
a:visited
a:active
3-5)選擇符的巢狀
#wrap #header h2 span來保證所有字型為12px，但是瀏覽器對css的一些錯誤，如在ie6中table中的td也許不遵從12px,因此，常用
body,table,th,td來修補。
有些屬性，如果background-color無法繼承父類
4）css優先順序
4-1）css樣式表的優先順序
按照起源，css分為四種：html、作者、使用者、瀏覽器
原則上：作者定義有限與使用者設定，使用者設定優先於瀏覽器的預設樣式，而瀏覽器的預設樣式會優先於html的預設樣式。
4-2）css樣式的優先順序
一般來說，行內樣式會優先於內嵌樣式表，內部樣式表會優先於外部樣式表。而被附加了!important關鍵字的宣告會擁有最高的優先順序。
4-3）css選擇符優先順序
body div#box
#box
div.yellow
css選擇符優先順序
body div#box大於#box，大於div.yellow
如果是多特同型別的選擇符，則是按照其定義先後順序（與class中類的順序的順序無關），在後邊的具有優先權，例如如下div最終顯示的是
黃色
div2 div1" style="width:100px;height:100px">
css 樣式布局的問題
今天測試頁面，發現乙個奇怪的現象 乙個頁面在除了5s的所有手機上都顯示正常。而且chrome瀏覽器的適配機型裡面，也沒有5s之歌選項。導致我們現在才發現問題。具體問題表現為 頁面整體不能適配手機，雖然設定了寬度為100 整體頁面偏左，右邊留出15 左右的空白。但是乙個url破出頁面，佔據了整個螢幕。...
css3之布局相關的樣式
本篇主要講布局相關的樣式。1 多欄布局。在css3之前，若要實現分欄的效果，可以使用浮動 float 來實現。但是這樣會有乙個缺點就是，分欄時造成分欄的幾個欄不能對齊。而在css3中，可以通過column count屬性來進行多欄布局，這個屬性的含義是將乙個元素中的內容分成多欄進行顯示。使用方法 c...
HTML樣式布局css屬性之position定位
屬性 position 定位 上圖是官方的介紹，在實際使用的時候可以通過提示看到還有許多的值可選，例如 ms page ms device fixed webkit sticky initial sticky unset等。1 fixed 英譯 固定的 在官方的介紹中其位置是相對於瀏覽器視窗來定位的...