Quel est le modèle de boîte CSS ? Une brève introduction au modèle de boîte CSS

Le contenu de cet article porte sur quel est le modèle de boîte CSS ? Une brève introduction au modèle de boîte CSS a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère qu'elle vous sera utile.

Modèle de boîte

1. Définition

1. Tout élément peut être utilisé comme modèle de boîte
2. /height )+margin(padding)+border(border)
3. La boîte est affectée par la marge extérieure (marge), qui affecte la position de la boîte
Modèle de boîte généralisé : toutes les balises fonctionnelles et de contenu dans le document et toutes les balises d'affichage.
Modèle de boîte étroite : balises qui existent sous forme de bloc dans les documents (les balises de niveau bloc ont 100 % des caractéristiques du modèle de boîte et sont les plus couramment utilisées)

2. Introduction aux membres du modèle de boîte

contenu

• Spécifiez le contenu

• en définissant la largeur et la hauteur du bloc. Les balises -level peuvent définir leur propre largeur et hauteur. La largeur par défaut est la largeur parent (width=auto), la hauteur est automatique (développée par le contenu)

• Les balises en ligne ne peuvent pas être définies. leur propre largeur et hauteur, et la valeur par défaut est automatique (développée par le contenu)

border

• border (border) se compose de trois parties : border-width (largeur), border-color (couleur) et border-style (style)

• membres de la bordure : border-left, border-right, border-top, border- bottom

• border-width membres : border-left -width, border-right-width, border-top-width, border-bottom-width

• membres border-color : border-left-color, border-right-color, border -top-color, border-bottom-color

• membres border-style : border- style gauche, style bordure droite, style bordure haut, style bordure bas

marge

• marge membres : margin-left, margin-right, margin-top, margin-bottom

• Paramètres globaux de la marge

• Résumé : 1. Spécifier la position de départ 2. Dans le sens des aiguilles d'une montre 3. Ne pas chercher le côté opposé

3. Filet de bordure

bordure-rayon

• membre de rayon-frontière

• Réglage d'une seule direction

Nombre d'affectations (type de valeur : longueur ou pourcentage) : 1 Interprété comme : Horizontal et vertical
Nombre d'affectations ( valeur Type : longueur ou pourcentage) : 2 Interprété comme : Horizontal | Vertical

• Paramètre global divisé

Format : 1/1 Interprété comme : Horizontal|Vertical

4. Autres attributs associés

• max|min-width|height

• débordement

• value
  visible	Valeur par défaut. Le contenu ne sera pas coupé et sera rendu en dehors de la zone de l'élément.
  masqué	Le contenu sera être coupé et le reste du contenu est invisible.
  faire défiler	Le contenu sera être Trim, mais le navigateur affiche des barres de défilement pour afficher le reste du contenu.
  auto	Si le contenu est Trim, le navigateur affiche des barres de défilement pour afficher le contenu restant.
  hériter	Stipule que le L'élément parent hérite de la valeur de l'attribut overflow.

5. Disposition du modèle de boîte

• Introduction de base à la disposition du modèle de boîte

• Orientation de la mise en page : marge gauche, marge droite, marge supérieure, marge inférieure

• Influence Propre disposition : marge-gauche, marge-haut

• Influence disposition des frères et sœurs : marge-droite, marge-bas

avant/arrière : Valeurs positives/négatives

• fosse de disposition des marges

• De nombreuses balises sémantiques ont une marge par défaut

• Quel que soit Les chevauchements de la marge supérieure des balises parent et enfant sont plus grands

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!