CSS中詳解height屬性

2021-09-25 11:04:57 字數 1469 閱讀 7118

目錄結構:

contents structure

[+]hight屬性值型別一覽表

height的%的使用

定義例項

需要注意的

參考文章

value

describtion

auto

預設length

絕對長度

%相對長度

inherit

繼承這裡筆者主要介紹相對長度的用法,關於絕對長度讀者可以參考css尺寸單位px % em rem詳解獲取更多資訊。

這個值是乙個百分比,它是基於包含它的塊級元素的百分比。

doctype html

>

<

html

>

<

head

>

<

title

>height.html

title

>

<

meta

name

="content-type"

content

="text/html; charset=utf-8"

>

<

style

>

divbody

style

>

head

>

<

body

>

<

div>i am box with width 50% and height 50%

div>

body

>

html

>

讀者可以在chrome瀏覽器中按下「f12」,選擇「element」檢視,讀者可很快發現的高度恰好為父元素的50%。

在上面的示例中,我們驗證了height的相對值的用法。但是讀者需要注意,如果父元素沒定義hight,則子元素的hight用百分比就不起作用,此時的高度值就相當於auto值,除非用絕對值改變。這裡hight沒定義是指,根本沒寫height,與把height定義為0px不同。讀者可試一試下面這段**:

<

body

id="b"

style

="width:0px;height:0px;"

>

<

br>

<

div

id="er"

style

="width:50%;height:50%;border:1px solid red;"

>

div>

然後再body的style屬性去掉,再試一試。

<

body

id="b"

>

CSS中詳解height屬性

目錄結構 contents structure hight屬性值型別一覽表 height的 的使用 定義例項 需要注意的 參考文章 value describtion auto 預設length 絕對長度 相對長度 inherit 繼承這裡筆者主要介紹相對長度的用法,關於絕對長度讀者可以參考css尺...

屬性 css 尺寸 height

1.obj height value height 中可以值 可以是數字形式也可以是字串形式。如果是數字形式那麼預設單位會是px obj height function index,value 其中index是當前物件的索引value是當前物件的高度 height的計算區域是 不包含padding,...

CSS中height和min height的區別

做為web前端新人,需要了解height min height的區別 瀏覽器參照基準 firefox,chrome,safari,opera,ie ie6不支援css min height屬性。最小高度的定義 1.元素擁有預設高度 2.當內容超出元素的預設高度時,元素的高度隨內容增加而增加 figu...