css怎么使用relative設置top為百分比值

發(fā)布時間：2021-06-17 14:03:23 來源：億速云閱讀：211 作者：小新欄目：web開發(fā)

這篇文章主要為大家展示了“css怎么使用relative設置top為百分比值”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“css怎么使用relative設置top為百分比值”這篇文章吧。

前言：

最近在學習HTML、CSS的過程中，想模仿一下百度首頁。發(fā)現(xiàn)搜索框這一部分與上下其它元素的空白距離可以隨著窗口大小變化（效果如下圖所示），于是自己研究了一下并記錄下來。

效果實現(xiàn)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>垂直伸縮</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        body,html{
            height: 100%;
        }
        .content{
            min-width: 810px;
            min-height: 600px;
            height: 100%;
            border: 1px dashed green;
        }
        .wrap{
            width: 100%;
            height: 191px;
            border: 1px solid blue;
            position: relative;
            top: 38.2%;
        }
        .wrap-content{
            width: 100%;
            height: 191px;
            background-color: red;
            position: relative;
            top: -191px;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="wrap">
            <div class="wrap-content">
            </div>
        </div>
    </div>
</body>
</html>

分析

利用的原理：

百分比值的計算方式：實際值 = 具有確定寬高的祖先元素的寬高 * 百分比值。默認情況下，塊級元素的寬為100%，高度則是根據(jù)內(nèi)容來計算。所以如果祖先元素沒有確定了高度的，那么百分比值也無法確定，它的值會被設置為0。

如果設置了html元素的高度為height: 100%;那么html元素的高度會隨著viewport的高度改變。

以上是“css怎么使用relative設置top為百分比值”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

css怎么使用relative設置top為百分比值

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽