CSS裡的height屬性與line height屬性有什麼區別

2021-04-02 01:05:45 字數 5460 閱讀 8714

1樓:網海1書生

height是元素自身的高度,line-height則是元素內部文字的行高,比如:

height:100px; line-height:20px; padding:0

表示具有這個樣式的元素的高度為100畫素,裡面的文字行高為20畫素(換句話說就是可以排5行文字),內邊距為0(如果不為0則元素的高度會被撐大)。

補充說明一下:如果一個元素的height和line-height相同,意味著這行文字在元素中垂直居中(但僅限文字,且只能一行)。

2樓:01走不完的長巷

塊內佈局規則

塊內height為auto時,高度為塊內行框累加高和其內普通流塊高之和

塊內height為非auto時,塊高為 height 指定高度

塊內行框佈局(行內佈局)規則

每一個行內元素會產生一個行內框;

行內框會在行框內橫向排列;

'line-height' 特性值指定了每個行內非替換元素生成的行內框的 確切 高度;行內替換元素的高度由 'height' 特性值決定;

文字在行內框中垂直排列,上下空隙用半差異填補;如果字號大於行內框則文字從上下方向上溢位行內框,並可能滲入到其他行框內(行框是永遠不會重疊的);

'vertical-align' 特性值指定了每個行內框的垂直對齊方式;

行框的頂邊界是這一系列垂直對齊的行內框最高的頂邊框,底邊界是最低的底邊框。

行框的高度是頂邊界到底邊界的距離。

所以 line-height 是決定行框高度的因素之一

而 height 只是決定包含塊高度

網頁設計css**line-height和height有什麼區別

3樓:杜拉拉的

通俗的告訴你。

網頁的所有元素可以分為塊元素和行元素。

一行文字所在的一個邏輯區域是行元素,其他的元素就都是塊元素。

line-height只針對行元素,height針對其他所有元素。

4樓:匿名使用者

line-height:行高 設定文字間上下距離還有可以讓層裡面的東西可以垂直居中

height:高度 就是定義一個層 或某樣東西的高度啦

5樓:匿名使用者

line-height行高

寫法:line-height:1.5 沒有單位的bai 按倍數 一般這個用du

的比較多 沒有限制zhi

line-height:1.5em 按在字元daoline-height:

20px 按畫素回還有這樣答的 font:12px/1.5 arial; 意思是:

文字12畫素 1.5倍行高 arial字型

height就是高度,高度還有一個最小高度min-height

6樓:啄木鳥

height=高度,line-height=行高

css 裡的 height 屬性與 line-height 屬性有什麼區別

7樓:山東文匯軟體

height用來表示容器的高度,line-height 用來表示,這一容器內的每行文字的高度。

所有主流回瀏覽器都支援這答兩個屬性。

height 這個屬性定義元素內容區的高度,在內容區外面可以增加內邊距、邊框和外邊距。

line-height該屬性會影響行框的佈局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。

8樓:夜店耍流氓

height:是容器的高,

必bai須是塊du級標zhi籤才有校,行級標籤需要dao設定display後才能有效。版line-height:這個是行高,比權如div這個塊級標籤,你是設定height:

500px;就是div的高為500px;

設定line-height:100px;這樣這個div你寫文字只能寫5行,5*100為500

明白了吧?

9樓:育知同創教育

1:前者用來表示容器的高度,後者用來表示,這一容器內的每行文字的高版度

如:height一般用來表示,設權置這一容器的高度。

一般來說,如果是要設定文字行距和居中顯示,都會帶上line-height:40px;font-size:20px;

這樣的話,就相當於文字大小 20px,文字行間距離也有20px了。

10樓:匿名使用者

height是指容器本身的高度;

line-height是指容器內部元素上下直接的行間距,一般用於文字排版;

當height高度與內line-height行高相等時,容器中容的單行文字,會表現為垂直居中,一般用此方法來達到單行文字垂直居中的目的。

11樓:偷西瓜de狼

height 是元素的高度 line-height 是文字的高度 如果元素只有 line-height屬性 當元素內沒有文字時元素高度就是0

12樓:01走不完的長巷

塊內佈局規bai則

塊內duheight為auto時,高度為塊內行zhi

框累加高和dao其內普通流塊高內之和

塊內height為非auto時,塊

容高為 height 指定高度

塊內行框佈局(行內佈局)規則

每一個行內元素會產生一個行內框;

行內框會在行框內橫向排列;

'line-height' 特性值指定了每個行內非替換元素生成的行內框的 確切 高度;行內替換元素的高度由 'height' 特性值決定;

文字在行內框中垂直排列,上下空隙用半差異填補;如果字號大於行內框則文字從上下方向上溢位行內框,並可能滲入到其他行框內(行框是永遠不會重疊的);

'vertical-align' 特性值指定了每個行內框的垂直對齊方式;

行框的頂邊界是這一系列垂直對齊的行內框最高的頂邊框,底邊界是最低的底邊框。

行框的高度是頂邊界到底邊界的距離。

所以 line-height 是決定行框高度的因素之一

而 height 只是決定包含塊高度

css中line-height與height的區別?

13樓:tt小聖人

簡單來說,line-height是行高的意思,height則是定義元素自身的高度。

例如下面這段**

如果我們定義.test ,那麼這個元素的實際高度將取決於其中內容的多少,假如文字部分在瀏覽器裡面顯示為一行,那麼這個div的實際高度就是20px,如果文字顯示為兩行,那麼div的實際高度就是40px,而且文字的行高是20px的;

如果我們定義.test,那麼這個元素的實際高度一般並不會因為內容的多少而發生改變,如果文字顯示為一行,那麼這個div的高度仍然是40px,如果顯示為2行,但是文字的行高不夠20px,這個div的高度也不會因為文字內容的高度小於height而發生改變。不過如果文字內容的高度大於40px了,一般來說這個div的高度還是會相應增加的。

14樓:東鼕鼕鼕鼕冬

區別如下:

1、定義不同

:line-height是行高的意思,height則是定義元素自身的高度。

2、表示意義不同: line-height用來表示容器的高度,height用來表示這一容器內的每行文字的高度。

3、使用範圍不同:line-height只針對行元素,height針對其他所有元素。

4、針對物件不同:line-height一般針對字型來設定,如果一行文字在div裡面,且行高等於高度的話,則文字會垂直居中。heigh一般用來設定文字外圍的div容器。

5、height是對於某個框架或者**來弄的。line-height用於文字,如果要實際效果你可以寫一段文字,分好幾行,然後對它做line-height屬性,就會注意到變化了。

擴充套件資料:

css語言特點

css為html標記語言提供了一種樣式描述,定義了其中元素的顯示方式。css在web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。

總體來說,css具有以下特點:

1、豐富的樣式定義

css提供了豐富的文件樣式外觀,以及設定文字和背景屬性的能力;允許為任何元素建立邊框,以及元素邊框與其他元素間的距離,以及元素邊框與元素內容間的距離;允許隨意改變文字的大小寫方式、修飾方式以及其他頁面效果。

2、易於使用和修改

css可以將樣式定義在html元素的style屬性中,也可以將其定義在html文件的header部分,也可以將樣式宣告在一個專門的css檔案中,以供html頁面引用。總之,css樣式表可以將所有的樣式宣告統一存放,進行統一管理。

另外,可以將相同樣式的元素進行歸類,使用同一個樣式進行定義,也可以將某個樣式應用到所有同名的html標籤中,也可以將一個css樣式指定到某個頁面元素中。如果要修改樣式,我們只需要在樣式列表中找到相應的樣式宣告進行修改。

3、多頁面應用

css樣式表可以單獨存放在一個css檔案中,這樣我們就可以在多個頁面中使用同一個css樣式表。css樣式表理論上不屬於任何頁面檔案,在任何頁面檔案中都可以將其引用。這樣就可以實現多個頁面風格的統一。

4、層疊

簡單的說,層疊就是對一個元素多次設定同一個樣式,這將使用最後一次設定的屬性值。

例如對一個站點中的多個頁面使用了同一套css樣式表,而某些頁面中的某些元素想使用其他樣式,就可以針對這些樣式單獨定義一個樣式表應用到頁面中。這些後來定義的樣式將對前面的樣式設定進行重寫,在瀏覽器中看到的將是最後面設定的樣式效果。

5、頁面壓縮

在使用html定義頁面效果的**中,往往需要大量或重複的**和font元素形成各種規格的文字樣式,這樣做的後果就是會產生大量的html標籤,從而使頁面檔案的大小增加。

15樓:匿名使用者

line-height是行高,height就是高,通常height是對於某個框架或者**來弄的,line-height用於文字

如果要實際效果你可以寫一段文字,分好幾行,然後對它做line-height屬性,就會注意到變化了

比如:abc

abcabc

abcabc

調整20px這個值,行間距就會發生變化

另外,line-height和height組合到一塊兒,還有一種效果,就是如果把它們的值設定的一樣了,文字就會在垂直方向居中

16樓:育知同創教育

1:前者用來

表示容器的高度,後者用來表示,這一容器內的每行文字的高度如:height一般用來表示,設定這一容器的高度。

一般來說,如果是要設定文字行距和居中顯示,都會帶上line-height:40px;font-size:20px;

這樣的話,就相當於文字大小 20px,文字行間距離也有20px了。

17樓:匿名使用者

不過如果文字內容的高度大於40px了,一般來說這個div的高度還是會相應增加的。

div高度是不會增加的

如何更改CSS屬性,取消對父級元素的屬性繼承

給span加id 或者加類 或者在span標籤內部改都可以,比如設定整個div中span的color屬性是red 現在把span b的color設定為green 1,span標籤內部 this is span b 2.加id或者加class 加id this is span b 加class thi...

特性與屬性的區別,屬性和特性有什麼區別?

1.特性是物質在一定條件下具有的性質。通常條件變化時,這種性質也會發生變化。如狀態是物質的特性,因為狀態與溫度有關 熔點是晶體的特性,因為熔點與壓強等有關。2.屬性是指事物在任何條件下具有的性質。如運動是物體的屬性,因為一切物體都在運動 質量是物體的屬性,因為質量不隨形狀 溫度 狀態 位置等改變。特...

windows XP裡檔案 屬性裡的存檔是什麼意思?打勾和不

視窗系統中檔案屬性有四種型別 只讀 表示該檔案不能被修改 隱藏 表示該檔案在系統中是隱藏的,在預設情況下使用者不能看見這些檔案。系統 表示該檔案是作業系統的一部分。存檔 表示該檔案在上次備份前已經修改過了,一些備份軟體在備份系統後會把這些檔案預設的設為存檔屬性。存檔屬性在一般檔案管理中意義不大,但是...