[css]height属性

MDN当中有这样一句话

The min-height and max-height properties override height.

min-heightmax-height会覆盖height。但我想补充的是,在默认情况下,元素的高度首先会去以height为准,如果height小于min-height,则以min-height为主。max-height同理。

height百分比形式的继承问题

若父元素没有height属性,子元素的height百分比无法继承父元素min-height上的高度。但弱父元素有height属性,子元素的height百分比就会受到父元素min-height、max-height的影响。

mdn中有这样一段关于百分比形式height值的话

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto
. A percentage height on the root element is relative to the initial containing block.

翻译一下:如果该元素包含块的height属性没有明确指定,并且该元素不是绝对定位,那么该元素height百分比的值会被处理成auto。两个条件说的很清楚(i.e.当元素是绝对定位时或者其父元素有height属性时,该元素height属性的百分值有效。)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>若父元素没有height属性,子元素的height百分比无法继承父元素min-height上的高度</title>
</head>
<body>
<style>
    .parent{
        min-height:500px;
    }
    .child{
        height:100%;
        background: red;
    }
</style>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,869评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,288评论 19 139
  • 背景 一年多以前我在知乎上答了有关LeetCode的问题, 分享了一些自己做题目的经验。 张土汪:刷leetcod...
    土汪阅读 12,794评论 0 33
  • 2017年5月19日 星期五 特开心的一天 今天特种兵训练第五天、恰巧奶奶八十大寿、今天一早特种兵训练营签完到就开...
    噯__陈小乐阅读 233评论 0 0
  • 最近打算给小宝贝买保险,一个同学是保险公司的,所以和她说了一下意向。 她以为自己小孩购买的产品向我做了推荐。这款保...
    学习富本阅读 395评论 0 2