Rumah > hujung hadapan web > tutorial css > CSS中hight属性的详解

CSS中hight属性的详解

迷茫
Lepaskan: 2017-03-25 14:12:14
asal
2829 orang telah melayarinya

目录结构:

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>
Salin selepas log masuk

读者可以在Chrome浏览器中按下“F12”,选择“element”查看,读者可很快发现

的高度恰好为父元素的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>
Salin selepas log masuk

然后再body的style属性去掉,再试一试。

<body id="b">
Salin selepas log masuk

Atas ialah kandungan terperinci CSS中hight属性的详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan