css盒中的百分比（百度实习的面试）

请问一下代码margin-top和padding-top中的10%是相对于谁的百分之十？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 10%;
  }
  .box1{
    width: 100px;
    height: 100px;
    background: antiquewhite;
  }
  .box1>.box2{
    width: 100px;
    height: 100px;
    background: antiquewhite;
    margin-top: 10%;
  }
  .box4{
    width: 100px;
    height: 100px;
    background: #a97b3d;
  }

  .box4>.box3{
    width: 100px;
    height: 100px;
    background-color: green;
    padding-top: 10%;
  }
  .box5{
    width: 100px;
    height: 100px;
    background-color: #c26c6c;
    padding-top: 10%;
  }

</style>
<body>
  <div class="box"></div>
  <div class="box1">
    <div class="box2"></div>
  </div>
  <div class="box5"></div>
  <div class="box4">
    <div class="box3"></div>
  </div>
</body>
</html>

运行结果如图所示：运行结果图.png 在css的margin 和 padding 中的百分比值都是相对于包含块的宽度计算的。具体来说：

对于 .box 元素：
- margin-top: 10%; 是相对于 .box 元素的宽度计算的。如果 .box 的包含块是其父元素，那么这个值将是 .box 父元素宽度的百分之十,也就是浏览器窗口的10%。
对于 .box1 > .box2 元素：
- margin-top: 10%; 是相对于 .box1 元素的宽度计算的。如果 .box1 的包含块是其父元素，那么这个值将是 .box1 父元素宽度的百分之十。
对于 .box4 > .box3 元素：
- padding-top: 10%; 是相对于 .box4 > .box3 元素的宽度计算的。如果 .box3 的包含块是其父元素 .box4，那么这个值将是 .box3 父元素 .box4 宽度的百分之十。
对于 .box5 元素：
- padding-top: 10%; 是相对于 .box5 元素的宽度计算的。如果 .box5 的包含块是其父元素，那么这个值将是 .box5 父元素宽度的百分之十,也就是浏览器窗口的10%。

在CSS中，百分比值通常是相对于元素的包含块的宽度计算的。这是因为宽度是一个水平属性，而垂直属性（如高度）的百分比通常是相对于元素自身的高度计算的。

前端每日一题

css盒中的百分比（百度实习的面试）