Skip to content

[css] 第66天 元素竖向的百分比设置是相对容器的高度吗? #404

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第66天 元素竖向的百分比设置是相对容器的高度吗?

Activity

xiangshuo1992

xiangshuo1992 commented on Jun 21, 2019

@xiangshuo1992
Contributor

不是,一般是根据宽度来的,像padding-top,padding-bottom
因为高度百分比的话CSS没办法处理,比如子元素的高度设置为200%,那父元素是不是被撑开了,然后父元素变化了,子元素的200%是不是相对又变化了,所以会造成一个死循环,在CSS里面是没办法处理高度百分比的,高度都是auto。
如果想要实现等比例的盒子模型,可以通过上面的padding-top,padding-bottom属性来实现。

QingyiHuang

QingyiHuang commented on Jun 21, 2019

@QingyiHuang
<div style="height: 600px; width: 600px;">
    <img style="height: 100%; width: auto; max-with: 500px;">
</div>
forever-z-133

forever-z-133 commented on Jun 21, 2019

@forever-z-133

父级非 auto 的 height 时,子级百分比的 height 才有效。
即使父级有 min-height 或其他子级撑起的高度,子级百分比 height 依旧无效。

yxkhaha

yxkhaha commented on Jun 21, 2019

@yxkhaha
  • 元素竖向的百分比设置高度是相对父级的高度,但是margin 和padding 是参照父级的宽度来设置的。
smile-2008

smile-2008 commented on Jan 6, 2021

@smile-2008
  • 元素竖向的百分比设置高度是相对父级的高度,但是margin 和padding 是参照父级的宽度来设置的。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@QingyiHuang@xiangshuo1992@forever-z-133

        Issue actions

          [css] 第66天 元素竖向的百分比设置是相对容器的高度吗? · Issue #404 · haizlin/fe-interview