contents structure [-]
| 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>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”查看，讀者可很快發現<p>的高度恰好為父元素<body>的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">
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
