Maison > Article > interface Web > Introduction au positionnement et au flottement CSS3

Introduction au positionnement et au flottement CSS3

不言original: 2018-07-02 10:51:461681parcourir

Cet article présente principalement les concepts de positionnement CSS3 et de flottement en détail, ainsi que l'exemple de code pour expliquer l'utilisation du positionnement et du flottement CSS3. Les amis intéressés peuvent s'y référer

Cet article est partagé avec. tout le monde. Les concepts de base et l'utilisation du positionnement et du flottant CSS3 sont pour votre référence. Le contenu spécifique est le suivant

1. 1. positionnement css :

Changer la position de l'élément sur la page

2. mécanisme de positionnement css :

Flux normal : Flottant :

Mise en page absolue :

3. Attributs de positionnement CSS :

position met l'élément dans une position statique, relative, absolue ou fixedécalage haut/gauche/droite/bas de l'élément haut/gauche/droite/basdébordement définit le débordement de l'élément Ce qui se passe dans sa zoneclip définit la forme de l'affichage de l'élément

vertical-align définit l'alignement de l'affichage de l'élément

z-index définit l'ordre d'empilement de l'élément/est utilisé pour définir le ordre d'empilement de l'élément, plus il y a d'attributs de position Au-dessus/

statique statique (par défaut)

disposition relative relative (par défaut)

disposition absolue absolue ( non lié aux autres balises) fixé (ne bougera pas lorsque la page défile)
Exemple de code :

Flottant

<body>   
    <p id="position1"></p>   
    <p id="position2"></p>   
    <script>   
        for (var i=0;i<100;i++){   
            document.write(i+"<br/>")   
        }   
    </script>   
</body>   
#position1{   
    width: 100px;   
    height: 100px;   
    background-color: blue;   
    position: relative;   
    left: 20px;   
    top: 20px;   
    /*用来设置元素的堆叠顺序，越大越在上方*/
    z-index: 2;   
}#position2{   
    width: 100px;   
    height: 100px;   
    background-color: red;   
    position: relative;   
    left: 30px;   
    top: 10px;   
    z-index: 1;   
}

Valeurs disponibles pour l'attribut float : left/right/none/inherit : gauche ou droite, non flottant, hérité du parent. * flotter

1. Après avoir flotté, éloignez-vous du flux normal et disposez-le dans le flux flottant. Tout élément est affiché sous forme d'élément de bloc, la largeur et la hauteur peuvent être définies et le contenu agrandit la largeur.

2. Lorsque plusieurs blocs flottants sont ensemble, ils trouvent toujours le bloc le plus proche d'eux et dans la même direction flottante pour déterminer leur position. S'ils sont obligés de s'enrouler, la hauteur de l'élément le plus proche sera utilisée comme base. pour le nouveau poste. Ligne

attribut clair : Supprimer les attributs flottants (y compris ceux hérités)

La signification est la même que celle correspondante ci-dessus

Situation où les attributs flottants ont besoin à effacer :

Une fois l'étiquette enfant flottante, la hauteur de l'étiquette parent ne peut pas être étendue, elle doit donc être effacée

Si l'étiquette nouvellement ajoutée ne veut pas l'être ; affecté par les éléments précédemment flottants, il doit être effacé ; 1 .clear:both; overflow:hidden

2.overflow:hidden; floats ;

3.after pseudo-object : set
.aa:after pour l'objet actuel {content:”.”}

.aa {display:inline-block;}

.aa { display:block;}
Trouvez un moyen de déclencher le mécanisme de rendu de mise en page d'IE6 et résolvez de nombreux bugs grâce au zoom chanceux : 1 peut être déclenché ! ! !
inline-block est pour les blocs internes et les lignes externes ;
4. La balise parent flotte ensemble
5.position:absolute; clear float

display

affichage : le bloc est affiché sous forme d'éléments de bloc ; affichage : aucun Le contenu disparaît et ne prend pas de place affichage : en ligne est affiché sous forme d'éléments en ligne, ce qui peut résoudre le double ; BUG d'IE6 ; affichage : le bloc en ligne est destiné aux blocs internes et aux lignes externes.

visibilité

: aucune

Masquer, mais prend toujours de la place et affecte la mise en page Ce qui précède représente l'intégralité du contenu de cet article , J'espère que cela sera utile à tout le monde. L'apprentissage est utile. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois ! Recommandations associées :

Analyse du flotteur et de la position CSS

Utilisez CSS3 pour définir une liste sans bords supérieur et inférieur Méthodes de séparation des lignes

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!

php css css3 Static Float 继承堆对象 display position overflow bug zoom

Déclaration：

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

Article précédent：Analyse du rendu du modèle de transformation en CSS3Article suivant：Analyse du rendu du modèle de transformation en CSS3

Articles Liés

Voir plus