為什么我的CSS樣式不改變這里的屬性高度？

Question

如果將“ div”元素的寬度設置為％，則可以正常工作，但是，如果將高度設置為％，則不會得到任何效果。 僅當我以px或em指定高度時，它才起作用：

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

這讓我感到困惑。 謝謝。

Answer 1

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

Answer 2

潛水將獲得其父項高度和寬度的25％，因此，如果您不對身體設置樣式以使其具有特殊的高度或寬度，那么在您的情況下，大多數情況下為0px，請為身體添加一些高度，它將被樣式化

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

為什么我的CSS樣式不改變這里的屬性高度？

問題描述

2 個解決方案

解決方案1
2 已采納 2017-08-25 00:22:13

解決方案2
2 2017-08-25 00:36:25

為什么我的CSS樣式不改變這里的屬性高度？

問題描述

2 個解決方案

解決方案1 2 已采納 2017-08-25 00:22:13

解決方案2 2 2017-08-25 00:36:25

解決方案1
2 已采納 2017-08-25 00:22:13

解決方案2
2 2017-08-25 00:36:25