對height 100%和inherit的總結

時間 2019-11-08

標籤 height 100% inherit 總結简体版

原文原文鏈接

對height 100%和inherit的總結

歡迎你們來個人博客留言：
https://sxq222.github.io/CSS%...
博客主頁：
https://sxq222.github.iocss

正文：html

以前看到一篇相關的文章：http://www.zhangxinxu.com/wor...git

在看這個文章的demo時發現一些問題，下面來總結概括一下:github

代碼以下wordpress

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .outer{
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #400;
            border: 10px solid #444;;
        }
        .in{
            background: #6aa;
        }
        .full{
            height: 100%;
        }
        .inherit{
            height: inherit;
        }
    </style>
</head>
<body>
<div class = 'outer'>
    <div class = 'in full'>

    </div>
</div>
<div class = 'outer'>
        <div class = 'in inherit'>

        </div>
</div>
</body>
</html>

效果大體是這個樣子：學習

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

下面咱們進行一下改動：code

<style>
        .outer{
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #400;
            border: 10px solid #444;;
        }
        .in{
            position: absolute;
            background: #6aa;
            width:100px;
        }
        .full{
            height: 100%;
        }
        .inherit{
            height: inherit;
        }
    </style>

其實就是給兩個子元素加上絕對定位。效果如圖：htm

咱們發現，100%的元素的高度計算是相對於父元素的了。這也比較容易理解，由於絕對定位的元素，他的計算規則是相對於他最近的position不爲static的元素。就算父元素未定位inherit也是相對於直接父元素進行高度計算的。blog

咱們在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;
        }