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