CSS utilise pour imiter la page d'accueil de Baidu-tutoriel CSS-php.cn

Maison

interface Web

tutoriel CSS

CSS utilise pour imiter la page d'accueil de Baidu

Mar 01, 2018 am 09:24 AM

css

En train d'apprendre récemment le HTML et le CSS, je souhaite imiter la page d'accueil de Baidu. J'ai constaté que la distance vide entre cette partie du champ de recherche et les autres éléments au-dessus et en dessous peut changer en fonction de la taille de la fenêtre. J'espère que cet article pourra aider tout le monde.

Mise en œuvre de l'effet

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;垂直伸缩&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
        *{
            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;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;p class=&quot;content&quot;&gt;
        &lt;p class=&quot;wrap&quot;&gt;
            &lt;p class=&quot;wrap-content&quot;&gt;
            &lt;/p&gt;
        &lt;/p&gt;
    &lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

Analyse

Principe d'utilisation :

Méthode de calcul de la valeur en pourcentage : Réelle Valeur = largeur et hauteur * valeur en pourcentage de l'élément ancêtre avec la largeur et la hauteur déterminées. Par défaut, la largeur des éléments au niveau du bloc est de 100 % et la hauteur est calculée en fonction du contenu. Ainsi, si l'élément ancêtre n'a pas de hauteur déterminée, alors la valeur en pourcentage ne peut pas être déterminée et sa valeur sera fixée à 0.

Si la hauteur de l'élément html est définie sur height : 100 % ; alors la hauteur de l'élément html changera avec la hauteur de la fenêtre.

Recommandations associées :

À propos de la fonctionnalité relative en CSS

L'attribut position, centrage horizontal absolu et relatif dans le style CSS

Dans l'attribut css position : la différence entre absolu et relatif

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn