CSS中hight属性的详解
程序员文章站
2022-04-18 09:36:59
...
目录结构：
contents structure [-]
hight属性值类型一览表
| value | describtion |
| auto | 默认 |
| length | 绝对长度 |
| % | 相对长度 |
| inherit | 继承 |
这里笔者主要介绍相对长度的用法，关于绝对长度读者可以参考CSS尺寸单位px % em rem详解获取更多信息。
height的%值的使用
定义：
这个值是一个百分比，它是基于包含它的块级元素的百分比。
实例：
<!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">
以上就是CSS中hight属性的详解的详细内容，更多请关注其它相关文章！
推荐阅读