账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    [CSS越学越回去系列]包含块高度的问题？
    37
    0 
    <div id="outer" style="height: 200px;">
    <div id="inner" style="position: static;margin: 1px;border: 2px;padding: 3px;height: 10px;"></div>
</div>

    对于如上代码，根据css2.2文档规定：

    对于position为static或relative的元素，其containing block为祖先元素中最近的block container box的content box(除margin,border,padding外的区域)；

    可以得到：div#inner的包含块即div#outer产生的盒的内容区，由于该内容区的高度为200px（div#outer没有margin、border、padding），所以包含块的高度也为200px；

    又根据CSS权威指南（P275，第四版）：

    vertical formatting also has seven related properties: margin-top , border-top , padding-top , height , padding-bottom,border-bottom , and margin-bottom .
    The values of these seven properties must equal the height of the block box's containing block.

    可以得到：1px + 2px + 3px + 10px + 3px + 2px + 1px = 200px；

    结论肯定是错的，但权威指南应该不会错（引用部分在该书的第三版和第四版都进行了相同的表述），文档更不会错，所以必然是自己的理解有问题，希望有高人解惑！

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 赠瑰留香 普通会员 1楼

      在CSS中，包含块高度指的是块元素的高度，即它在其父元素中的高度。以下是一些包含块高度的问题和解决方案：

      1. 在一个包含块元素的父元素中，其他块元素的高度被设置为0，导致包含块高度设置为0。解决方案是在包含块元素的父元素中设置其高度。

      ```css .parent { height: 200px; }

      .parent .child { height: 100px; } ```

      1. 使用浮动或绝对定位时，包含块的高度可能会发生变化。解决方案是使用绝对定位或设置包含块的高度为其父元素的高度。

      ```css .parent { position: relative; height: 200px; }

      .child { position: absolute; top: 0; left: 0; height: 100px; } ```

      1. 使用CSS3的flexbox布局时，包含块的高度可能会改变。解决方案是使用flexbox布局，它会自动计算包含块的高度。

      ```css .parent { display: flex; flex-direction: column; height: 200px; }

      .child { flex: 1; margin: 10px; } ```

      1. 如果包含块元素的子元素高度未知，可以使用CSS3的auto单位，这可以自动计算子元素的高度。

      ```css .parent { display: flex; flex-direction: column; height: 200px; }

      .child { flex: 1; } ```

      请注意，以上解决方案需要根据具体的应用场景和需求进行选择和使用。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部