Résumé des propriétés CSS

- Attributs qui s'appliquent uniquement aux éléments de niveau bloc

largeur, hauteur (ces deux peuvent être utilisés pour remplacer des éléments)

texte—aligner, texte— indent, vertical —align (peut également être utilisé pour les cellules du tableau et les éléments de remplacement tels que input/img)

background-position (notez la différence entre le pourcentage et la valeur absolue, et cet attribut affectera l'effet de mosaïque)

---

[Formatage visuel de base]

1. Modèle de boîte  :
- l'arrière-plan comprend la zone de contenu, la marge intérieure et la bordure. transparent, montrant le parent L'arrière-plan de l'élément ;

2. Attributs horizontaux  :

- marge gauche (droite), remplissage gauche (droite), gauche (droite). ) bordure et contenu de l'élément enfant La somme des valeurs de la largeur de la boîte doit être égale à la largeur de la boîte de contenu de l'élément parent

-si deux des marges gauche, marge droite et largeur ; (seules ces trois valeurs​​peuvent être définies sur auto) sont définies, valeur spécifique, la valeur restante est auto, puis la valeur d'attribut définie sur auto sera automatiquement calculée pour remplir la largeur de l'élément parent :

 ＊ 如果三个值都为非auto的特定值（over constrained），那么margin-right会被强制设置为auto；
 ＊ 如果margin中某一个设置为auto，另一个设置特定值，width设置为auto，则设置为auto的margin会被置为0；
 ＊ 如果width设置为特定值，两个margin设置为auto，则会**水平居中**！！

- Le remplissage de l'élément parent chevauchera la marge de l'élément enfant

- La largeur par défaut d'un élément non remplacé est déterminée par son contenu ; L'élément remplacé est défini sur auto (comme img), alors sa valeur sera sa largeur d'origine ; si seule la largeur est définie, la hauteur changera proportionnellement, vice versa.

3. Attribut vertical  :

est similaire à l'attribut horizontal, la différence/note est :

- Si marge supérieure ou marge inférieure S'il est défini sur auto, il sera par défaut à 0, il ne peut donc pas être centré verticalement à moins que le paramètre ne soit affiché avec une valeur spécifique
- Lors de l'utilisation d'un pourcentage pour définir la hauteur d'un élément enfant, si la valeur de hauteur est ; l'élément parent n'est pas défini explicitement, alors la hauteur de l'élément enfant sera. Elle sera par défaut auto
- Si l'élément parent ne contient que des éléments enfants au niveau du bloc, alors la hauteur de l'élément parent n'inclura pas le marge de l'élément enfant, sauf si l'élément parent a une bordure ou un remplissage ! ! Pourquoi, parce que les marges dans le sens vertical se chevauchent. De ce point de vue, pour éviter les chevauchements, vous devez utiliser border et padding pour séparer les marges adjacentes

Éléments en ligne  :
- line-height (hauteur de la boîte de ligne) pour un élément remplacé, la hauteur de son contenu. Par conséquent, l'élément remplacé n'a pas d'interligne (line-height - font-size) ; pour les éléments non remplacés, c'est la hauteur de sa zone de contenu plus l'interligne
- pour les lignes qui contiennent uniquement du texte, le l'espacement interligne peut être modifié Uniquement la hauteur de ligne, la taille de la police et l'alignement vertical.

Éléments non-remplacement :

- Lorsque la valeur de la hauteur de ligne est inférieure à la taille de la police, un chevauchement de texte peut se produire. Pour éviter ce phénomène, définissez la ligne-. height à 1 em (la taille de la police doit être définie) ou 1 (facteur de mise à l'échelle basé sur la taille de la police). De plus, il héritera de la valeur calculée de l'élément parent plutôt que de la valeur littérale, sauf définition explicite ; >

- le contenu de l'élément en ligne Les marges, les marges et les bordures n'affectent pas la hauteur de la ligne. Les marges extérieures ne sont valables que pour la gauche et la droite, pas pour le haut et le bas ; mais s'il y a un remplissage positif et un arrière-plan, ils peuvent couvrir les lignes adjacentes (cela n'affecte toujours pas la hauteur et la disposition des lignes, c'est-à-dire la ligne). la hauteur ne changera pas si le remplissage est défini) hauteur);

Éléments de remplacement :

- Les marges intérieures, les marges extérieures et les bordures des éléments en ligne affecteront la ligne. hauteur, et les marges supérieure et inférieure sont valides.

- La définition d'une valeur de hauteur pour img affectera la hauteur de ligne, mais la valeur effective de line-height ne changera pas. Certains attributs tels que vertical-align utilisent toujours la valeur effective de line-height pour le calcul
; - Si un élément de remplacement qui est le seul descendant d'un élément de niveau bloc ou d'une cellule de tableau sera placé sur la ligne de base, comme img dans p. Solution : utilisez une marge négative pour la dérouler vers le bas ou définissez l'affichage sur bloquer pour éviter de générer des zones de ligne.

4. Autre

- attribut d'affichage :

   * 设置元素display属性为inline-block时， 其表现类似行内替换元素；如果没有显式定义width，则它会自动收缩以适应内容宽度，也就是说会使其宽度刚好能包含所有内容且没有多余；
   * 设置元素display属性为run-in，表示如果该元素后面是一个display为block的元素，则该元素表现为行内元素放在后面那个元素的开头，否则其本身将显示为块级元素。
   * 对于浮动或绝对定位元素，计算值与声明值可能不同。除inline-table之外大部分声明值（包括inline，inline-block，run-in）都会被计算为block。

---

［bordure, marge, remplissage］

1. marge

   - Si vous utilisez un pourcentage, la valeur calculée est relative à la valeur de largeur (et non de hauteur) de l'élément parent. Même si c’est en marge !
   

2. border

   - La valeur par défaut sera utilisée si la valeur n'est pas spécifiée, par exemple :
   

   { border: solid 1px dotted;
     border: 1px;
   }

   Le deuxième paramètre de bordure ici remplacera le premier un, Puisque border-style n'est pas défini dans le deuxième article, la valeur par défaut est none, donc il n'y aura pas de bordure

---

[Flottant et positionnement]

Flottant :

Les marges des éléments flottants ne seront pas fusionnées
En supposant que vous souhaitiez faire un élément flottant non-remplacement, vous devez Il spécifie une largeur, sinon il flottera selon la largeur minimale spécifiée par le navigateur
L'élément flottant générera un niveau de bloc ; box, quel que soit l'élément lui-même ;
Le haut d'un élément flottant ne peut pas être plus haut que le haut de son élément parent ou de tous les éléments flottants précédents
Lorsqu'un élément flottant chevauche un élément dans le flux de documents :
5. (1) S'il s'agit d'un élément de niveau bloc, son contenu sera au-dessus de l'élément flottant, et la bordure et l'arrière-plan seront en dessous ;

   (2) S'il s'agit d'un élément en ligne, son contenu, sa bordure et son arrière-plan seront au-dessus de l'élément flottant, il ne sera pas écrasé.
   Cela n'a rien à voir avec l'ordre dans lequel les éléments apparaissent dans le flux documentaire.
   
   

Un élément flottant doit contenir tous ses éléments enfants flottants

7. 使用clear属性清除浮动时，例如clear: left，实际上是为设置clear属性的元素增加margin-top。因此，有可能即使该元素设置了margin-top，也会与浮动元素紧紧相连，除非margin-top的值足够大。要使两者之间有间隔，可以设置浮动元素的margin-bottom。

   定位：

8. 绝对定位

   *如果父元素是块级元素且position的值为非static，则子元素absolute定位是其外边距外界相对于父元素的边框界定区域定位；
     *通过指定top, bottom, left, right的值，可以隐式指定元素的宽高；
     *除bottom外被设置成auto的属性，会默认与元素静态位置的对应值一致；
     *水平／垂直方向上，当元素过度受限时（left和right的值以及元素水平方向的各尺寸之和不等于父元素width），会忽略right／bottom的值。如果有设置为auto的属性，则改变其值来满足前等式，如果两个则平分，所以可以用来做居中（margin设为auto，其他值均为0）！
     *假设一个元素有设置z-index值，那么其所有子元素都是相对于这个叠放上下文来放置，并且css2.1中规定所有元素绝对不能放在其叠放上下文的背景之下，但可以在其内容之下；

9. 固定定位
     *right的值总是等于－left，bottom的值总是等于－top。

持续更新中。。。。。

本文参考 《css权威指南》

- Attributs qui s'appliquent uniquement aux éléments de niveau bloc

largeur, hauteur (ces deux peuvent être utilisés pour remplacer des éléments)

texte—aligner, texte— indent, vertical —align (peut également être utilisé pour les cellules du tableau et les éléments de remplacement tels que input/img)

background-position (notez la différence entre le pourcentage et la valeur absolue, et cet attribut affectera l'effet de mosaïque)

---

[Formatage visuel de base]

1. Modèle de boîte  :
- l'arrière-plan comprend la zone de contenu, la marge intérieure et la bordure. transparent, montrant le parent L'arrière-plan de l'élément ;

2. Attributs horizontaux  :

- marge gauche (droite), remplissage gauche (droite), gauche (droite). ) bordure et contenu de l'élément enfant La somme des valeurs de la largeur de la boîte doit être égale à la largeur de la boîte de contenu de l'élément parent

-si deux des marges gauche, marge droite et largeur ; (seules ces trois valeurs​​peuvent être définies sur auto) sont définies, valeur spécifique, la valeur restante est auto, puis la valeur d'attribut définie sur auto sera automatiquement calculée pour remplir la largeur de l'élément parent :

 ＊ 如果三个值都为非auto的特定值（over constrained），那么margin-right会被强制设置为auto；
 ＊ 如果margin中某一个设置为auto，另一个设置特定值，width设置为auto，则设置为auto的margin会被置为0；
 ＊ 如果width设置为特定值，两个margin设置为auto，则会**水平居中**！！

- Le remplissage de l'élément parent chevauchera la marge de l'élément enfant

- La largeur par défaut d'un élément non remplacé est déterminée par son contenu ; L'élément remplacé est défini sur auto (comme img), alors sa valeur sera sa largeur d'origine ; si seule la largeur est définie, la hauteur changera proportionnellement, vice versa.

3. Attribut vertical  :

est similaire à l'attribut horizontal, la différence/note est :

- Si marge supérieure ou marge inférieure S'il est défini sur auto, il sera par défaut à 0, il ne peut donc pas être centré verticalement à moins que le paramètre ne soit affiché avec une valeur spécifique
- Lors de l'utilisation d'un pourcentage pour définir la hauteur d'un élément enfant, si la valeur de hauteur est ; l'élément parent n'est pas défini explicitement, alors la hauteur de l'élément enfant sera. Elle sera par défaut auto
- Si l'élément parent ne contient que des éléments enfants au niveau du bloc, alors la hauteur de l'élément parent n'inclura pas le marge de l'élément enfant, sauf si l'élément parent a une bordure ou un remplissage ! ! Pourquoi, parce que les marges dans le sens vertical se chevauchent. De ce point de vue, pour éviter les chevauchements, vous devez utiliser border et padding pour séparer les marges adjacentes

Éléments en ligne  :
- line-height (hauteur de la boîte de ligne) pour un élément remplacé, la hauteur de son contenu. Par conséquent, l'élément remplacé n'a pas d'interligne (line-height - font-size) ; pour les éléments non remplacés, c'est la hauteur de sa zone de contenu plus l'interligne
- pour les lignes qui contiennent uniquement du texte, le l'espacement interligne peut être modifié Uniquement la hauteur de ligne, la taille de la police et l'alignement vertical.

Éléments non-remplacement :

- Lorsque la valeur de la hauteur de ligne est inférieure à la taille de la police, un chevauchement de texte peut se produire. Pour éviter ce phénomène, définissez la ligne-. height à 1 em (la taille de la police doit être définie) ou 1 (facteur de mise à l'échelle basé sur la taille de la police). De plus, il héritera de la valeur calculée de l'élément parent plutôt que de la valeur littérale, sauf définition explicite ; >

- le contenu de l'élément en ligne Les marges, les marges et les bordures n'affectent pas la hauteur de la ligne. Les marges extérieures ne sont valables que pour la gauche et la droite, pas pour le haut et le bas ; mais s'il y a un remplissage positif et un arrière-plan, ils peuvent couvrir les lignes adjacentes (cela n'affecte toujours pas la hauteur et la disposition des lignes, c'est-à-dire la ligne). la hauteur ne changera pas si le remplissage est défini) hauteur);

Éléments de remplacement :

- Les marges intérieures, les marges extérieures et les bordures des éléments en ligne affecteront la ligne. hauteur, et les marges supérieure et inférieure sont valides.

- La définition d'une valeur de hauteur pour img affectera la hauteur de ligne, mais la valeur effective de line-height ne changera pas. Certains attributs tels que vertical-align utilisent toujours la valeur effective de line-height pour le calcul
; - Si un élément de remplacement qui est le seul descendant d'un élément de niveau bloc ou d'une cellule de tableau sera placé sur la ligne de base, comme img dans p. Solution : utilisez une marge négative pour la dérouler vers le bas ou définissez l'affichage sur bloquer pour éviter de générer des zones de ligne.

4. Autre

- attribut d'affichage :

   * 设置元素display属性为inline-block时， 其表现类似行内替换元素；如果没有显式定义width，则它会自动收缩以适应内容宽度，也就是说会使其宽度刚好能包含所有内容且没有多余；
   * 设置元素display属性为run-in，表示如果该元素后面是一个display为block的元素，则该元素表现为行内元素放在后面那个元素的开头，否则其本身将显示为块级元素。
   * 对于浮动或绝对定位元素，计算值与声明值可能不同。除inline-table之外大部分声明值（包括inline，inline-block，run-in）都会被计算为block。

---

［bordure, marge, remplissage］

1. marge

   - Si vous utilisez un pourcentage, la valeur calculée est relative à la valeur de largeur (et non de hauteur) de l'élément parent. Même si c’est en marge !
   

2. border

   - La valeur par défaut sera utilisée si la valeur n'est pas spécifiée, par exemple :
   

   { border: solid 1px dotted;
     border: 1px;
   }

   Le deuxième paramètre de bordure ici remplacera le premier un, Puisque border-style n'est pas défini dans le deuxième article, la valeur par défaut est none, donc il n'y aura pas de bordure

---

[Flottant et positionnement]

Flottant :

Les marges des éléments flottants ne seront pas fusionnées
En supposant que vous souhaitiez faire un élément flottant non-remplacement, vous devez Il spécifie une largeur, sinon il flottera selon la largeur minimale spécifiée par le navigateur
L'élément flottant générera un niveau de bloc ; box, quel que soit l'élément lui-même ;
Le haut d'un élément flottant ne peut pas être plus haut que le haut de son élément parent ou de tous les éléments flottants précédents
Lorsqu'un élément flottant chevauche un élément dans le flux de documents :
5. (1) S'il s'agit d'un élément de niveau bloc, son contenu sera au-dessus de l'élément flottant, et la bordure et l'arrière-plan seront en dessous ;

   (2) S'il s'agit d'un élément en ligne, son contenu, sa bordure et son arrière-plan seront au-dessus de l'élément flottant, il ne sera pas écrasé.
   Cela n'a rien à voir avec l'ordre dans lequel les éléments apparaissent dans le flux documentaire.
   
   

Un élément flottant doit contenir tous ses éléments enfants flottants

7. 使用clear属性清除浮动时，例如clear: left，实际上是为设置clear属性的元素增加margin-top。因此，有可能即使该元素设置了margin-top，也会与浮动元素紧紧相连，除非margin-top的值足够大。要使两者之间有间隔，可以设置浮动元素的margin-bottom。

   定位：

8. 绝对定位

   *如果父元素是块级元素且position的值为非static，则子元素absolute定位是其外边距外界相对于父元素的边框界定区域定位；
     *通过指定top, bottom, left, right的值，可以隐式指定元素的宽高；
     *除bottom外被设置成auto的属性，会默认与元素静态位置的对应值一致；
     *水平／垂直方向上，当元素过度受限时（left和right的值以及元素水平方向的各尺寸之和不等于父元素width），会忽略right／bottom的值。如果有设置为auto的属性，则改变其值来满足前等式，如果两个则平分，所以可以用来做居中（margin设为auto，其他值均为0）！
     *假设一个元素有设置z-index值，那么其所有子元素都是相对于这个叠放上下文来放置，并且css2.1中规定所有元素绝对不能放在其叠放上下文的背景之下，但可以在其内容之下；

9. 固定定位
     *right的值总是等于－left，bottom的值总是等于－top。

更多css属性总结 相关文章请关注PHP中文网！