html中label寬度設定 非替換元素和替換元素

2021-09-01 08:36:38 字數 1665 閱讀 2294

單獨對label設定乙個width:100px的屬性石不起作用的,和[color=red]float:left或者display:inline-block[/color]配合的話 都可以設定上

參考:[url= position, display, float 內聯元素、塊級元素[/url]

在 css 中,任何元素都可以float浮動。[color=red]浮動元素會生成乙個塊級框[/color],而不論它本身是何種元素。如果浮動[color=red]非替換元素[/color],則要[color=red]指定乙個明確的寬度;否則,它們會盡可能地窄[/color]。

元素是文件結構的基礎,在css裡面,每個元素生成了包含內容的框(box),大家都叫「盒子」。但是不同的元素顯示方式是不同的,有佔據一整行的,有水平乙個挨著乙個的。

[b]替換元素:[/b]替換元素是瀏覽器根據其[color=red]標籤的元素與屬性來判斷顯示具體的內容[/color]。

比如:type="text" 的是,這是乙個文字輸入框,換乙個其他的時候,瀏覽器顯示就不一樣。[color=red](x)html中的

替換元素可增加行框高度,但不影響line-height,內容區高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height。

要想替換元素居中,可以設定[color=red]line-height = height, vertral-align = middle[/color]。

(vertical-align:middle,是將元素行內框的垂直中點與父元素基線上0.5ex處的一點對齊。)

[b]非替換元素:[/b](x)html 的大多數元素是不可替換元素,他們[color=red]將內容直接告訴瀏覽器,將其顯示出來[/color]。

比如p的內容

、label的內容;瀏覽器將把這段內容直接顯示出來。

非替換元素新增padding-top或padding-bottom,不影響行框高度,但內容區高度會變化,margin-top,margin-bottom對行框沒有任何影響。新增左右邊距會影響非替換元素水平位置。要使非替換元素在父元素框內居中,可以[color=red]設定line-height = 父元素框的高度[/color]。

行內元素框模型:

下面概括了行內布局組成:

(注意:對於行內非替換元素中指代的height,是指字元本身的高度,由font-size決定)

1. 內容區:

對於非替換元素,內容區高度取決於font-size,若有內邊距,則內容區高度 = padding-top + padding-bottom + height;

對於替換元素,內容區高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height

2. 行間距:

只應用於非替換元素,其高度值=(|line-height - height|)/2

3. 行內框:

對於非替換元素,其高度值 = line-height

對於替換元素,其高度值 = 內容區高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height

4. 行框:

取決於行內框。行框的上邊界要位於最高行內框的上邊界,而行框的底邊要位於最低行內框的下邊界。

設定GUI中Label的字型大小

做 unity3d gui的時候一定會發現一般都是用gui.skin來控制gui顯示效果的,但是還會發現fontsize只能用於動態字型,當用在label和textarea中的時候顯示的字型是不會改變的 一直保持匯入字型預設大小,我在網上找了很久都沒找到有效的方法,只是通用的方法是做多個不同字型大小...

table中的寬度設定

css設定一列td寬度 我的方法 在css 中設定td的width 5 太大的話看不出效果 下面是從網上看到的兩個解決方法 解決辦法一 1.插入 30行兩列,寬380px 2.滑鼠點在第乙個單元格中 一行一列 在屬性面板中輸入寬度100 3.完成 解決辦法二 css td.p10 td.p15 td...

table css樣式設定中的寬度設定

在對table進行樣式設定的過程中,有些時候會發覺 樣式設定了,但樣式卻會自適應或不改變,利用table layout fixed 可以在有效範圍內改變一些 樣式,但在實際應用中,很多樣式還是不能改變。實際上,還是這個屬性的原因 先了解一下fixed布局模型的工作步驟 1.width屬性值不是aut...