#hight屬性值類型一覽表

height的%值的使用

value	describtion
#auto	## 預設
length
.%	相對長度
	##這裡筆者主要介紹相對長度的用法，關於絕對長度讀者可以參考CSS尺寸單位px % em rem詳解獲取更多資訊。

#定義：

這個值是一個百分比，它是基於包含它的區塊級元素的百分比。

實例：

<!DOCTYPE html><html>
  <head>
    <title>height.html</title>
    <meta name="content-type" content="text/html; charset=UTF-8"><style>p{
  width:50%;
  height:50%;
  border:1px solid red;}body{
  border:1px solid green;
  display:block;
  height:100px;}</style></head><body><p>I am box with width 50% and height 50%</p></body></html>

登入後複製

讀者可以在Chrome瀏覽器中按下「F12」,選擇「element」查看，讀者可很快發現

的高度剛好為父元素的50%。

需要注意的

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

<body id="b" style="width:0px;height:0px;">
<br>
<p id="er" style="width:50%;height:50%;border:1px solid red;"></p>

登入後複製

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

<body id="b">

登入後複製

以上是CSS中hight屬性的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

CSS中hight屬性的詳解

#hight屬性值類型一覽表