CSS は Baidu ホームページのトップを模倣するために相対を使用します-CSSチュートリアル-php.cn

CSS は Baidu ホームページのトップを模倣するために相対を使用します

小云云

リリース： 2018-03-01 09:24:30

オリジナル

2336 人が閲覧しました

最近HTMLとCSSを勉強中、Baiduのホームページを真似したいと思っています。検索ボックスのこの部分とその上下の他の要素の間の空白の距離は、ウィンドウのサイズに応じて変化する可能性があることがわかりました。この記事が皆さんのお役に立てれば幸いです。

効果の実装

<!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>
    <p class="content">
        <p class="wrap">
            <p class="wrap-content">
            </p>
        </p>
    </p>
</body>
</html>

ログイン後にコピー

分析

使用される原則:

パーセンテージ値の計算方法: 実際の値 = 決定された幅と高さを持つ祖先要素の幅と高さ * パーセンテージ値。デフォルトでは、ブロックレベル要素の幅は 100% で、高さはコンテンツに基づいて計算されます。したがって、祖先要素の高さが決定されていない場合、パーセント値は決定できず、その値は 0 に設定されます。

HTML 要素の高さが height: 100% に設定されている場合、HTML 要素の高さはビューポートの高さに応じて変化します。