Description du modèle de boîte CSS et exemples

1. Qu'est-ce qu'une boîte :

1. Le modèle de boîte est également appelé le modèle de boîte. Tous les éléments de la page peuvent être considérés comme des boîtes

2. La boîte est la. conteneur de l'élément. Elle est aussi le porteur des éléments. En termes humains, la boîte est la maison des éléments

2. Types et fonctions des boîtes :

1. Il existe deux types. d'éléments : éléments de niveau bloc et éléments en ligne, donc Leur maison correspondante : les boîtes, bien sûr, il existe deux types : les boîtes de niveau bloc, les boîtes en ligne

2. Les boîtes de niveau bloc sont généralement utilisées comme conteneurs pour les autres éléments, et les boîtes en ligne contiennent toujours du contenu. Habituellement, les boîtes en ligne sont placées

dans des boîtes au niveau du bloc 3. Disposition des boîtes :

1. Les boîtes sont l'ordre de disposition sur la page, ce qui est décidé par le planificateur en chef : le flux des documents, à moins que la boîte ne s'enfuie de chez elle Rompre avec le flux des documents

2. Le flux des documents est à la fois la manière dont les éléments sont disposés et l'action de les agencer, donc il. est à la fois un nom et un verbe

4. Composants du modèle de boîte :

1. Parce que les boîtes sont principalement utilisées comme conteneurs d'éléments, nous utilisons principalement des boîtes au niveau du bloc comme exemple pour introduire

2. Les quatre composants majeurs d'une boîte : contenu, padding, border (border), margin (marge extérieure)

5. On utilise quatre beautés pour mémoriser rapidement le modèle de boîte :

1. Contenu : Notre propre femme ou petite amie, c'est pour voir Quelque chose de visible et de tangible

2. Rembourrage : Il est transparent, tout comme le meilleur ami de votre femme, cela affecte toujours la relation entre toi et ta femme

3. frontière Frontière : Elle est visible, elle est changeante, charmante, la plus sensuelle et coquette, tout comme votre confidente, amant de rêve ou petit amant

4.margin marge extérieure : et bord intérieur rembourré La distance est également transparente, tout comme la femme du patron ou la femme de votre copain, elles vivront toujours dans votre imagination

6. Contenu :

1. Largeur du support et paramètres de hauteur

2. L'intérieur peut être un élément de bloc ou un élément en ligne

3. Prend en charge les paramètres d'arrière-plan

7. rembourrage :

1 . Prend en charge le réglage de la taille dans quatre directions, disposées dans le sens des aiguilles d'une montre : haut, droite, bas, gauche

2. Vous pouvez également définir

padding-top : marge supérieure

padding. -right : marge droite

padding-bottom : marge inférieure

padding-left : marge gauche

3. Abréviation de support :

padding : 10px 5px 10px 5px ; jusqu'à 10px, 5px à droite, 10px inférieur, 5px inférieur

remplissage : 10px 20px 30px ; 🎜>

rembourrage : 10px ; haut, droite, bas et gauche sont tous 10px

8. Marge :

1. Prise en charge du réglage de la taille dans quatre directions, dans le sens des aiguilles d'une montre. Disposition : haut, droite. , en bas, à gauche

2. Vous pouvez également définir

individuellement margin-top : marge supérieure

margin-right : marge droite

margin-bottom : marge inférieure

marge gauche : marge gauche

3. Abréviation de support :

marge : 10px 5px 10px 5px haut 10px, droite 5px, bas 10px, bas 5px ;

marge : 10px 20px 30px ; haut 10px, gauche et droite 20px, bas 30px

marge : 10px 20px haut et bas, gauche et droite 20px

marge : 10px ; Haut, droite, bas et gauche sont tous 10px

9. Bordure :

1. Les marges intérieure et extérieure sont transparentes et invisibles, donc seule la largeur peut être définie

2 La bordure est visible, elle a donc trois sous-propriétés qui peuvent être définies : largeur, style, couleur

3. Définition de l'ordre : haut, droite, bas, gauche

Définir la bordure supérieure :

border-top-width : 5px ; //Définir la largeur

border-top-style : solid ; //Définir le style

border- top-color: #f60; // Définir la perspective/couleur

Border-TOP: 5px solid #f60; // Brief

Définir le bon cadre :

border -width : 10px ;

border-right-style : dashed;

border-right-color : #888;

border-right : 10px dashed #888;

Définissez la bordure inférieure :

border-bottom-width : 10px ;

border-bottom-style : solid ;

border-bottom-color : #555;

border-bottom : 10px solid #555;

Définir la bordure gauche :

border-left-width : 8px;

border- style de gauche : pointillé ;

border-left-color : #333;

border-left : 8px pointillé #333;

Toutes les bordures utilisent le même paramètre :

border-width : 10px ; //Définir la largeur des quatre bordures de manière uniforme

          border-style: solid;                                  using using using using using                     use using une image. La mise en œuvre peut désormais être réalisée via du code

. 2 : La bordure a quatre sommets, qui peuvent être définis pour chaque sommet

2.1 : Bordure du coin supérieur gauche-haut-gauche-radius : 20px

2.2 : Bordure du coin supérieur droit-haut ; -right-radius:20px;

2.1 : Bordure du coin inférieur droit-bottom-right-radius :20px;

2.1 : Bordure du coin inférieur gauche-bas-gauche-radius :20px;

Remarque : Les étrangers pensent différemment de nous. Dans l'attribut, haut, haut et bas sont écrits avant la gauche et la droite

.

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!