Html + CSS éléments couramment utilisés induction et le point error-prone (b)

Les points principaux sont résumés des connaissances fragmentaires en CSS, mais aussi chacun des amis CSS d'apprentissage qui ont besoin de savoir ou de se rappeler:

points pertinents CSS:

- ordre d'écriture de style composite:

1. Propriété d'arrière - plan: valeurs composites sont séparés par un espace, et pas d' exigences de commande.
Voici une astuce, les images de fond ont une propriété CSS3 background-size, mais peuvent aussi être écrites dans le style du complexe, par exemple:

background: url() no-repeat center top / 100px 100px;

Où chacun de ces éléments est l'arrière - plan d'une adresse, que la tuile, le positionnement, la taille de l' image d'arrière - plan, on voit que, si l' on veut se joindre à l'écriture composite taille d'arrière - plan, ne nécessitent ajouter / position arrière - plan derrière le dos de l'écriture attribut background-size propriété sur elle.
En outre, CSS3 fournit également deux propriétés background-origin et background-clip, parce que les valeurs de propriété de ces deux attributs sont les mêmes, donc si les deux propriétés en même temps écrit en ligne avec le style, la première Background- de représentation origine, la seconde représente l'arrière - plan de la cassette.

2. Attributs de la police: séquence composite est écrit, pour écrire deux valeurs minimales (famille de taille), la taille doit être écrit en face de la famille.

font: weight style size family
font: style weight size family
font: style weight size/line-height family

Les trois versions sont correctes , nous devons prêter attention à l' endroit où chaque propriété de raccourci de police doit avoir la taille, deux propriétés de la famille, la hauteur de ligne peut également écrire en, plus derrière l'attribut de taille a / suivi par ligne à haute écriture.

- priorité CSS

1. Priorité du même style
lorsque l'élément est réglé sur le même style, écrit après la plus grande priorité, mais ne recommande pas une apparence Styled répétitive.

2. Style de style interne et externe
intérieur et priorité style style externe même , si vous configurez le même style, si haut après l'introduction écrite par priorité.

3. style priorité unique
de style entre les rangs> id> class >> *> pour hériter
le poids 1.000.010.000.100.001 ...
Remarque: L'héritage est la plus faible priorité
! Poids important -> 10000 (recommandé de ne pas utiliser des termes non normalisé) Scénario: avant d'aller à une utilisation d'urgence.

4. Etiquette simple + classe et comparaison de la catégorie prioritaire
étiquette + class> classe unique

Le groupe de modèle et un seul
sélecteur groupe prioritaire seul sélecteur même , après avoir écrit une priorité.

6. Comment comparer les sélecteurs de niveau de priorité
poids: la valeur combinée correspondant
à environ le point: le même (même valeur de poids) sur le sélecteur au sujet
Remarque: La méthode est seulement une minute sur les compétences, pas une spécification
Recommandation: l' écriture sélecteur de niveau est préférable de ne pas dépasser trois

- CSS pour atteindre un grand centre de la carte

• Le procédé
  utilisé pour faire l'image d'arrière - plan, la vue de fond d'un récipient pour faire le positionnement:

background-position: center 0;

• Méthode II en
  utilisant balise img image introduite par propriétés de ciblage:

position: relative;
left: 50%；
/* 这里X表示图片宽度的一半，X前边的是负号 */
margin-left: -X;

En fait, ici transformer margin-left: translateX (-50%), l'effet est le même, mais la compatibilité d' une meilleure marge gauche, la vie ou comment utiliser la situation réelle.
Astuce:
          changements fréquents dans la carte de la page, le plus souvent avec des photos img.
          Pour modifier le changement à long terme dans la page en figure contexte général avec background-image.

- élément est ajouté à une pluralité d'arrière-plan

background:url(第一个背景图) ,  url(第二个背景图) , url(第三个背景图);

Remarque: multiple image de fond quand le premier à écrire une priorité élevée.

- Comment faire un élément enfant dans l'élément parent est centré verticalement et horizontalement

• Procédé de
  localisation de traction + marge (éléments enfants de taille fixe), comme ceci:

/* 加在子元素上 */
position: relative;
left: 50%；
top: 50%;
/* 这里的margin值仍然是负的 */
margin-left: -子元素宽度的一半；
margin-top: -子元素高度的一半；

Bien sûr, le positionnement absolu peut être utilisé, cette fois pour donner l'élément parent a ajouté des propriétés de positionnement relatif, pour faire en sorte que l'élément enfant est positionné par rapport à l'élément parent, les deux positionner un document occupant l'espace, à partir d'un flux de documents, pris dans ce que la demande particulière.

• Méthode deux
  marge: auto + 0 de la position verticale et horizontale, comme ceci:

/* 加在子元素上 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

Remarque, ne pas oublier d'ajouter l'élément parent positionnement relatif oh

• Méthode trois
  déplacements de positionnement + 50%, comme ceci:

/* 加在子元素上 */
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

Bien sûr, le positionnement absolu peut être utilisé, ou ne pas oublier d'ajouter l'élément parent situés des propriétés opposées, pour faire en sorte que l'élément enfant est positionné par rapport à l'élément parent, ou pris avec le genre spécifique de la demande.

• Méthode Quatre
  flex élastique + margin: auto, comme

/* 加在父元素上 */
display: flex;

/* 加在子元素上 */
margin: auto；

• Cinque
  flex élastique + justify-contenu central et aligner-éléments, tels que:

/* 加在父元素上 */
display: flex;
justify-content: center;
align-items: center;

- la différence entre les pseudo-classes et pseudo-élément

#elem: après {}
#elem: hover {}

在 CSS2.1的时候 : #elem:after{} √
在 CSS3的时候 : #elem:after{} ×  #elem::after{} √
                #elem:hover{} √  #elem::hover{} ×

• : différences de formulation
  pseudo-classe:colon unique->: hover: actif: visited : lien ...
  éléments pseudo:Double côlon -> :: :: après avant ...
• Les différences de fonctionnalité:
  la pseudo - classe n'agiront sur des éléments de l'opération, l'équivalent du style ajouté aux éléments du corps
  et le pseudo-élément est un conteneur virtuel pour les travaux créés sur, l'équivalent du style ajouté au conteneur virtuel.

- Sélectionnez la transparence de la propriété

1. opcity: 0.0 ~ 1.0,
   toute transparence des sous - éléments qui font usage et élément Opcity attributs modifiés simultanément.
2. background-image: rgba (x, y, z, 0,0 ~ 1,0) en
   utilisant un changement de propriété de rbga seulement la transparence de fond, la transparence ne modifie pas les éléments des sous-éléments.

DÉTAILLÉ sélectionné en fonction de la demande réelle prise

- sélection d'attributs cachés

1. display: none;
   l'élément et ses enfants complètement cachés, et le document n'occupe pas d' espace
2. visibility: hidden;
   éléments cachés, mais occupent toujours le document de l' espace

- curseur CSS personnalisé

cursor: url();

Cette propriété peut personnaliser le style de la souris, mais nécessite une telle image est .cur Ico.

- la ligne centrale verticale, de sorte que les éléments

La vertical-align la propriété d'alignement vertical peut être prévu à l'intérieur de l'élément. Les valeurs communes sont la ligne de base ( de base), en bas, au milieu, en haut ...
Note: vertical-align uniquement des éléments en ligne prennent effet.

- recouvrement et transfert des marges

1. Deux éléments de blocs alignés verticalement lorsque celui-ci des marges superposées, éventuellement marges seront le plus important de la matière, cette fois-ci vers l'extérieur ne peut bloquer l'élément dans lequel une distance souhaitée prédéterminée.

2. Deux éléments de blocs imbriqués, les sous-éléments lorsque les marges ensemble, je trouve marges réfléchis dans le corps de l'élément parent, l'élément parent conduisant à la hauteur de l'effondrement, cette fois, la solution:

   Ajouter des bordures à l'élément parent (non recommandé)
   à l'élément parent , plus overflow: hidden; (spécifications CBF, recommandé)

- caractéristique des éléments flottants

只会影响后面的元素。
内容默认提升半层，脱离文档流。
默认宽根据内容决定。
沿着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列
换行排列，当容器放不下这些浮动元素的时候，就会换行排列  ( 尽量让浮动的元素高度是统一 )
主要给块元素添加，但也可以给内联元素添加。

- Comment supprimer flottant

1. adresse la situation arrangé et vers le bas:

利用clear属性清除float浮动
clear : left | right | both(比较常用的，左右浮动都清除) 

2. résoudre le cas de imbriqué:

固定宽高   :  不推荐 , 不能把高度固定死，不适合做自适应的效果。
父元素浮动 : 不推荐 , 因为父容器浮动也会影响到后面的元素。
overflow : hidden (BFC规范) , 如果有子元素想溢出，那么会受到影响。
display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。
设置空标签 : 不推荐 , 会多添加一个标签。
after伪类 : 推荐，是空标签的加强版，目前各大公司的做法。.例：clear:after{ content:""; display: block; clear:both; }

NOTE: clear: both; cette propriété ne peut être appliquée à l'étiquette de bloc. Résumé ajouté après la pseudo - classe, les éléments en ligne par défaut.
Note: L'élément bloc marge supérieure est présente des problèmes de livraison, mais le bloc flottant ne se transmet pas de problème margin-top.

- Localisation (position) attribut caractéristique

statique :( par défaut)

relative: le positionnement relatif

如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流，空间是会被保留。
不影响其他元素布局
left、top、right、bottom是相对于当前元素自身进行偏移的

absolu: positionnement absolu

使元素完全脱离文档流
使内联元素支持宽高 （让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）
注：如果祖先元素中有多个元素具备定位模式，那么是已离自己最近的祖先元素进行偏移。

fixe: positionnement fixe

使元素完全脱离文档流
使内联元素支持宽高 （让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
    不会受到祖先元素的影响。

collant: positionnement collant

在没有到达指定位置的时候，是没有定位效果的，到达了指定位置，就变成了固定模式。

Lieu Offset:

left top right bottom , 不能单独使用，必须得配合定位模式。

- z-index CSS est utilisé

propriétés z-index: l' ordre d' empilement des éléments est fourni. A un ordre d'empilement supérieur des éléments sera toujours en face de l'ordre d'empilement inférieur des éléments.
Note: L'élément peut avoir une valeur d'attribut z-index négatif.
NOTE: Z-index uniquement le travail (par exemple position: absolute;) sur l'élément de positionnement! La comparaison du temps, commencera avec le même niveau de la première comparaison.

- élément a des propriétés CBF

1. 浮动元素（元素的 float 不是 none）
2. 绝对定位元素（元素的 position 为 absolute 或 fixed）
3. 行内块元素（元素的 display 为 inline-block）
4. 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
5. overflow 值不为 visible 的块元素
6. 弹性元素（display为 flex 或 inline-flex元素的直接子元素）

La liste peut être incomplète, mais ceux-ci sont plus fréquentes que nous devons retenir.

- CBF peut être utilisé pour faire ce que

1. Résoudre le problème de la marge de chevauchement (Exemple: overflow: hidden;)
2. Les problèmes causés par la mise en page flottante (Exemple: overflow: hidden;)
3. float clair (Exemple: overflow: hidden;)
4. Résoudre le problème de la couverture (par exemple: affichage: flex;)

- Avantages de l'icône police

1. 可以非常方便的改变大小和颜色
2. 放大后不会失真
3. 减少请求次数和提高加载速度
4. 简化网页布局
5. 减少设计师和前端工程师的工作量
6. 可使用计算机没有提供的字体。