CSS手記(二)

通常情況下,直接指定的樣式總是優先於繼承的樣式,但是通過使用inherit可以把情況反過來。


font-size繼承的值是數值而不是百分數


font-variant 的small-caps,文本源中出現大寫字母,就顯示一個更大的大寫字母,如果出現小寫字母,就出現一個小一些的大寫字母。


text-indent 文本縮進 該屬性可以繼承


text-align只能應用於塊級元素(如段落),所以無法將行內的一個錨矩陣而不影響其它部分。

text-align隻影響內部內容,而不影響控制元素的對齊


line-height屬性是指文本行極限直接的距離,line-height值與字體大小之差就是行間距

line-height減去字體大小除以2就是到內容頂部和底部的距離


line-height值從父屬性上繼承時,要從父屬性計算,而不是在子元素上計算

如果指定一個數,那麼是繼承這個數,而不是計算值


vertical-align只能用於行內元素和替換元素,如圖像或表單輸入元素,該屬性不能繼承,若爲一個數值則向上移動該數值


所有垂直對其的元素都會影響行高,行框要足以包含最高行內框的頂端和最低行內框的底端。


word-spacing子元素會繼承父元素的計算值


在一個元素上使用text-deciration設置顏色,則整個元素都有一致的元素裝飾,就算子元素不同。如果修改,只能顯式設置。


基本視覺格式化

要讓一個元素脫離正常的文檔流,只能將其設置爲浮動或定位元素

一個正常流中塊級元素框的水平部分綜合就等於父元素的width

若margin-left,width,margin-right都設置值,則margin-right則變爲auto
若marigin-left和margin-right都爲auto,則元素居中(這不同於text-align,text-align只對塊級元素的內聯元素有效)
若三個值都爲auto,則兩個margin都爲0,width會儘可能寬

由於水平外邊距不會合並,父元素的內邊距、 邊距和外邊距可能影響子元素

替換元素的width若爲auto,則元素寬度爲內容固有寬度


如果替換元素的width不同於其固有快讀,那麼height值也會成比例變化,除非height自己也顯式設置一個值,height同理。

width和height都是內容區的高度和寬度,而不是可見元素框的高度和寬度。


正常流中一個塊元素的margin-top和margin-bottom設置爲auto,則自動重置爲0.


如果height設置了一個百分數,則該值是包含塊height的一個百分數


垂直格式化的外邊距和進行相鄰合併,以大者爲準

如果垂直外邊距都爲負值,則瀏覽器會取兩個外邊距絕對值的最大值,如果一正一負,則會用正外邊距減去負外邊距。


列表項出現的標誌實際上不是內容區的一部分


多行行內元素不是每一行都達到父段落的邊界。


對於非替換行內元素,其高度爲line-height,對於替換元素,元素行內框的高度恰好等於內容區的高度。


line-height是相對於元素本身的font-size設置的,而不是相對於父元素。


行內元素的邊框邊界由font-size而不是line-height控制。

外邊距不會應用到行內元素(首尾兩行除外)


儘管內外邊距不影響行高,但是他們影響一個元素的佈局,可能將文本推離其左右兩端。


固有高度的替換元素可能比行框高要搞,這不會改變line-height值,包括替換元素本身,只會讓行框的高度恰好能包含替換元素。


vertical-align的百分數值要根據line-height計算


內邊距和邊框會影響行框的高度


使用display改變的只是元素的顯示角色,而不是基本值。也就是說,不會將段落生成的行內框並不會針對讓其變爲一個行內元素。


如果一個元素生成run-in框,而該框後面是一個塊級框,那麼該run-in元素將成爲塊級框開始處的行內框。

run-in依舊從其父元素繼承屬性,而不是它顯示的位置。


只有當run-in後面跟着一個塊級框時候纔會有效,否則run-in會變成一個塊級框



width和height無法應用於行內元素。


margin的百分數是相對於父元素的width值,所以如果父元素的width以某種方式發生改變


對於只包含文本的行,能改變行間距離的屬性只有line-height、font-size和vertical-align。


爲替換元素設置外邊距會影響行高,而左右方面只是照常。


如果一個邊框沒有樣式,那麼就不必存在

邊框會畫在背景之上

border-style的默認值爲none,所以要邊框出現,則要顯式聲明一個邊框樣式

border-color爲transparent時爲透明


不論行內元素的邊框指定怎樣的寬度,元素的行高都不會改變


邊框的左右邊不會遮擋文字,而上下邊會





發佈了92 篇原創文章 · 獲贊 30 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章