ホームページ > 記事 > ウェブフロントエンド > CSS は Baidu ホームページのトップを模倣するために相対を使用します
CSS は Baidu ホームページのトップを模倣するために相対を使用します
- 小云云オリジナル
- 2018-03-01 09:24:302360ブラウズ
最近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 要素の高さはビューポートの高さに応じて変化します。
関連する推奨事項:
以上がCSS は Baidu ホームページのトップを模倣するために相対を使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。