为什么我的CSS样式不改变属性高度？

如果我将“div”元素的宽度设置为％，它可以正常工作，但是如果将高度设置为％，我什么也得不到。只有当我指定像素或EM高度或东西它的工作原理：为什么我的CSS样式不改变属性高度？

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    </head> 
    <style> 
     div { 
      background-color: aqua; 
      height: 25%; 
      width: 25%; 
      float: left; 
      } 
    </style> 

<body> 
    <div></div> 
</body> 
</html>

这是混淆了我。谢谢。

来源

2017-08-25 Zebrafish

<style> 
    body{ 
     height: 100vh; 
     width: 100vw; 
    } 
    div { 
     background-color: aqua; 
     height: 25%; 
     width: 25%; 
     float: left; 
     } 
</style>

当您设置width或height用％，你必须检查它的父标签。

例如，

.parent{ 
    width: 200px; 
    height: 200px; 
} 

.children{ 
    width: 50%; 
    height: 50%; 
}

.children的height和width是100px。

让我们来看另一个例子。

.parent{ 

} 
.children{ 
    width: 50%; 
    height: 50%; 
}

.children的height和width是0px。

因为它的父母没有width和height。

来源

2017-08-25 00:22:13 zynkn

谢谢。我只是想知道什么指定身体实际上100vh，特别是为什么它使div高度接受一个百分比。 – Zebrafish

vh是一个css单位，* always *表示屏幕高度的百分比。 vw是宽度相同的东西。使用100％可以指代不同的事情。如果父级具有相对位置并且子元素具有相对位置，则子元素的100％将指向其父级宽度/高度的100％。不是屏幕宽度。如果父元素没有可确定的宽度或高度，百分比将不起作用。屏幕总是有一个可确定的宽度高度，所以它的工作原理。 – diopside

潜水将得到其父高度和宽度的25％，所以如果你没有给身体设置一个特殊的高度或宽度，那么在你的情况下最多可以为0px添加一些高度给身体，它会得到样式

body { 
height:100%; 
padding:0; 
margin:0; 
}

来源

2017-08-25 00:36:25

为什么我的CSS样式不改变属性高度？

回答

相关问题