css使用relative模仿百度首頁top
- 小云云原創
- 2018-03-01 09:24:302339瀏覽
最近在學習HTML、CSS的過程中，想模仿百度首頁。發現搜尋框這一部分與上下其它元素的空白距離可以隨著視窗大小變化，希望本文能幫助大家。
效果實現
<!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元素的高度會隨著viewport的高度改變。
相關推薦：
css樣式中position屬性absolute以及relative水平居中
css position屬性中：absolute與relative的區別
以上是css使用relative模仿百度首頁top的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn