免費模板網標簽tags 更多...
整站模板下載

加入代代SEO你會得到什么?

1、

代代論壇,實戰原創教程/附軟件+課件 (終身)!

2、

代代SEO會員群,提供售后問答 永久加群。

3、

主流空間商服務器核心永久代理,官方5-7折。

4、

輔助排名系統/整站排名系統 永久核心代理。

5、

千套源碼/官網單獨售價幾百R的源碼 永久VIP!

6、

站群/泛解析類程序“精品論壇”永久VIP。

7、

親測各類插件/工具/源碼等收費資源 永久下載。

8、

終身會員價格298,加入聯系QQ:1615187561

您的位置:雷速体育答题测试答案 > html教程 > line-height與vertical-align怎么用

雷速体育比分:line-height與vertical-align怎么用

時間:2016-06-02 來源:網上收集 作者:Tony 閱讀次數 tagscss

我們在布局的時候經常要用到居中等屬性,那么怎么更好的使用這些屬性呢


雷速体育答题测试答案 www.384142.live   line-height、font-size、vertical-align是設置行內元素布局的關鍵屬性。這三個屬性是相互依賴的關系,改變行間距離、設置垂直對齊等都需要它們的通力合作。在CSS字體里面已經詳細介紹了font-size的相關內容,本文將主要介紹line-height與vertical-align。

 

line-height

定義

 

  line-height行高是指文本行基線之間的距離。行高line-height實際上只影響行內元素和其他行內內容,而不會直接影響塊級元素,也可以為一個塊級元素設置line-height,但這個值只是應用到塊級元素的內聯內容時才會有影響。在塊級元素上聲明line-height會為該塊級元素的內容設置一個最小行框高度

  值: <length> | <percentage> | <number> | normal | inherit

  初始值: normal

  應用于: 所有元素

  繼承性: 有

  百分數: 相對于元素的字體大小font-size

 

術語

  要深入理解line-height,需要理解關于行框構建的常用術語。

內容區

  對于行內非替換元素或匿名文本某一部分,font-size和font-family確定了內容區的高度。在宋體情況下,如果一個行內元素的font-size為15px,則內容區的高度為15px;而在其他字體情況下,內容區的高度并不等于字體大小

行內框

  內容區加上行間距等于行內框。如果一個行內非替換元素的font-size為15px,line-height為21px,則相差6px。用戶代理將這6像素一分為二,將其一半分別應用到內容區的頂部和底部,這就得到了行內框

 

  當line-height小于font-size時,行內框實際上小于內容區

行框

  行框定義為行中最高行內框的頂端到最低行內框底端之間的距離,而且各行框的頂端挨著上一行行框的底端

框屬性

  內邊距、外邊距和邊框不影響行框的高度,即不影響行高

  行內元素的邊框邊界由font-size而不是line-height控制

  外邊距不會應用到行內非替換元素的頂端和底端

  margin-left、padding-left、border-left應用到元素的開始處;而margin-right、padding-right、border-right應用到元素的結尾處

 

 

替換元素

  行內替換元素需要使用line-height值,從而在垂直對齊時能正確地定位元素。因為vertical-align的百分數值是相對于元素的line-height來計算的。對于垂直對齊來說,圖像本身的高度無關緊要,關鍵是line-height的值

  默認地,行內替換元素位于基線上。如果向替換元素增加下內邊距、外邊距或邊框,內容區會上移。替換元素的基線是正常流中最后一個行框的基線。除非,該替換元素內容為空或者本身的overflow屬性值不是visible,這種情況下基線是margin底邊緣

 

vertical-align

定義

  vertical-align用來設置垂直對齊方式,所有垂直對齊的元素都會影響行高

  值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage> | inherit

  初始值: baseline

  應用于: 行內元素、替換元素、表單元格

  繼承性: 無

  百分數: 相對于元素的行高line-height

  [注意]IE7-瀏覽器中vertical-align的百分比值不支持小數行高,且取baseline、middle、text-bottom等值時與標準瀏覽器在展示效果不一樣,常用的解決辦法是將行內元素設置display:inline-block

本文地址://www.384142.live/htmljc/2016/0602/2618.html

猜你喜歡
欄目推薦
模板推薦

Copyright:雷速体育答题测试答案 www.384142.live 免費模板網 All Rights Reserved 雷速体育答题测试答案   遼公網安備 21010602000376號  遼公網安備:42900402000182號

免責聲明:本站部分資源來自互聯網收集,版權歸原創者所有,如果侵犯了你的權益,請通知我們,我們會及時刪除侵權內容,謝謝合作!

{ganrao}