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.行內框與一個浮動元素重疊時,其邊框,背景和內容都在該浮動元素"之上"顯示 2.塊框與一個浮動元素重疊時,其邊框和背景在該浮動元素"之下"顯示,而內容在浮動元素"之上"顯示
清除浮動: 1.浮動元素的後面一個元素新增clear:both 2.浮動元素的父元素新增overflow:hidden 3.clearfix
2.定位position static 元素框正常生成。塊級元素生成一個矩形框,作為文件流的一部分,行內元素則會建立一個或多個行框,置於其父元素中。 relative 元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所佔的空間仍保留。 absolute 元素框從文件流完全刪除,並相對於其包含塊定位,包含塊可能是文件中的另一個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉,就好像該元素原來不存在一樣。元素定位後生成一個塊級框,而不論原來它在正常流中生成何種型別的框。 fixed 元素框的表現類似於將position設定為absolute,不過其包含塊是視窗本身。
元素的可見性: visibility:hidden會置為不可見,處於不可見狀態時,元素還是會影響文件的佈局。元素還在那,只是你看不見它。 而display:none,元素不僅不顯示,還會從文件中刪除,所有對文件佈局沒有任何影響。