行高有關詳解分析

2021-09-25 16:54:54 字數 1711 閱讀 2578

乙個不起眼的屬性,卻包含著許多不為人知的秘密。。。

>

>

charset

="utf-8"

>

>

inlinetitle

>

>

span

.c1.c2

.c3.c5

style

>

head

>

>

>

class

="c1"

>

inline box xfg中文span

>

class

="c2"

>

inline boxspan

>

class

="c3"

>

inline boxspan

>

inline box

class

="c5"

>

inline boxspan

>

div>

body

>

html

>

效果如下:

我們發現:行高不同,但是渲染的高度是一樣的,這是為什麼呢?

行高的構成:

總結:字型背景色:

style

="border

:solid 1px red;

">

style

="background

:blue;

color

:#fff;

font-size

:20px;

line-height

:60px;

">

居中xfg   

span

>

div>

執行效果:

分析:span上字型大小為20px,而line-height 為60px,明顯60px比20px大,那麼大的話多餘部分均勻分布到兩側。

進一步思考:

平常我們在乙個div中寫文字居中一般這樣寫:

#div1

其實本質上能夠居中的原因還是line-height起的作用,只不過把height和line-height設定為同等高,讓他倆吻合而已。。

文字對齊可以通過vertical-align來調整,預設是基於基線調整。

經典的3px空白問題:

下面有空白(空白大小視字型大小而定)。例如字型大小為12px,則空白為3px。因為為inline元素,遵守行高的構成,預設對齊方式為基線,所以底部會有空白空隙。

解決方案:使用底部對齊。 vertical-align: bottom;

style

="background

:red

">

>

文字span

>

src=

"test.png"

/>

div>

DataGridView設定行高

net中datagridview控制項如何設定行高 在datagridview控制項中,預設的行高很大,而標題頭的行高卻很小,感覺很不勻稱。標題頭的行高比較好設定 需要修改兩個屬性 1修改columnheadersheader 設定為你想要的高度,比如20 但這時候自動變回來。2修改columnhe...

改變QTableWidget 行高

方法一 int wide m pfieldtable columnwidth 0 int nrow m pfieldtable rowcount for int i 0 i 必須得setcolumnwidth和setrowheight一起使用才能改變行高,這兩個函式在qtableview中。方法二 ...

poi設定行高

這裡記錄下使用poi設定行高的方法。excel中的行高單位 px是相對長度,表示pixel 畫素 是螢幕上顯示資料的最基本的點。pt是絕對長度,表示point 磅 是印刷行業常用單位,等於1 72英吋。dpi 或ppi 表示解析度,即pixel dot per inch,每英吋的畫素 點 數。poi...