一些常用css技巧的為什么(二)我所理解的line -开发者知识库

一些常用css技巧的為什么(二)我所理解的line -开发者知识库,第1张

要用到的基本術語和概念:

  • 替換元素:用作為其他內容占位符的一個元素,或說替換元素內容的部分並非由文檔內容直接表示。比如img元素它由文檔本身之外的一個圖像來替換,比如input元素要由一個單選按鈕,復選框,文本輸入框等替換。替換元素多為行級元素,行級替換元素可以像塊級元素一樣設置width/height/padding/margin。
  • 非替換元素:元素的內容本身包含在文檔中,或說其內容由User Agent在元素本身生成的框中顯示。比如一個段落p元素里的文本本身就放在該元素內。
  1. 塊級非替換元素:比如div,p,blockquote 等。
  2. 行級非替換元素:比如span,i 等,注意行級非替換元素設置不了width,height,marginTop和marginBottom(原因后面解釋)。

                          一些常用css技巧的為什么(二)我所理解的line -开发者知识库,第2张一些常用css技巧的為什么(二)我所理解的line -开发者知识库,第3张

  • em框:我們常用的font-size屬性與你看到的實際字體大小之間的關系由字體的設計者來確定,這種關系設置為字體本身中的一個em框,如下的藍色方框。所以font-size的作用是為給定字體的em框提供一個大小(但並不能保證實際顯示的字符就是這種大小,實際的字符可能比em框更高或更矮)

   一些常用css技巧的為什么(二)我所理解的line -开发者知识库,第4张

  • 內容區
  1. 在非替換元素中,內容區是元素中各字符的em框串在一起構成的框。
  2. 在替換元素中,內容區是元素固有高度 可能有的內邊距 邊框 外邊距,比如下圖img如果說它有padding,border,margin的話。

                    一些常用css技巧的為什么(二)我所理解的line -开发者知识库,第5张

  • 行間距:是font-size值和line-height值之差。這個差值其實要分為兩半分別應用到內容區的頂部和底部,稱為半行間距。行間距只能用於非替換元素。沒錯頂線和底線構成了內容區em框。

         一些常用css技巧的為什么(二)我所理解的line -开发者知识库,第6张

  • 行內框:這個框通過向內容區增加行間距來描述。
  1. 非替換元素行內框的高度剛好等於line-height就是上圖的行高。
  2. 替換元素行內框的高度就是其內容區的高度,因為替換元素沒有行間距。
  • 行框:一行中每個字符都有自己的行內框,行框就是包含該行中出現的行內框的最高點的最低點的最小框,也就是說行框的上邊界位於最高行內框的上邊界,行框的底邊要放在最低行內框的下邊界。

需要知道的畫外音

  • 內容區類似於一個塊級元素的盒子模型中的內容框content。
  • 行內元素的背景應用於內容區及所有內邊距,邊框。
  • 行內元素的邊框要包圍內容區及其所有內外邊距。
  • 替換元素的內外邊距和邊框確實會影響該元素的行內框高度,相應地也會影響行框高度。可以拿img元素想想是不是這樣。
  • 非替換元素的內外邊距和邊框對行內元素或其生成的元素沒有垂直效果(即有名的margin重疊問題)。 

這樣才會進入正題:

part 1:為什么行級非替換元素比如span設置margin-top和margin-bottom並沒有什么卵用?

你也許會說因為span不是塊級元素所以設置margin-top和margin-bottom才會沒用,那我反問你為何span設置了margin-left和margin-right就起作用呢,他們都是margin一族的啊?不知道了吧,所以真正原因不是那么簡單。我是從行高方面分析的,也許不完全正確,但誰又知道css的渲染機制到底內部是怎樣或是w3c為什么要這樣規定呢...

首先你需要知道行框(說通俗點也就是行高line-height)是怎么來的,由行內框確定的是不是,而span這個行級非替換元素的行內框就是它的內容區(也就是它的em框,說通俗點就是font-size) 上下行間距。上面說過內容區類似於一個塊級元素的盒子模型中的內容框content,任你怎么設置margin-top和margin-bottom,就算你設置border-top,boder-bottom,padding-top,padding-bottom都對行高沒什么卵用。對於span來說行高只和em框,上下行間距有關。如果說盒子模型不是反映元素在文檔流中占據位置的必要條件,畢竟行高還反映着元素在文檔流中占據的高度。如果說span元素的內容區像img替換元素這樣內容區本身就包含着邊框,內外間距,那確實會影響該元素的行高。

part 2:利用line-height為什么會使文本或子元素的文本垂直居中?

1 <p style="height:50px;background-color:red">
2 <span style="background-color:yellow">
3 我是子元素的文本
4 </span>
5 </p>

一些常用css技巧的為什么(二)我所理解的line -开发者知识库,第7张

由於沒有給span元素設置padding和border,此時黃色部分就是span元素的內容區啦,span元素此時繼承來的font-size為16px(chrome下默認html的font-size為16px),增加內容區上下的行間距使span元素的行高撐滿父元素,文本不就居中了。父元素的content內容高度為50px,所以直接給span元素設置line-height為50px就大功告成。很多人誤認為這樣是把span元素居中了,其實不是的,span元素並沒移動,而是它的行高增加了。

一些常用css技巧的為什么(二)我所理解的line -开发者知识库,第8张

參考:部分概念內容參考自《css權威指南》,大部分為自己理解,如理解有誤還望各位菊苣指出好讓我迷途知返及時改正

 

最佳答案:

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复