CSS寬度或者高度設置100%和inherit的區別

本文轉載自查看原文 2020-12-02 20:39 352 CSS

一、相同點

　　大多數情況下，兩者作用是一樣的。

① 父容器width/height: auto，無論width/height:100%或者width/height:inherit表現都是auto。
② 父容器width/height: 100px，無論width/height:100%或者width/height:inherit表現都是100px高。

　　例如如下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .outer {
            width: 200px;
            height: 200px;
            border: 5px solid #cd0000;
            margin: 10px;
        }

        .height-100 {
            width: 100%;
            height: 200px;
            background-color: #beceeb;
        }

        .height-inherit {
            width: inherit;
            height: 200px;
            background-color: #beceeb;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="height-100"></div>
</div>
<div class="outer">
    <div class="height-inherit"></div>
</div>
</body>
</html>

　　效果如下所示：

二、不同點

　　當子元素為絕對定位時，父元素的position值為static時，由於子元素脫離了文檔流，寬度設置為100%即和body的寬度一致了。

　　如果設置width：inherit的時候，瀏覽器會將父盒子的寬度賦值給他。

　　如下代碼所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .outer {
            width: 200px;
            height: 200px;
            border: 5px solid #cd0000;
            margin: 10px;
        }

        .height-100 {
            position: absolute;
            width: 100%;
            height: 200px;
            background-color: #beceeb;
        }

        .height-inherit {
            position: absolute;
            width: inherit;
            height: 200px;
            background-color: #beceeb;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="height-100"></div>
</div>
<div class="outer">
    <div class="height-inherit"></div>
</div>
</body>
</html>

　　效果如下所示：

　　解決絕對定位脫離文檔流從而導致寬度為body寬度的問題，在父元素上加position:relative

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 height:100%與height：inherit的區別 css設置高度=寬度，響應式純css設置元素高度與寬度相等使用css 設置高度等於寬度 Div的寬度與高度的100%設定 css設置div高度與寬度相等的一種方法 CSS中為什么有的元素能夠設置高度，而有的元素卻不能設置高度與寬度？寬度設置百分比高度跟寬度一樣css解決方案設置form表單的寬度、高度 css3動態計算元素的高度及寬度