重看css權威指南 part2

2021-07-25 16:03:31 字數 2134 閱讀 2880

1.text-indent

text-indent通常用於縮排文字的第一行,只能用於塊級元素和行內塊元素,但如果把行內元素放到塊級元素中,行內元素會隨著塊級元素的文字一起縮排,使用百分數賦值時,相對于父元素的寬度計算,該屬性可被繼承。

2.text-align

改變元素中文本行的對其方式,同樣只能用於塊級元素和行內元素。但如果把行內元素放到塊級元素中,給外邊的塊級元素設定text-align,行內元素的內容也會受到影響。

3.line-height

line-height指文字行基線之間的距離。line-height可用於所有元素,具有繼承性。使用百分數賦值時相對於font-size來進行計算。

說文字行基線可能不是很直觀,有時我們近似把它叫成行高,例如:

大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大嗒嗒嗒嗒嗒嗒嗒嗒

當我們改變line-height的值,可以很直觀地觀察到每行高度的變化(但字的大小不會變)。如果我們把line-height設成0,在上面的html中,所有文字會重疊成一行。

因為基線的間距沒了,所以每行的基線都在一行了

談到基線,我們要提乙個名詞,行內框(inline box)。之前講到font的時候,說過font-size設定的大小等於em box的高度。那麼inline box的高度就等於line-height的值(我是這麼理解的)。當我們不主動設定line-height時,瀏覽器一般會預設設定它為120%(也就是font-size的1.2倍),這個在不同的瀏覽器上會有一些不同。em box表示內容區,line-height的值 - font-size的值 = 內容區外的高度 。   這部分高度會一分為二放到em box的上邊和下邊。em box加上這兩個高度後,就變成了inline box。另外補充一下,根據書中的圖,基線應該在em box內的中下方位置。

下面來看這段**:

1111111

111111

這段html顯示出來後,第二行的上半部分會和第一行的內容重合。為什麼沒有完全重合?(以下為個人分析)因為他們兩個是同級,line-height沒有繼承,雖然第一行的line-height值變成了0,但第二行的line-height還是預設值。第一行的line-height雖然沒了,但基線和em box還在,line-height表示基線間的距離,但在這裡,第一行和第二行基線的距離應該怎麼算?它既不等於0,也不等於第二行的line-height。    在正常情況下,兩行基線的距離是第一行基線到第一行inline box下邊界的距離加上第二行基線加上第二行inline box上邊界的距離。上面這種情況,第一行的inline box沒了,所以第一行基線到inline box下邊界的距離也就沒了,但是第二行還是正常的,所以兩行文字的間距為第二行基線到inline box上邊界的距離。

4.vertical-align

vertical-align應用於行內元素,表單元格和替換元素(替換元素指顯示出的內容並非html中所寫的文字,如img元素),不可繼承。預設值為base-line,當使用百分數設定值時,相對於line-height進行計算。

vertical-align:baseline。將乙個元素的基線和其父元素的基線對其。若果這個元素沒有基線,則把它的底部和父元素的基線對齊。

vertical-align:sub/super。將乙個元素的基線或底部相對于父元素的基線降低或公升高一段距離。對於這段距離,規範沒有給出規定,不同的使用者**可能給出不同的值。

vertical-align:bottom,text-bottom,top,text-top這幾個值書中講解地不是很詳細。bottom/top是將元素的inline box的底端/頂端和行框的底端/頂端對齊(行框的定義後面會介紹) text-bottom和text-top是把行內框的頂端/底端與父元素的內容區的頂端/底端對齊。

vertical-align:midde。將元素行內框的中點和父元素基線上方0.25em處對齊。

vertical-align:百分數。將元素的基線或替換元素的底邊相對于父元素的基線公升高或降低指定的量。相對於該元素的line-height值來計算。(不是父元素的line-height值)

使用vertical-align後公升高或降低的元素不會成為另一行的一部分,也不會覆蓋其他行中的文字,他會使文字行變高。

重看css權威指南 part3

接著來說文字屬性 word spacing和letter spacing 這兩個屬性都具有繼承性,不能使用百分數進行賦值。預設值為normal,相當於0。word spacing的值可能受到text align的影響,為了方便對齊。text transform uppercase lowercase...

重看css權威指南 part4

這一部分的名字叫基本視覺格式化,主要講了下元素框,邊距之類的東西,也對前邊的baseline,inline box等知識做了很多補充。這裡提到乙個詞,元素框。先說水平方向上。以下討論的都是塊級元素和行內塊元素,對於行內元素以後再說 元素框水平寬度 左外邊距 左邊框 左內邊距 width 右內邊距 右...

重看css權威指南 part6

上一部分結束得有點突兀,沒有給什麼例子,因為關鍵的概念已經講得很清楚了。由於該書的寫作方式,沒法每次把乙個點的內容全講完 滲透在每個章節中 只先這樣一部分一部分總結了。關於display的值,inline block是混合了塊元素的行內元素的一種特殊存在,這個大家都知道。但是有一點你可能不知道,當他...