CSS et div sont tous deux des codes de langage indissociables de la mise en page. Cet article partage principalement avec vous les connaissances de base de la mise en page div et css, en espérant aider tout le monde.
1 mise en page p+css ?
Mots clés : position de la boîte
marge
padding
float
position
Qu'avez-vous appris ? En gros, il suffit d'apprendre à positionner la box (p)
Modèle 2 Box ?
largeur : largeur
hauteur : hauteur
bordure : bordure
marge : marge extérieure
remplissage : marge intérieure
Fonction : la position utilisée pour placer le contenu
2.1 margin
Règle : remplissage de la marge : quatre côtés (haut, bas, gauche et droite)
border-left
border-right
border-top
border-bottom
2.2 Problèmes simples à noter concernant la marge :
Le corps a une marge par défaut : chrome 8px
Si les marges des cases supérieure et inférieure sont définies, la distance entre les deux cases est basée sur la plus grande marge (effondrement des marges)
Centrer la boîte : margin : 10px auto ;
3 marges intérieures de remplissage
Fonction : Utilisé pour ajuster le placement du contenu à l'intérieur de la boîte
Remarque : Après avoir défini le remplissage, la boîte extérieure sera intégrée Plus grande ? Impact : affecte la mise en page de l'ensemble de la page Web
La largeur totale de la boîte : 300(largeur) + padding-left/right(10+10) + border-left/right(5+5) = 330
4 Éléments de niveau bloc et éléments en ligne
Éléments de niveau bloc : p h1 p li, etc. S'ils occupent une ligne seule, la largeur et la hauteur peuvent être définies
Éléments en ligne : span i a img , etc. Lorsqu'ils sont affichés dans une ligne, la largeur et la hauteur ne peuvent généralement pas être définies
Convertir les éléments en ligne en éléments de niveau bloc : après la conversion, vous pouvez prendre en charge les règles de largeur et de hauteur
: disposition p+css , margin, padding, float et position sont tous liés à la position. Placez la boîte dans la position appropriée
5 float float
Flux normal : les règles de tri naturelles des éléments lors de règles CSS spéciales. tels que le positionnement et le flottement ne sont pas utilisés
Float : hors du flux normal, les éléments peuvent se déplacer à gauche et à droite
float:left
float:right
Fonction : Faire la disposition gauche et droite du box
Problèmes causés par le flottement : cela peut affecter la disposition des éléments suivants
Solution : après le flottement, Float doit être effacé après l'élément
float : disposition gauche et droite
marge : ajuster la distance entre les cases
remplissage
position : fonction de positionnement en position fixe - l'élément peut être placé dans n'importe quelle position
6 Positionnement relatif
postion : relatif
Objet de référence : Qui ce positionnement est-il fonction de ? Votre propre position initiale avant le positionnement n'est pas utilisée
Pour changer la position, un décalage est requis Montant
gauche : 100px
Décalage vers la droite de 100px en fonction de la position avant le positionnement n'est pas utilisé
7 Positionnement absolu
position:absolute
Objet de référence : 1 Dans l'élément parent 2 avec l'attribut de positionnement et recherche le parent le plus proche
avec l'attribut de positionnement : gauche en haut à droite en bas
L'ordre de recherche de la référence : recherchez d'abord l'élément parent, S'il y a un attribut de position (position), l'élément parent sera utilisé comme référence pour offset
Sinon. trouvé, recherchez les couches externes une par une jusqu'à ce qu'un élément avec un attribut de position soit trouvé, s'il n'y en a pas, utilisez le dernier L'élément html externe
est décalé pour l'objet de référence
8 Positionnement fixe.
Objet de référence : zone visible du navigateur
9 Exercices
10. Autres sélecteurs
sélecteur : méthode de sélection des éléments id ==> # class ==> ==> Nom de l'étiquette
10.1 Sélecteur adjacent ==> + Sélectionner les éléments adjacents derrière un élément
10.2 Sélecteur multi-éléments ==> , scénario d'application : il y a plusieurs éléments avec le mêmes attributs (et de nombreux codes sont répétés et peuvent être extraits et rendus publics)
10.3 Sélecteur descendant ==> Espace, scénario d'application : sélectionner les éléments descendants qui remplissent les conditions
10.4 Élément enfant selector ==>gt; > , scénario d'application : sélectionnez ceux qui remplissent les conditions. Éléments enfants conditionnels
Remarque : les éléments enfants ne peuvent sélectionner que l'élément de niveau suivant. Les sélecteurs descendants peuvent sélectionner n niveaux d'éléments ci-dessous. 🎜> Fonction : Ils sont tous utilisés pour sélectionner facilement des éléments
nom
nom = valeur
name ^= val
name $= val
Peut être compris comme des conditions de filtrage
marge
padding
float
position
Qu'avez-vous appris ? En gros, il suffit d'apprendre à positionner la box (p)
Modèle 2 Box ?
hauteur : hauteur
bordure : bordure
marge : marge extérieure
padding : marge intérieure
fonction : la position utilisée pour placer le contenu
2.1 margin
Règle : remplissage de la marge : quatre côtés (haut, bas, gauche et droite)
border-leftborder-right
border-top
border-bottom
2.2 Problèmes simples à noter concernant la marge :
Le corps a une marge par défaut : chrome 8px
Si les marges des cases supérieure et inférieure sont définies, la distance entre les deux cases est basée sur la plus grande marge (effondrement des marges)
Centrer la boîte : margin : 10px auto ;
3 marges intérieures de remplissage
Fonction : Utilisé pour ajuster le placement du contenu à l'intérieur de la boîte
Remarque : Après avoir défini le remplissage, la boîte extérieure sera intégrée Plus grande ? Impact : affecte la mise en page de l'ensemble de la page Web
La largeur totale de la boîte : 300(largeur) + padding-left/right(10+10) + border-left/right(5+5) = 330
4 Éléments de niveau bloc et éléments en ligne
Éléments de niveau bloc : p h1 p li, etc. S'ils occupent une ligne seule, la largeur et la hauteur peuvent être définies
Éléments en ligne : span i a img , etc. Lorsqu'ils sont affichés dans une ligne, la largeur et la hauteur ne peuvent généralement pas être définies
Convertir les éléments en ligne en éléments de niveau bloc : après la conversion, vous pouvez prendre en charge les règles de largeur et de hauteur
: disposition p+css , margin, padding, float et position sont tous liés à la position. Placez la boîte dans la position appropriée
5 float float
Flux normal : les règles de tri naturelles des éléments lors de règles CSS spéciales. tels que le positionnement et le flottement ne sont pas utilisés
Float : hors du flux normal, les éléments peuvent se déplacer à gauche et à droite
float:left
float:right
Fonction : Faire la disposition gauche et droite du box
Problèmes causés par le flottement : cela peut affecter la disposition des éléments suivants
Solution : après le flottement, Float doit être effacé après l'élément
float : disposition gauche et droite
marge : ajustez la distance entre les cases
remplissage
position : fonction de positionnement en position fixe - vous pouvez placer l'élément dans n'importe quelle position
6 Positionnement relatif
postion : relatif
Objet de référence : Qui ce positionnement est-il conforme à ? Avant que le positionnement ne soit utilisé, sa position initiale
Un décalage est nécessaire pour changer la position Montant
gauche : 100px
Décalage vers la droite de 100px en fonction de la position avant le positionnement n'est pas utilisé
7 Positionnement absolu
position:absolute
Objet de référence : 1 Dans l'élément parent 2 avec attribut de positionnement et recherche le parent le plus proche
avec attribut de positionnement : gauche en haut à droite en bas.
L'ordre de recherche de la référence : recherchez d'abord l'élément parent, S'il existe un attribut de position (position), l'élément parent sera utilisé comme référence pour compenser
S'il n'est pas trouvé, recherchez le. calques externes un par un jusqu'à ce qu'un élément avec un attribut de position soit trouvé. S'il n'y en a pas, utilisez le dernier L'élément html
externe est décalé pour l'objet de référence
8 Positionnement fixe
Référence. objet : zone visible du navigateur
9 Exercices
10. Autres sélecteurs
sélecteur : méthode de sélection des éléments id ==> # class ==> Nom de l'étiquette
10.1 Sélecteur adjacent ==> + Sélectionner les éléments adjacents derrière un élément
10.2 Sélecteur multi-éléments ==> , scénario d'application : il existe plusieurs éléments avec les mêmes attributs (et de nombreux codes sont répétés et peuvent être extraits et rendus publics )
10.3 Sélecteur descendant ==> Espace, scénario d'application : sélectionner les éléments descendants qui remplissent les conditions
10.4 Sélecteur d'élément enfant ==> gt; > , scénario d'application : sélectionnez ceux qui remplissent les conditions. Éléments enfants conditionnels
Remarque : les éléments enfants ne peuvent sélectionner que l'élément de niveau suivant. Les sélecteurs descendants peuvent sélectionner n niveaux d'éléments ci-dessous. Ils sont tous utilisés pour sélectionner facilement des éléments
nom
nom = valeur
nom ^ = val
name $= val
Peut être compris comme des conditions de filtrage
Six exemples de méthodes de mise en page CSS à trois colonnes
Utilisation CSS Explication détaillée de la position : implémentation collante d'exemples de mise en page collants
Plusieurs exemples de mise en page de pages Web 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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
