重看css權威指南 part4

2021-07-25 21:04:50 字數 1250 閱讀 2424

這一部分的名字叫基本視覺格式化,主要講了下元素框,邊距之類的東西,也對前邊的baseline,inline box等知識做了很多補充。

這裡提到乙個詞,元素框。先說水平方向上。(以下討論的都是塊級元素和行內塊元素,對於行內元素以後再說)

元素框水平寬度 = 左外邊距 + 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框 + 右外邊距 = 包含塊的width。

這裡,包含塊指的是該元素的 "布局上下文" ,通常是最近的父級塊元素,表單元格,或者行內塊元素。 其中,width,margin-left,margin-right三個的值可以設為auto。對於從左到右的正常流 1

.當width為固定值,左右margin都不設定時,它的margin-right會自動設定大小,以保證元素框的寬度 = 包含塊的width。例如,如果包含塊的width為800,子元素的width為600,那麼子元素的margin-right會設定為200(這裡假設padding,border都為0)。如果子元素width為1000,那麼子元素的margin-right會設定為-200。(瀏覽器的開發工具中顯示的盒子模型中不會顯示被自動設定的margin值)

2.當margin-left/margin-right為固定值,width和margin-right/margin-left都不設定時,width會自動設定自己的值,以保證元素框的寬度 = 包含塊的width。

3.當margin-left和margin-right都設定為固定值,嗯,乙個道理。

4.當margin-left,margin-right,width都設定為固定值,但元素框的寬度 != 包含塊的width該怎麼辦。這時,margin-right會改變自己的值,即使你給他設定了固定的寬度。

auto可以應用在margin,height,width上。height後面再說。

5.前面說到四種情況,那麼說說第五種情況。當width固定,margin-right為固定值,margin-left不設定時,會怎樣。

按照前面的說法,margin-left應該會自動改變自己的值,但實際上並非如此。除非我們給margin-left設定auto。

6. 當我們為margin-left和margin-right都設定auto時,整個元素就會居中,這也是常用的給塊級或者行內塊級元素居中的方法。

7.對於,當設定他為block或inline-block,給他設定了width或height後,它的height或width會自動等比例放大或縮小。

使用auto時要注意一點,在有些瀏覽器下,如果包含塊的width沒有設定,那麼auto可能會無效。

重看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權威指南 part6

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