Maison > Article > interface Web > Introduction au positionnement et au flottement CSS3
Introduction au positionnement et au flottement CSS3
- 不言original
- 2018-07-02 10:51:461693parcourir
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émentz-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 absolue absolue ( non lié aux autres balises) fixé (ne bougera pas lorsque la page défile)
Exemple de code :
<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
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)
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: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é
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
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!