问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

有关width，height，padding，margin。和%值的关系

头像
万事如意
    47245176

    图片描述
    图片描述
    图片描述

    图片描述

    htmlcss
    阅读 3.6k
    2 个回答
    得票最新
    头像
    NeoChang
      1.4k53048
      ✓ 已被采纳

      意思就是根据它父级容器的宽高来计算的，口说无凭，代码为证。

      HTML:

      <div id="p1">
    <div class="child">

    </div>
</div>
<div id="p2">
    <div class="child">

    </div>
</div>

      style:

      #p1 {
    width: 50px;
    height: 50px;
    background: red
}
#p2 {
    width: 100px;
    height: 100px;
    background: blue
}
.child {
    width: 50%;
    height: 50%;
    background: yellowgreen
}

      截图：

      clipboard.png

      结论：
      同样是 class="child" 的 div，分布根据了父级的宽高计算的自身的宽高，这就是 %

      补充：

      HTML:

      <body>
  <div id="p1">
    <div class="child"></div>
  </div>
</body>

      CSS:

      #p1 {
    width: 200px;
    height: 400px;
    background: red
 }
.child {
  height: 50%;
  margin: 10% 10%;
  padding: 10% 10%;
}

      截图：

      clipboard.png

      子元素 padding和margin的上下左右的数值都是根据父级的宽度算出的，而高度是父级的高度算出的。

      头像
      某熊猫桑
        16.1k61547

        "另外一个值"一般是父元素或者是包含容器的相关值

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题