首頁 >web前端 >css教學 >CSS中hight屬性的詳解

CSS中hight屬性的詳解

迷茫
迷茫原創
2017-03-25 14:12:142778瀏覽

目錄結構:

contents structure [-]

#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」查看,讀者可很快發現e388a4556c0f65e1904146cc1a846bee的高度剛好為父元素6c04bd5ca3fcae76e30b72ad730ca86d的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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn