css uses relative to imitate Baidu homepage top-CSS Tutorial-php.cn

css uses relative to imitate Baidu homepage top

小云云

Release： 2018-03-01 09:24:30

Original

2336 people have browsed it

Recently, in the process of learning HTML and CSS, I want to imitate the Baidu homepage. I found that the blank distance between this part of the search box and other elements above and below can change with the size of the window. I hope this article can help everyone.

Effect implementation

<!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>

Copy after login

Analysis

Principle of utilization:

Calculation method of percentage value: actual value= The width and height * percentage value of the ancestor element that has the specified width and height. By default, the width of block-level elements is 100%, and the height is calculated based on the content. So if the ancestor element has no determined height, then the percentage value cannot be determined and its value will be set to 0.

If the height of the html element is set to height: 100%; then the height of the html element will change with the height of the viewport.

Related recommendations:

About the relative feature in CSS

##The position attribute absolute and relative horizontal centering in the css style

In the css position attribute: the difference between absolute and relative

The above is the detailed content of css uses relative to imitate Baidu homepage top. For more information, please follow other related articles on the PHP Chinese website!