Comment implémenter une mise en page réactive en CSS-tutoriel CSS-php.cn

Comment implémenter une mise en page réactive en CSS

青灯夜游

Libérer： 2023-01-06 11:12:52

original

13437 Les gens l'ont consulté

Comment implémenter une mise en page réactive avec CSS : 1. Utilisez une mise en page flexible, qui présente les avantages d'un code simple et d'une mise en page pratique ; 2. Utilisez une mise en page absolue, combinée avec des médias pour obtenir une mise en page réactive ; , les avantages C'est facile à écrire ;4. Utilisez la disposition float, qui présente l'avantage d'une meilleure compatibilité.

Comment implémenter une mise en page réactive en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Une brève introduction aux quatre méthodes de mise en page réactive

Code HTML total

<body>
    <div class="box">
        <div class="left">left</div>
        <div class="center">中间</div>
        <div class="right">right</div>
    </div>
</body>

Copier après la connexion

flex Layout

.box{
    width: 100%
    height: 100px;
    display: flex;
}
.left{
    width: 300px;
    background-color: purple;
}
.center{
    flex: 1;
    background-color: pink;
}
.right{
    width: 300px;
    background-color: burlywood;
}

Copier après la connexion

Avantages

Code simple, mise en page pratique

Inconvénients

S'il y a du contenu au milieu, il ne sera pas plus petit lorsqu'il est réduit au minimum
et la largeur des côtés gauche et droit deviendra plus petite

Comment implémenter une mise en page réactive en CSS

Mise en page absolue

.box{
    position: relative;
    width: 100%;
    height: 100px;
}
.left{
    position: absolute;
    left: 0px;
    width: 300px;
    background-color: pink;
}
.right{
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: pink;
}
.center{
    position: absolute;
    left: 300px;
    right: 300px;
    background-color: burlywood;
}
@media (max-width: 600px){
    .left,.right{
       /* 平分屏幕 */
        width: 50%;
    }
}

Copier après la connexion

Avantages

L'utilisation de médias en combinaison peut obtenir une mise en page réactive

Inconvénients

L'écriture du code est complexe et la mise en page est lourde
Si vous n'utilisez pas de support pour diviser l'écran de manière égale , et la largeur est inférieure à 600, le côté droit couvrira le côté gauche

disposition en grille

.box{
    display: grid;
    grid-template-columns: 300px 1fr 300px;
    grid-template-rows: 100px;
}
.left,.right{
    background-color: pink;
}
.center{
    background-color: burlywood;
}

Copier après la connexion

Avantages

Facile à écrire

Inconvénients

Quand il y a du contenu au milieu, il ne peut pas continuer à rétrécir
La largeur sera fixe. Lorsque la largeur de la page Web est inférieure à la largeur fixe, le bas peut être glissé

disposition flottanteLa largeur sera fixe. 🎜>

Le flux flottant doit changer les positions droite et centrale

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>

Copier après la connexion

rrree

Avantages

Relativement simple, meilleure compatibilité

Inconvénients

Deux blocs flottant dans la même rangée doivent être dans l'ordre. Écrivez-les ensemble (c'est-à-dire écrivez les p de gauche et de droite dans l'ordre
Après la compression et le rétrécissement, des sauts de ligne se produiront
Le contenu au milieu ne disparaîtra pas

Solution

.box{
    height: 200px;
}
.left{
    float: left;
    width: 300px;
    background-color: pink;
}
.right{
    float: right;
    width: 300px;
    background-color: pink;
}
.center{
    margin:0 300px;
    background-color: burlywood;
}

Copier après la connexion

Le troisième problème

la disposition flexible peut augmenter la hauteur de l'élément parent en fonction de n'importe quelle hauteur interne
La disposition en grille peut également augmenter la hauteur de l'élément parent en fonction de n'importe quelle hauteur interne

Partage vidéo d'apprentissage : tutoriel vidéo CSS

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!