CSS選擇器主要包括id、類和標簽選擇器。復合選擇器是由兩個或多個基本選擇器以不同方式連接而成的選擇器。？
交集選擇器由三個直接相連的選擇器組成，第壹個必須是標簽選擇器，第二個必須是類別選擇器或id選擇器，兩個選擇器之間不能有空格。以這種方式構造的選擇器將選擇同時滿足before和after定義的元素。？
聯合選擇器由多個選擇器通過逗號連接而成。？
最常用的形式是通過嵌套，即多個選擇器之間用空格分隔的後代選擇器。
偽類選擇器
除了三種主要類型的選擇器之外，還有偽類選擇器和偽元素選擇器。？
偽類選擇器是在前壹個選擇器的基礎上，增加了壹些關鍵字來指定元素的狀態，比如鼠標位置、瀏覽歷史、內容狀態等等。偽類選擇器的標誌是:選擇器和關鍵字之間的間隔。
a:hover {背景:綠色；}
答:參觀過{顏色:綠色；}123456
偽元素選擇器的作用是在選擇壹個元素的基礎上，給文檔增加壹些額外的元素。偽元素的標誌是添加:
& ltp & gtisaboy & lt/p & gt；？p::之前{？內容:“sysuzhyupeng”；？}1234
before選擇器會將內容屬性中的文本插入到段落之前，因此該段落將顯示為“sysuzhyupengisaboy”。
CSS堆疊
CSS級聯是指在CSS繼承的基礎上解決沖突。級聯的規則涉及到權重的計算，這裏就不詳細展開了。
CSS禪宗花園
CSS Zen Garden由加拿大設計師DaveShea創立。在網站設計的過程中，他發現CSS的巨大潛力沒有被發掘出來，就用征集作品的方式來展現CSS的魅力。比如兩欄布局的代表作是《國家》，三欄布局的代表作是第193號，三欄布局的變奏曲是《荷花池》，多欄布局的代表作是《郁金香》，圓角設計是《日夜》。
箱狀模式
在CSS中，壹個獨立的框由內容、填充、邊距和邊框組成。壹個盒子所占的寬度和高度是盒子四部分的總和。？
壹個頁面由很多框組成，這些框會相互影響。所以要掌握盒子模型，需要了解壹個孤立盒子的內部結構，以及多個盒子之間的關系。？
盒子模型分為IE盒子模型和w3c盒子模型。IE盒子模型的寬度包括盒子的填充和邊框，而w3c的寬度只包括盒子內容的寬度。「標準w3c盒子模型」的選擇是什麽？很簡單，就是在頁面頂部添加壹個doctype聲明。如果不添加doctype語句，那麽每個瀏覽器都會根據自己的行為來理解網頁，即IE瀏覽器會用IE box模型來解釋妳的box，而ff會用標準的w3c box模型來解釋妳的box。如果妳添加了doctype語句，那麽所有的瀏覽器都會使用標準的w3c box模型來解釋妳的box。？
邊框用於分隔不同的元素，計算精細布局時必須考慮邊框的寬度。邊框有三個屬性，即邊框顏色、邊框寬度和邊框樣式。給元素設置背景色時，IE的範圍是填充+內容，而Firefox是填充+內容+邊框。當border設置為dotted(dotted之間的間隙顯示背景色)時，這壹點更加明顯。？
為了方便地組織各種盒子的排列和布局，CSS規範的說明符做了深入細致的考慮。CSS規範的思路是先確定壹個標準的排版方式，這樣可以保證設置的簡化。這是標準流。但是很多格式僅靠標準流是無法實現的，所以CSS規範給出了浮動屬性和定位屬性。？
& ltspan & gt和
要想精確控制盒子的位置，就必須對邊距有更深的理解，因為填充存在於盒子內部，通常不涉及盒子之間的關系和交互。當壹行中的兩個元素相鄰時，它們之間的距離是第壹個框的右邊距加上第二個框的左邊距。但是，如果不是行內元素，而是垂直的塊級元素，則外部邊距將合並，較小的邊距將折疊到較大的邊距中。要解決這個問題，請參考我的另壹篇博文《BFC？
Margin也可以設置為負值，這會使盒子向相反的方向移動，甚至覆蓋另壹個盒子。當塊具有父子關系時，子塊可以從父塊中分離出來。
盒子的浮動和定位
在標準流中，沒有指定寬度的塊級元素將在水平方向無限延伸，直到到達包含它的元素的邊界。CSS中有壹個屬性float，默認值是none。如果float的值設置為left或right，則不會擴展框的寬度，而是根據框中內容的寬度來確定。當兩個元素分別向左向右浮動時(box1向右浮動，box2向左浮動)，我們發現可以通過CSS布局調整內容的顯示位置，而不需要調整HTML (box2在box1的左邊)。這樣在編寫HTML的時候，我們就可以確定內容的邏輯位置，確定內容在CSS中的顯示位置，把重要的內容放在邏輯位置的前面，這樣在加載網頁的時候，用戶就會先看到重要的內容。？
使用clear屬性移除浮動的影響。如果不希望文本浮動在左邊的框周圍，可以在文本的P標簽中設置clear:left。clear屬性可以設置為left、right和both(both通常用於清除整行元素的浮動)。？
CSS中有四個位置值:
靜態，默認值，根據標準流程(包括浮動)對框進行布局。
相對，盒子相對於它的原始標準移動，相對定位的盒子仍然在標準流中。
絕對，絕對定位，框基於其包含框偏移，絕對定位框與文檔流分離。
固定，固定定位，類似於絕對定位，只是包含框變成了瀏覽器窗口。
確定絕對包含框有幾個原則:
位置屬性已經設置，並且不是靜態的。所以經常會出現父元素相對定位，絕對定位或者固定，而子元素絕對定位的情況。
就是從子元素中找到祖先元素中滿足前面規則的第壹個元素。
IE6有壹個固有的錯誤。相對於父元素左側的絕對定位將添加父元素的填充。這時候就需要給父元素增加壹個屬性height:1%。
瀏覽器漏洞和黑客
任何程序都很難清除所有的bug，瀏覽器也是如此。再加上規範解釋不統壹，所以類似的錯誤壹直存在。所以出現了很多CSS hack來解決這些bug，而且大部分CSS hack都是用來解決IE5.5以下的瀏覽器的，因為瀏覽器的支持，網站分為漸進增強和優雅退化兩種開發方式。
z指數
Z-index用於設置重疊塊的上下位置。如其名，假設頁面是x-y軸，垂直於頁面的方向是Z軸。當兩個塊的z索引值相同時，它們以原始方式堆疊。z-index的默認值為0，可以設置正值和負值。
腳本
？p{？字體系列:Arial，“TimesNewRoman”；？}123上面的語句同時聲明了兩個字體名稱。如果用戶的計算機沒有第壹種類型，將使用第二種類型。有些字體的名稱中包含空格，所以需要用引號括起來。？
文本大小的常用單位是px，表示瀏覽器中壹個像素單位的大小。因為參觀者顯示器的分辨率不壹樣，每個像素的實際大小也不壹樣，所以px其實是壹個相對的單位。現在我們經常以rem為單位來適配屏幕布局。？
字體的行高行高可以設置為字體大小的比例。
顏色
在HTML頁面中，顏色是RGB格式的。由不同比例的三原色組成，壹* * *有0-255個等級。當三種顏色都設置為255時，就是白色，其中FFFFFF是十六進制表示，前兩個是紅色分量，接下來是綠色，最後是藍色。不僅可以寫成十進制，還可以寫成rgb的百分比(0%，0%，0%)或0-255的十進制數。
魚片
壹個大小為150px150px的正方形，設置其四個角的半徑為50%。根據W3Cborder-radius的標準定義，如果border-radius的值是壹個百分比，則它是相對於borderbox的寬度和高度的百分比。在我們的例子中，盒子的寬度和高度都是150px，所以50%對應75px。？
也就是說，將border-radius設置為50%可以實現圓角效果，但設置為100%會損失性能。有關詳細信息，請參考邊界半徑50%和100%之間的差異。
CSS3動畫
CSS3動畫主要通過過渡和動畫實現，其中過渡是為頁面元素設置壹些需要生成動畫效果的屬性，比如寬度、高度、透明度甚至3D旋轉，並使這些值在變化時產生相應的過渡效果。動畫可以預先為動畫設置多個節點，每個節點包含不同的狀態屬性，比轉場更細致。
？壹個{？顏色:fff？}a:懸停{？顏色:綠色；？}
壹個{？-WebKit-transition:all . 5s；？過渡:all . 5s；？}12345678910
這裏我們設置all，即A標簽的任何屬性變化都以動畫的形式呈現，動畫時間為0.5秒。我們還可以設置轉場效果的速度變化(加速度)。除了線性和緩，還有緩進、緩出、緩出等速度曲線，分別代表慢起、慢終和慢起慢終。
？壹個{？-WebKit-transition:all . 5s liner；？過渡:all . 5s linear；？1234我們還可以設置動畫的延遲時間，放在最後壹個參數裏。
？壹個{？過渡:color.5slinear，background . 5s ease-in-out 1s；？}123我們還可以使用偽元素來實現壹些動畫效果。這裏需要註意的是，偽元素的懸停狀態是:hover::after，而不是::after:hover(這個問題不用在少考慮)。
？答:懸停{？左填充:20px？}a:hover::after{？右:5%；？}123456
通過CSS3可以實現很多動畫效果，比如滑動屏幕(切換左值)，或者縮放頁面並使用transform屬性中的scale方法。
？。內容{？-WebKit-transform:scale(1，1)；？transform:scale(1，1)；？}.content.move{？-webkit-transform:scale(0，0)；？transform:scale(0，0)；？}
希望能幫到妳。