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

风格	解释
solid	实线
dashed	虚线
dotted	点状线
double	双实线
groove	槽状线
ridge	脊线
inset	内嵌效果线
outset	外凸效果线

marge

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

• Paramètres globaux de la marge

赋值个数	方位
1	上下左右
2	上下|左右
3	上|左右|下
4	上|右|下|左

• 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

成员	解释
border-top-left-radius	左上 方位
border-top-right-radius	右上 方位
border-bottom-left-radius	左下 方位
border-bottom-right-radius	右下 方位

• 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

值
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

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.

值	描述
inline	内联
block	块级
inline-block	内联块

affichage

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

Les balises frères et sœurs se chevauchent en marge inférieure et en marge supérieure selon la valeur la plus grande

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!