欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

前言：

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

效果實(shí)現(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>

 分析

利用的原理：

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

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

總結(jié)

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

相關(guān)文章

最新評(píng)論