Modèle de boîte et mode d'affichage des éléments

Modèle de boîte

Lorsque css traite une page Web, il pense que chaque élément est contenu dans une boîte invisible, qui est le modèle de boîte. La boîte se compose d'une zone de contenu, d'un remplissage, d'une bordure et d'une marge. Insérez la description de l'image ici

Rembourrage

La marge intérieure de l'élément se situe entre la bordure et la zone de contenu. L'attribut qui contrôle cette zone est l'attribut de remplissage. La propriété padding accepte une valeur de longueur ou une valeur de pourcentage (basée sur le pourcentage de la largeur de l'élément parent), mais les valeurs négatives ne sont pas autorisées.

padding-top: définit le rembourrage supérieur de l'élément.
padding-right: définit le remplissage droit de l'élément.
padding-bottom: définit le remplissage inférieur de l'élément.
padding-left: définit le remplissage gauche de l'élément.
padding: attribut abrégé. La fonction est de définir tous les attributs de remplissage de l'élément en une seule déclaration . Acceptez 1 ~ 4 valeurs d'attribut, la signification d'accepter différents nombres de valeurs d'attribut est comme l'exemple de code suivant.

padding:10px;
/*4个内边距均为10px*/
padding:10px 5px;
/*上内边距和下内边距为10px，右内边距和左内边距为5px*/
padding:10px 5px 15px;
/*上内边距为10px，右内边距和左内边距为5px，下内边距为15px*/
padding:10px 5px 15px 20px;
/*上内边距是10px,右内边距是5px，下内边距是15px，下内边距是20px*/

Autrement dit, vous pouvez utiliser la copie de valeur . CSS définit quelques règles:

Si la valeur du remplissage gauche est manquante, la valeur du remplissage droit sera utilisée.
Si la valeur du remplissage inférieur est manquante, la valeur du remplissage supérieur est utilisée.
Si la valeur du remplissage droit est manquante, la valeur du remplissage supérieur est utilisée.

Lorsque les valeurs du remplissage gauche et droit sont différentes, 4 valeurs d'attribut sont utilisées, que le haut et le bas soient identiques ou non.

Frontière

La bordure d'un élément est constituée d'une ou plusieurs lignes qui entourent le contenu et les marges intérieures de l'élément. La propriété border de css est utilisée pour spécifier le style, la largeur et la couleur de la bordure .

border-style : définissez le style de la bordure ( attribut obligatoire, il n'y a pas de bordure sans style de bordure ). 10 styles différents sans héritage sont définis, dont aucun. Parmi eux, les pointillés, les tirets, les solides, etc. sont couramment utilisés. La valeur de la propriété peut être copiée à l'aide de la valeur
border-top (right, bottom, left) -style: Définit le style de bordure d'un certain côté.
border-width : spécifiez la largeur de la bordure . Il existe deux façons de spécifier la largeur de la bordure, vous pouvez spécifier la valeur de longueur, telle que 2px ou 0,1em; ou utiliser l'un des trois mots-clés, ils sont fins, moyens (par défaut) et épais. La valeur d'attribut peut être copiée à l'aide de la valeur .
border-top (right, bottom, left) -width: Définit la largeur d'une bordure d'un certain côté.
border-color : définissez la couleur de la bordure . Sa valeur a la forme de color_name, hex_number, rgb_number, transparent, inherit, etc. La valeur d'attribut peut être copiée à l'aide de la valeur.
border-top (right, bottom, left) -color: Définit la couleur de la bordure d'un certain côté.
border-top (right, bottom, left) : propriété abrégée, utilisée pour définir toutes les propriétés de la bordure supérieure (droite, inférieure, gauche ) sur la même déclaration. Vous pouvez définir les valeurs de style de bordure, de largeur de bordure et de couleur de bordure en même temps dans la même déclaration. Il est également possible de ne pas définir l'une des valeurs. Par exemple, border-left: solid # f0a;
border: attribut abrégé, utilisé pour définir les attributs des quatre côtés d'une instruction .

Puisque la valeur par défaut de border-style est none, si aucun style n'est déclaré, cela équivaut à border-style: none. Par conséquent, un style de bordure doit être déclaré pour qu'une bordure apparaisse.

p{
    
    
    border-style:none;
    border-width:50px;
}
/*尽管边框的宽度是50px，但是边框样式设置为 none。在这种情况下，不仅
边框的样式没有了，其宽度也会变为0。这是因为如果边框样式为 none，即边
框根本不存在，那么就不可能有边框宽度，因此边框宽度自动设置为 0，而不
论你原先定义的是什么。*/

Marge

Les marges sont des bordures et la zone invisible à l'extérieur des bordures qui séparent les éléments des éléments adjacents. Le moyen le plus simple de définir la marge consiste à utiliser la propriété margin, qui accepte toute unité de longueur, valeur de pourcentage ou même valeur négative.

margin-top: définit la marge supérieure de l'élément.
margin-right: définit la marge droite de l'élément.
margin-bottom: définit la marge inférieure de l'élément.
margin-left: définit la marge gauche de l'élément.
margin: Un attribut abrégé de la marge de l'élément, qui peut être copié par valeur.

On peut voir que les propriétés abrégées impliquant un seul style (hors bordure) peuvent être copiées par valeur; par exemple: padding, margin, border-style, border-width, border-color .

Problème de fusion des marges

La fusion des marges signifie que lorsque deux marges verticales se rencontrent, elles forment une seule marge.

Lorsqu'un élément apparaît au-dessus d'un autre élément, la marge inférieure du premier élément fusionnera avec la marge supérieure du deuxième élément. comme le montre l'image:
Lorsqu'un élément est contenu dans un autre élément (en supposant qu'il n'y a pas de marge intérieure ou de bordure séparant les marges extérieures), leurs marges supérieures ou inférieures fusionneront également. comme le montre l'image:

Dans la première situation de fusion, la valeur la plus élevée de la marge sera utilisée au lieu de la somme des deux valeurs.

Le deuxième cas peut être:

Ajouter une bordure à l'élément parent

Ajouter un rembourrage supérieur à l'élément parent

Ajouter l'attribut overflow: hidden sur l'élément parent

Mode d'affichage des éléments

Chaque élément est soit affiché sur une ligne distincte (telle que div, p, h1 ~ h6, etc.) soit affiché sur une ligne (telle que em, span, a, etc.) par défaut. Le mode d'affichage d'un élément fait référence à la façon dont l'élément est affiché . Un élément qui occupe une ligne est appelé un élément de niveau bloc, et un élément qui est affiché dans la même rangée d'éléments adjacents est appelé un élément en ligne. Il existe également plusieurs balises spéciales dans les éléments en ligne <img />, <input />, <td>, elles ont à la fois les caractéristiques des éléments de bloc et des éléments en ligne, appelées éléments de bloc en ligne.

Les caractéristiques des éléments de niveau bloc: une seule ligne, la hauteur, la largeur, les marges intérieure et extérieure peuvent être définies. Si la hauteur n'est pas définie, elle sera prise en charge par le contenu de l'élément, et la largeur par défaut est la largeur de l'élément parent.
Caractéristiques des éléments en ligne: les éléments en ligne adjacents sont affichés sur la même ligne, et la largeur et la hauteur sont directement définies comme invalides (pris en charge par le contenu).
Caractéristiques des éléments de bloc en ligne: plusieurs éléments de bloc en ligne peuvent être logés dans une rangée. La hauteur, la largeur, les marges intérieure et extérieure peuvent toutes être définies. La largeur et la hauteur sont prises en charge par le contenu par défaut.

l'attribut d'affichage, l'attribut d'affichage est utilisé pour changer le mode d'affichage de l'élément . Les modes d'affichage correspondant aux différentes valeurs d'attribut sont les suivants:

valeur	la description
rien	Cet élément ne sera pas affiché.
bloquer	Cet élément sera affiché comme un élément de niveau bloc avec des sauts de ligne avant et après l'élément.
en ligne	Par défaut, cet élément sera affiché comme un élément en ligne sans saut de ligne avant et après l'élément.
bloc en ligne	Élément de bloc en ligne.
élément de liste	Cet élément sera affiché sous forme de liste.

Remarque : pour les éléments en ligne, vous ne pouvez pas définir directement des attributs tels que la hauteur, la largeur, la marge intérieure et la marge extérieure. Le mode d'affichage de l'élément doit être converti en un élément de bloc ou un élément de bloc en ligne avant le réglage, sinon il sera invalide ou un problème se produira.

Poussière / 2020/12/19