css 使用relative設(shè)置top為百分比值的方法(仿百度首頁)

發(fā)布時間：2018-02-27 10:42:31 作者：佚名

最近在學(xué)習(xí)HTML、CSS的過程中，想模仿一下百度首頁。發(fā)現(xiàn)搜索框這一部分與上下其它元素的空白距離可以隨著窗口大小變化，下面小編給大家?guī)砹薱ss 使用relative設(shè)置top為百分比值的實現(xiàn)方法，感興趣的朋友一起看看吧

前言：

最近在學(xué)習(xí)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)容來計算。所以如果祖先元素沒有確定了高度的，那么百分比值也無法確定，它的值會被設(shè)置為0。

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

總結(jié)

以上所述是小編給大家介紹的css 使用relative設(shè)置top為百分比值(仿百度首頁)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

Tag：css relative

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

css 使用relative設(shè)置top為百分比值的方法(仿百度首頁)

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容