Connaissance de base de la mise en page Web CSS (résumé)

Ce chapitre vous apporte les connaissances de base (résumé) de la mise en page Web CSS, afin que vous puissiez comprendre certains points de connaissances sur la mise en page Web CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. La première à la cinquième couche du modèle de boîte :

border, padding+content, background-image, background-color, margin

2. Effectuez les opérations suivantes sur les étiquettes affectées par le flottement :

1. clear : les deux ;

2. clear : right ; clear : left ;

3. Définir la largeur : 100% (ou largeur fixe) + débordement : caché ;

3. Scénarios d'utilisation de deux méthodes flottantes claires :

1. Lorsque l'élément enfant est défini pour flotter, l'élément parent ne l'est pas. défini sur float. Par conséquent, la hauteur de l'élément parent ne peut pas être automatiquement étendue et réduite à une ligne. Lorsque l'élément enfant déborde de l'élément parent, il convient d'utiliser la méthode de définition de la largeur : 100 % (ou fixe). valeur de largeur) + débordement : caché en même temps pour effacer le flotteur ; cette méthode peut en même temps, l'effet flottant du niveau de bloc immédiatement adjacent est supprimé. Il n'est pas nécessaire de supprimer l'effet flottant du bloc immédiatement adjacent. éléments de niveau affectés par l'effet de flottement.

2. Si un élément adjacent au niveau du bloc est affecté par le flottement, il est plus approprié de définir clear: two ou clear: left, clear: right pour le niveau de bloc affecté.

Remarque : définir la largeur sur 100 % hérite de la largeur du conteneur parent. Remplissez tout le récipient à gauche et à droite pour créer les conditions vous permettant de vider le flotteur. En ajoutant un masquage de débordement, la partie flottante du package peut être supprimée.

4. Caractéristiques de positionnement absolu :

1) Positionnement établi qui inclut la référence de bit de bloc

2) Complètement séparé du flux de documents standard

3. ) Ensuite, il a l'attribut offset et l'attribut z-index :

Lorsque le décalage n'est pas défini (à gauche, en haut) :
Que les éléments ancestraux aient été positionnés ou non, gardez-le hors du flux documentaire standard à l'emplacement initial de l'élément

Lors de la définition de l'offset : la référence pour la référence offset :
Aucun élément ancêtre positionné : utilisez comme référence de décalage
Il existe des éléments ancêtres positionnés : l'élément ancêtre positionné le plus proche est utilisé comme référence de décalage.

Remarque : Lorsqu'un élément est défini sur un positionnement absolu et qu'aucune largeur n'est définie, la largeur de l'élément est ajustée en fonction du contenu.

Question d'exercice : On sait qu'un élément b avec un positionnement absolu est situé dans son élément parent a. Si l'élément a est un élément statique, l'élément b sera décalé en fonction de (html).
Réponse : Parce que a est une position statique, elle doit être décalée en fonction de l'élément racine, qui est l'élément html (le positionnement statique est position:static, qui est l'attribut de positionnement par défaut de l'élément. Uniquement absolu, relatif, ou fixe peut être défini Calculez l'élément parent positionné.

5. Conseils pour masquer le texte du bouton :

Définissez l'indentation du texte : -999px et le débordement : caché ; Principe : utilisez d'abord l'instruction text-indent:-999px; pour "extraire" les éléments définis, puis masquez les éléments débordants, c'est-à-dire masquez les éléments évincés

6. Requête multimédia :

peut être utilisé pour les règles @media et @import en CSS, et peut également être utilisé en HTML et XML 1) écran @media et (largeur : 800px). 🎜> 2) @import url(example.css) screen et (largeur : 800px) ;

3)0

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!