问答博客资讯标签用户活动
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

在直接父元素没有设置宽高时，子元素宽高的百分比，是谁的百分比？

头像
万事如意
    47145176

    父元素设置宽时的代码

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>        
        * {padding:0; margin:0;}
        /*.container {width:300px; height:300px; background:red;}*/
        .item {width:200px; height:200px; background:red;}
        p {width:10%; height:100px; background:black;}
        

    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <p></p>
        </div>
    </div>
</body>
</html>

    父元素没有设置宽时的代码

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>        
        * {padding:0; margin:0;}
        .container {width:200px; height:200px; background:red;}
        p {width:10%; height:100px; background:black;}
        

    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <p></p>
        </div>
    </div>
</body>
</html>

    而是相对于“最近被设置宽高的祖先元素”吧。这样理解是否正确？

    htmlcss
    阅读 5.3k
    2 个回答
    得票最新
    头像
    all2005
      3.4k40352494

      相对于“最近被设置宽高的祖先元素”吧

      头像
      CRIMX
        9.1k2720

        父容器没有设定宽高即为 auto，子元素百分比情况下：

        计算宽高分很多种情况，如果父容器像是 Block-level, non-replaced elements in normal flow 这样的宽度是可以计算出来的，或着 replaced elements 有的也会有默认宽高。但如果容器宽度依赖于其内容，即按 shrink-to-fit 方式计算，如 absolutely positioned elements、floating elements，子元素又是百分百，CSS 没有定义，一般会算成 0。

        高度的这种情况反而在 CSS 定义了，如果子元素没有 absolutely positioned 的话，那么是算 auto。

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