对height 100%和inherit的总结

Tychio 发布于2019-08-30 14:07 / 1927人阅读

摘要：就算父元素未定位也是相对于直接父元素进行高度计算的。如果在绝对定位脱离文档流中，等于最近已定位父元素的的高度。下一步目前只是阐述和总结了现象，还未解释原理，希望大神能在留言区指点一下。接下来需要继续学习知识，弄明白这些现象背后的原因。

对height 100%和inherit的总结

欢迎大家来我的博客留言：
https://sxq222.github.io/CSS%...
博客主页：
https://sxq222.github.io

正文：

之前看到一篇相关的文章：http://www.zhangxinxu.com/wor...

在看这个文章的demo时发现一些问题，下面来总结归纳一下:

代码如下




    
    demo

效果大致是这个样子：

其中，左边的是height 100%，右边的是height inherit。

下面我们进行一下改动：

其实就是给两个子元素加上绝对定位。效果如图：

我们发现，100%的元素的高度计算是相对于父元素的了。这也比较容易理解，因为绝对定位的元素，他的计算规则是相对于他最近的position不为static的元素。就算父元素未定位inherit也是相对于直接父元素进行高度计算的。

我们在outer上加上position relative 试一试：

        .outer{
            position: relative;
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #400;
            border: 10px solid #444;;
        }

看来确实是这样的，现在100%和inherit效果是一样的.

再对css进行改动：

        .outer{
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #400;
            border: 10px solid #444;
            box-sizing: border-box;
        }
        .in{
            background: #6aa;
        }
        .full{
            height: 100%;
        }
        .inherit{
            height: inherit;
        }

我们给父元素加上了boxsizing border box，让父元素的高度计算规则改变，下面看看效果：

我们看到 inherit元素的高度变成了父元素的高度，而100%的元素。

我们再给父元素加上padding：

        .outer{
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #400;
            border: 10px solid #444;
            box-sizing: border-box;
            padding: 10px;
        }

效果图：

可以看到inherit的高度会与父元素的高度相等，而100%的高度会与父元素content相等。

下面我们给子元素加上绝对定位看看：

        .outer{
            position: relative;
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #400;
            border: 10px solid #444;
            box-sizing: border-box;
            padding: 10px;
        }
        .in{
            left: 0;
            top: 0;
            position: absolute;
            width: 50px;
            background: #6aa;
        }
        .full{
            height: 100%;
        }
        .inherit{
            height: inherit;
        }

效果图：

我们看到，当加上绝对定位时，100%的子元素的高度为：父元素的（content + padding），而inherit的高度就是等于父元素的border-box高度。

下面我们将父元素outer的borde -box 改回去：

        .outer{
            position: relative;
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #400;
            border: 10px solid #444;
            /* box-sizing: border-box; */
            padding: 10px;
        }

效果图：

可以看到，inherit的高度变为父元素content-box的高度。

下面看一看固定定位：

        .outer{
            position: relative;
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #400;
            border: 10px solid #444;
            /* box-sizing: border-box; */
            padding: 10px;
        }
        .in{

            position: fixed;
            width: 50px;
            background: #6aa;
        }
        .full{
            left:300px;
            top: 0;
            height: 100%;
        }
        .inherit{
            left: 0;
            top: 0;
            height: inherit;
        }

可以看到，inherit的高度还是等于父元素盒子模型的高度，而100%的高度变为了视口的高度。

总结

height:inherit的高度，总是等于父元素的盒子模型（content-box、border-box）的高度。

heighe:100%的高度，在文档流中，就等于父元素的content的高度。如果在绝对定位（脱离文档流）中，等于最近已定位父元素的content + padding的高度。在固定定位中，等于视口的高度。

下一步

目前只是阐述和总结了现象，还未解释原理，希望大神能在留言区指点一下。

一开始觉得自己很熟悉CSS的定位、盒子模型，但是现在发现很多东西都是不明白的，这方面的只是还需要深入理解。接下来需要继续学习CSS知识，弄明白这些现象背后的原因。

云服务器 GPU云服务器云服务器和挖矿的区别 1对1服务 inherit() Inherits inheritance

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115783.html

2024苹果开发者大会：Siri 接上 ChatGPT，OpenAI苹果强强联合！

一直在生成式AI战争中默默无闻的苹果终于憋不住了！北京时间6月11日凌晨1点，2024苹果WWDC全球开发者大会在苹果总部 Apple Park开幕。Day 1的发布会在介绍完各个操作系统的更新后，一半的时间都留给了本次WWDC的重头戏——苹果AI（Apple Intelligence）。Apple Intelligence概述苹果将其AI技术命名为Apple Intelligence。还记得五年...

UCloud小助手 2024-06-14 17:32 评论0 收藏0
一张顶20张H100，速度10倍于B200：史上最快AI芯片，华人制造

在谈到 AI、大模型、算力等关键词时，如果要提及硬件产品，很多人应该会不假思索的说出英伟达。的确，在全球都缺算力的环境下，英伟达的地位是独特又难以撼动的。然而就在近日，有一家公司带着自己的 AI 芯片来叫板了。昨天凌晨，科技圈迎来了一个重要新闻。成立时间不到两年的美国芯片初创公司 Etched 推出了自己的第一块 AI 芯片 Sohu，它运行大模型的速度比英伟达 H100 要快 20 倍，比今年 ...

UCloud小助手 2024-06-27 17:50 评论0 收藏0
Adobe推出最新开源工具：视频中插入魔性手绘

在视频中插入手绘动画！传统上这是一项非常困难的任务，但 VideoDoodles 让它成为可能。VideoDoodles是Adobe公司联合多所大学推出的AI视频编辑框架。支持用户在视频中轻松插入手绘动画，实现与视频内容的无缝融合。通过预处理视频帧，系统提供平面画布，用户可以视频上绘制动画，系统自动处理透视和遮挡效果。与此同时，VideoDoodles也是是一种创新的交互式系统，允许用户在视频中添...

UCloud小助手 2024-08-13 16:33 评论0 收藏0
CSS background系列属性

摘要：通过该属性可以控制绘制的区域。背景图片相关的属性背景图片本身是有自身尺寸的，被应用元素也有自己的尺寸。通过属性可以修改原点位置。坐标系的反方向都是重复方式绘制。该位置是相对于原点构建的坐标系，默认情况下该位置就是在原点。一、元素背景是指哪些区域默认情况下元素的背景是指元素border（包含border）以内的区域。 showImg(https://segmentfault.com/...

mrcode 2019-08-29 17:30 评论0 收藏0
谷歌发布Veo：文生超1分钟、1080P视频媲美Sora

Veo是什么Veo是由Google DeepMind开发的一款视频生成模型，用户可以通过文本、图像或视频提示来指导其生成所需的视频内容，能够生成时长超过一分钟1080P分辨率的高质量视频。Veo拥有对自然语言的深入理解能够准确捕捉和执行各种电影制作术语和效果，如延时摄影或航拍镜头。Veo生成的视频不仅在视觉上更加连贯一致，而且在人物、动物和物体的动作表现上也更加逼真。Veo的开发旨在使视频制作更加...

UCloud小助手 2024-05-22 15:32 评论0 收藏0