重看css權威指南 part3

2021-07-25 19:18:21 字數 947 閱讀 1640

接著來說文字屬性

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

text-transform:uppercase | lowercase | capitalize | none | inherit    預設值為none,capitalize會使首字母大寫,具體表現在不同瀏覽器下可能不同。具有繼承性。

text-decoration:none | underline | overline | line-through | blink | inherit      blink會使文字閃爍(大部分瀏覽器可能都不支援了)該屬性沒有繼承性。但可以使用inherit來讓子元素繼承父元素該屬性的值。

儘管text-decoration不會被繼承,但它的表現可能和你的預期不太一樣。看如下**

父元素的文字啊啊啊啊啊啊啊啊啊啊啊啊啊啊子元素啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊

子元素三個字下面也會出現下劃線,而且是黑色的。這個下劃線並非繼承而來,因為text-decoration沒有繼承性。這個下劃線為p元素的下劃線,不過它卻穿過了子元素而沒有在中間斷開。要防止這種情況,就要為子元素也設定text-decoration。

white-space:這個屬性的預設值為normal,沒有繼承性。關於它的各個屬性值的具體效果,看下表

值空白符

換行符自動換行

pre-line

合併保留

允許normal

合併當成空格

允許nowrap

合併當成空格

不允許pre

保留保留

不允許pre-wrap

保留保留

允許

重看css權威指南 part2

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

重看css權威指南 part4

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

重看css權威指南 part6

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