重看css權威指南 part6

2021-07-26 13:39:05 字數 887 閱讀 6351

上一部分結束得有點突兀,沒有給什麼例子,因為關鍵的概念已經講得很清楚了。

由於該書的寫作方式,沒法每次把乙個點的內容全講完(滲透在每個章節中),只先這樣一部分一部分總結了。

關於display的值,inline-block是混合了塊元素的行內元素的一種特殊存在,這個大家都知道。但是有一點你可能不知道,當他像行內元素一樣與文字排列在一行時,表現出的布局方式和替換元素一樣。也就是說,margin,padding,border會影響它行內框的高度。

還有乙個混合了行內元素和塊元素的屬性。run-in,支援性貌似不太好。為乙個塊元素宣告該屬性之後,他會表現為緊跟它之後的塊元素的第乙個行內框。也就是說,這樣寫

eeeeeeeeee

和這樣寫

ssseeeeeeeeee

效果是差不多的。注意兩點1.使用了run-in後只有它後面的第乙個元素是塊元素才有效。2.例子中的h1仍會繼承父元素的樣式,而不會繼承它後面的div的樣式。

內邊距,邊框和外邊距

內邊距和外邊距前面說過了,這裡說下邊框。邊框的顏色預設為文字的顏色,若沒有文字,則為父元素文字的顏色。

邊框的樣式:border-style(單邊樣式:border-top-styoe | ...)

值:none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

繼承性:無

預設值:none(此時無論設定寬度為多少,都將變為0)

可以像margin一樣,為各個邊應用不同的樣式時使用簡便寫法。對於邊框的寬度,顏色也是同樣。

重看css權威指南 part2

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

重看css權威指南 part3

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

重看css權威指南 part4

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