1. 程式人生 > >css基礎---第二篇

css基礎---第二篇

上一篇: http://blog.csdn.net/u011344924/article/details/48784141


一、特殊性,繼承和層疊

1.特殊性

選擇器的特殊性由選擇器本身的元件確定,特殊性值表述為4個部分,如:0,0,0,0

對於選擇器中給定的各個ID屬性值,加0,1,0,0

對於選擇器中給定的各個類屬性值,屬性選擇或偽類,加0,0,1,0

對於選擇器中給定的各個元素和偽元素,加0,0,0,1

結合符和通配選擇器對特殊性沒有任何貢獻

重要宣告 !important標誌為重要,!important總是放在宣告的最後,即分號前面。如果放錯位置,整個宣告都將無效。

所以優先順序為 !important > 內聯宣告 > ID > class > 元素 > 通配



2.繼承

樣式不僅應用到指定的元素,還會應用到它的後代元素。當然並不是所有屬性都可以繼承。

一般地,大多數框模型屬性(包括外邊距,內邊距,背景和邊框)都不能繼承。


3.層疊

按權重和來源排序:讀者的重要宣告>創作人員的重要宣告>創作人員的正常宣告>讀者的正常宣告>使用者代理宣告

按特殊性排序:如果權重相同則按特殊性排序,最特殊的宣告最優先

按順序排序:如果權重,來源,特殊性完全相同,那麼在樣式表中後出現的一個會勝出


二、文字屬性

text-indent文字縮排:元素的第一行縮排一個給定長度,一般用於塊級元素。該屬性可以繼承

text-align水平對齊:只用於塊級元素,用於設定元素中的文字行相互間的對齊方式。

line-height行高:指定文字行之間的垂直間隔。該值從父元素繼承時,要從父元素計算,而不是在子元素上計算。使用line-height縮放因子解決繼承問題。

vertical-align垂直對齊:基線,上標下標,底端,頂端,居中,百分數,長度

word-spacing字間隔:修改字間間隔

letter-spacing字母間隔:修改字母間隔

text-transform文字轉換:capitalize對每個單詞首字母大寫,uppercase,lowercase,none

text-decoration文字裝飾:該屬性不能繼承

text-shadow文字陰影

white-space處理空白符

direction文字方向:ltr,rtl,inherit


三、視覺模型

1.基本框

盒子模型的寬度為:content+padding+border+margin

設定一個元素的寬width一般為設定content的大小

auto只能用來設定margin,width和height的值,可以用auto彌補實際值與所需總和的差距。

如果兩個外邊距都設定為auto,則會將它們設定為相等的長度,因此將元素在其父元素中居中(width=?px;margin-left:auto;margin-right:auto)

(text-align只應用於塊級元素的內聯內容)



可以看出,text-align:center居中與margin:0 auto居中的差異。margin:0 auto居中主要是將整個塊級元素在其父元素中的居中,而text-align:center居中主要是將塊級元素中的內容在改元素中居中顯示。

合併垂直外邊距:相鄰外邊距會沿著豎軸合併,即兩個外邊距中較小的一個會被較大的一個合併

如果一個邊框沒有樣式,就沒有寬度。如果要建立一個不可見的邊框,就引入邊框顏色值transparent,這個值用於建立有寬度的不可見的邊框。


四、浮動和定位 1、浮動: 浮動元素的包含塊是其最近的塊級祖先元素。 浮動元素會生成一個塊級框,而不論這個元素本身是什麼。 特定規則控制著浮動元素的擺放:     1.浮動元素的左(或右)外邊界不能超出其包含塊的左(或右)內邊界。     2.浮動元素的左(或右)外邊界必須是源文件中之前出現的左浮動(或右浮動)元素的右(左)外邊界,除非後出現的浮動元素的頂端在先出現浮動元素的底端下面。     3.左浮動元素的右外邊界不會再其右邊右浮動元素的左外邊界的右邊。一個右浮動元素的左外邊界不會在其左邊任何左浮動元素的右外邊界的左邊。     這條規則可以防止浮動元素的相互重疊。     4.一個浮動元素的頂端不能比其父元素的內頂端更高。如果一個浮動元素在兩個合併外邊距之間,放置這個浮動元素時就好像在兩個元素之間有一個塊級父元素。     5.浮動元素的頂端不能比之前所有浮動元素或塊級元素的頂端更高。     6.如果源文件中一個浮動元素之前出現另一個元素,浮動元素的頂端不能比包含該元素所生成框的任何行框的頂端更高。     限制了元素的向上浮動。     7.左(或右)浮動元素的左邊(右邊)有另一個浮動元素,前者的右外邊界不能在其包含塊的右(左)邊界的右邊(左邊)。     8.滿足其他約束條件下的前提下,浮動元素必須儘可能高地放置。     9.左浮動元素必須向左儘可能遠,右浮動元素則必須向右儘可能遠。位置越高,就會向右或向左浮動得越遠。
當浮動元素與正常流中內容重疊時規則:     1.行內框與一個浮動元素重疊時,其邊框,背景和內容都在該浮動元素"之上"顯示     2.塊框與一個浮動元素重疊時,其邊框和背景在該浮動元素"之下"顯示,而內容在浮動元素"之上"顯示
清除浮動:     1.浮動元素的後面一個元素新增clear:both     2.浮動元素的父元素新增overflow:hidden     3.clearfix
2.定位position static 元素框正常生成。塊級元素生成一個矩形框,作為文件流的一部分,行內元素則會建立一個或多個行框,置於其父元素中。 relative 元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所佔的空間仍保留。 absolute 元素框從文件流完全刪除,並相對於其包含塊定位,包含塊可能是文件中的另一個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉,就好像該元素原來不存在一樣。元素定位後生成一個塊級框,而不論原來它在正常流中生成何種型別的框。 fixed 元素框的表現類似於將position設定為absolute,不過其包含塊是視窗本身。
元素的可見性: visibility:hidden會置為不可見,處於不可見狀態時,元素還是會影響文件的佈局。元素還在那,只是你看不見它。 而display:none,元素不僅不顯示,還會從文件中刪除,所有對文件佈局沒有任何影響。