css 元素的豎向百分比設定是相對於容器的高度嗎？

時間 2019-12-04

原文原文鏈接

結論是，若是是height的話，是相對於容器高度，若是是padding-height,margin-height則是相對於容器的寬度。html

舉例說明：app

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrapper">
    <div class="content"></div>
  </div>
</body>
</html>

height

.wrapper{
  height: 400px;
  width:200px;
  background: #ccc;
  display: block;
}
.content{
  width:100px;
  height: 50%;
  background: red;
  margin-left: 10%;
  padding-top: 12%;
  margin-top: 10%;
}

從這個效果圖看，小方塊的高度確實是相對於容器的高度spa

padding-height,margin-height

修改父容器寬度code

.wrapper{
  height: 400px;
  width:400px;
  background: #ccc;
  display: block;
}

對比先後兩張圖，內部方塊的padding-height和margin-height分別隨着父容器的width增大而變大，說明他們的百分比設定是相對於父容器的寬度htm

相關標籤/搜索