hight attribute value type list

##lengthAbsolute length% Relative lengthinheritInherit

value	description
##auto	Default

Here I mainly introduce the usage of relative length. Regarding absolute length, readers can refer to the detailed explanation of CSS size unit px % em rem for more information.

Usage of the % value of height

Definition:

This value is a percentage, which is based on the percentage of the block-level element that contains it.

Example:

<!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>

Copy after login

Readers can press "F12" in the

Chrome browser and select "element" to view. Readers can easily Quickly find that the height of

is exactly 50% of the parent element .

Things to note

In the above example, we verify Understand the usage of the relative value of height. However, readers need to note that if the parent element does not define hight, the height of the child element using percentage will not work. At this time, the height value is equivalent to the auto value, unless it is changed by an absolute value. Here, hight is not defined, which means that height is not written at all, which is different from defining height as 0px. Readers can try the following code:

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

Copy after login

Then remove the style attribute of the body and try again.

<body id="b">

Copy after login

The above is the detailed content of Detailed explanation of the hight attribute in CSS. For more information, please follow other related articles on the PHP Chinese website!