您好,欢迎访问一九零五行业门户网

CSS中hight属性的详解

目录结构:
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属性的详解的详细内容。
其它类似信息

推荐信息