Qu'est-ce qu'un modèle de boîte ?

Qu'est-ce qu'un modèle de boîte ?

Toute balise dans la page Web est équivalente à un modèle de boîte, et tous les modèles de boîte ont cinq attributs nécessaires : largeur, hauteur, remplissage, bordure, marge

Ensuite, comment calculer le réel. largeur d'un modèle de boîte dans une page web ? ? ? ?

Par exemple :

　　

La largeur du div ci-dessus doit être : width+2*padding+2border=300+2*20+2*1=342px;

padding : Padding : la distance entre le contenu et la bordure.

Les quatre attributs du padding : padding-top, padding-bottom, padding-left, padding-right.

largeur : largeur.

hauteur : hauteur.

border: border.

Écriture de bordure commune : border:1px solid #ccc; représentent respectivement la largeur, le type de ligne et la couleur de la bordure.

Les types de lignes courants sont : plein (ligne continue), pointillé (ligne pointillée), pointillé (ligne pointillée).

Les trois attributs de base de la bordure : border-width (largeur de la bordure), border-style (style de ligne de la bordure), border-color (couleur de la bordure)

maigin : distance du bord extérieur.

Les quatre attributs de base de la marge : marge-haut, marge-bas, marge-gauche, marge-droite.

Points à noter lors de l'utilisation de la marge :

1. Collapse : un effondrement de marge existe entre les éléments au niveau du bloc. Si l'élément devient un élément en ligne ou un élément de bloc en ligne, il ne s'effondrera pas. L'élément ne s'effondrera pas s'il quitte le flux de documents standard.

2. Utilisez margin pour centrer la boîte : margin:0 auto;

Lorsque vous utilisez margin:0 auto pour centrer la boîte, veuillez noter : la boîte doit avoir une largeur libre. La case doit être dans le flux documentaire standard. margin:0 centre automatiquement la boîte, pas le contenu à l'intérieur de la boîte.

Pour centrer le texte dans la boîte, vous pouvez utiliser : text-align:center; (de gauche à droite : text-align:left/right;)

Conseils : Si vous souhaitez déplacez la position des éléments enfants, il est recommandé d'utiliser le remplissage de l'élément parent au lieu de la marge de l'élément enfant sauf si nécessaire. Si une marge doit être utilisée, l'élément parent doit avoir une bordure

. Lorsque vous utilisez CSS, essayez autant d'abréviations que possible.

padding:10px 20px ; signifie que le remplissage supérieur et inférieur est de 10 px, et que le remplissage gauche et droit est de 20 px.

padding : 10px 20px 30px ; signifie que le remplissage supérieur est de 10, le remplissage inférieur est de 30px et les remplissages gauche et droit sont de 20px.

remplissage : 10px 20px 30px 40px ; respectivement à droite et à gauche.

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn