css 元素的竖向百分比设定是相对于容器的高度吗？

2019年9月8日 123次阅读 来源: 千年老妖

结论是，如果是height的话，是相对于容器高度，如果是padding-height,margin-height则是相对于容器的宽度。

举例说明：

<!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>
  1. 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%;
}

《css 元素的竖向百分比设定是相对于容器的高度吗？》

从这个效果图看，小方块的高度确实是相对于容器的高度

  1. padding-height,margin-height

修改父容器宽度

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

《css 元素的竖向百分比设定是相对于容器的高度吗？》
《css 元素的竖向百分比设定是相对于容器的高度吗？》

对比前后两张图，内部方块的padding-height和margin-height分别随着父容器的width增大而变大，说明他们的百分比设定是相对于父容器的宽度

    原文作者：千年老妖
    原文地址: https://segmentfault.com/a/1190000012955996
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞