對height 100%和inherit的總結

Tychio 發布于2019-08-30 14:07 / 1945人閱讀

摘要：就算父元素未定位也是相對于直接父元素進行高度計算的。如果在絕對定位脫離文檔流中，等于最近已定位父元素的的高度。下一步目前只是闡述和總結了現象，還未解釋原理，希望大神能在留言區指點一下。接下來需要繼續學習知識，弄明白這些現象背后的原因。

對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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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