Maison > Article > interface Web > Résumé des points de connaissances importants et difficiles en HTML et CSS

Résumé des points de connaissances importants et difficiles en HTML et CSS

小云云original: 2018-03-02 10:33:171832parcourir

Cet article partage principalement avec vous une synthèse des points de connaissances importants et difficiles du HTML et du CSS, en espérant aider tout le monde.

Comment centrer un p avec une largeur et une hauteur variables verticalement et horizontalement
Utiliser Flex

Il vous suffit de définir : afficher dans la boîte parent : flex; -50% , -50%);position : absolue;haut : 50%;gauche : 50%;

Utiliser la méthode display:table-cell

Paramètres de la boîte parent : display:table -cell; text -align:center;vertical-align:middle;
p Paramètres : display:inline-block;vertical-align:middle;

Position Les fonctions de plusieurs attributs

Quatre positions communes Valeurs d'attribut : relative, absolue, fixe, statique. Généralement utilisé en conjonction avec les attributs « left », « top », « right » et « bottom ».

statique : emplacement par défaut. Dans des circonstances normales, nous n'avons pas besoin de le déclarer spécifiquement, mais parfois, lorsque nous rencontrons un héritage, nous ne voulons pas voir les attributs hérités par l'élément s'affecter, nous pouvons donc utiliser Position:static pour annuler l'héritage, c'est-à-dire , pour restaurer la valeur par défaut de l'élément. Un élément défini sur static sera toujours à la position donnée par le flux de la page (les éléments statiques ignorent les déclarations haut, bas, gauche ou droite). Généralement peu utilisé.

relatif : positionnement relatif. Le positionnement relatif est relatif à la position par défaut de l'élément. Ses valeurs de décalage en haut, à droite, en bas et à gauche sont toutes décalées en fonction de sa position d'origine, indépendamment de ce qui arrivera aux autres éléments. Notez que l'élément déplacé relatif occupe toujours de l'espace dans sa position d'origine.

absolu : positionnement absolu. Pour un élément défini sur absolu, si son conteneur parent a l'attribut position défini et que la valeur de l'attribut position est absolue ou relative, elle sera décalée en fonction du conteneur parent. Si son conteneur parent ne définit pas la propriété position, le décalage est basé sur le corps. Notez que les éléments avec l'attribut absolu défini n'occupent pas de position dans le flux standard.
fixe : positionnement fixe. Les éléments dont la position est définie sur fixe peuvent être positionnés aux coordonnées spécifiées par rapport à la fenêtre du navigateur. L'élément restera dans cette position, que la fenêtre défile ou non. C’est toujours basé sur le corps. Notez que les éléments avec l'ensemble d'attributs fixes n'occupent pas de position dans le flux standard.

Flottant et effacement du flotteur
3.1 Connaissances liées au flottement

Valeur de l'attribut float :

gauche : l'élément flotte vers la gauche .
droite : l'élément flotte vers la droite.
aucun : valeur par défaut. L'élément n'est pas flottant et apparaît là où il apparaît dans le texte.

Caractéristiques du flottant :

Les éléments flottants seront séparés du flux normal de documents, mais les éléments flottants ne s'affecteront pas seulement eux-mêmes, ils affecteront également l'alignement des éléments environnants.
Peu importe qu'un élément soit un élément en ligne ou un élément de niveau bloc, s'il est défini sur float, l'élément flottant générera une boîte de niveau bloc, et sa largeur et sa hauteur peuvent être définies. Par conséquent, float est. souvent utilisé pour créer des menus disposés horizontalement. Définir la taille et aligner horizontalement.

L'affichage des éléments flottants aura des règles différentes selon les circonstances :

Lorsqu'un élément flottant est flottant, sa marge ne dépassera pas le remplissage du bloc conteneur. PS : Si vous souhaitez que l'élément dépasse, vous pouvez définir l'attribut margin
Si l'un des deux éléments flotte vers la gauche et l'autre flotte vers la droite, le marginRight de l'élément flottant gauche ne sera pas adjacent au marginLeft de l’élément flottant droit.

S'il y a plusieurs éléments flottants, les éléments flottants seront disposés dans l'ordre sans se chevaucher.

S'il y a plusieurs éléments flottants, la hauteur de l'élément suivant ne dépassera pas l'élément précédent et ne dépassera pas le bloc conteneur.

S'il y a des éléments non flottants et des éléments flottants en même temps, et que les éléments non flottants sont devant, les éléments flottants ne seront pas plus hauts que les éléments non flottants

Les éléments flottants seront alignés vers le haut, à gauche ou à droite autant que possible

Problème de chevauchement

Lorsqu'un élément en ligne chevauche un élément flottant, sa bordure, son arrière-plan et son contenu seront affichés au-dessus de l'élément flottant
Lorsqu'un élément de niveau bloc chevauche un élément flottant, la bordure et l'arrière-plan seront affichés sous l'élément flottant, et le contenu sera affiché au-dessus de l'élément flottant

attribut clear

attribut clear : Assurez-vous qu'il n'y a aucun élément flottant sur les côtés gauche et droit de l'élément actuel. clear n'affecte que la disposition de l'élément lui-même.

Valeurs : gauche, droite, les deux
3.2 Le problème de l'effondrement de la hauteur de l'élément parent

Pourquoi devrions-nous effacer le flotteur et l'effondrement de la hauteur de l'élément parent

Résoudre le problème de l'effondrement de la hauteur de l'élément parent : Si un L'élément au niveau du bloc ne définit pas la hauteur, dont la hauteur est étendue par les éléments enfants. Après avoir utilisé float sur l'élément enfant, l'élément enfant se détachera du flux de documents standard, c'est-à-dire qu'il n'y a pas de contenu dans l'élément parent pour augmenter sa hauteur, donc la hauteur de l'élément parent sera ignorée. est ce qu'on appelle l'effondrement en hauteur.
3.3 Méthode d'effacement des flotteurs
Méthode 1 : Définir la hauteur du parent p
Principe : Définir une hauteur (hauteur) fixe pour le parent p peut résoudre le problème selon lequel le parent p ne peut pas obtenir la hauteur.
Avantages : Le code est concis
Inconvénients : La hauteur est fixe, elle convient donc aux modules à contenu fixe. (Non recommandé)
Méthode 2 : Utiliser des éléments vides, tels que

(.clear{clear:both})
原理：添加一对空的 p 标签，利用 css 的 clear:both 属性清除浮动，让父级 p 能够获取高度。
优点：浏览器支持好
缺点：多出了很多空的 p 标签，如果页面中浮动模块多的话，就会出现很多的空置 p 了，这样感觉视乎不是太令人满意。（不推荐使用）
方法三：让父级 p 也一并浮起来
这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。不推荐使用
方法四：父级 p 定义 display:table
原理：将 p 属性强制变成表格
优点：不解
缺点：会产生新的未知问题。（不推荐使用）
方法五：父元素设置 overflow：hidden、auto；
原理：这个方法的关键在于触发了 BFC。在 IE6 中还需要触发 hasLayout（zoom：1）
优点：代码简介，不存在结构和语义化问题
缺点：无法显示需要溢出的元素（亦不太推荐使用）
方法六：父级 p 定义伪类: after 和 zoom

.clearfix:after{ 
content:’.’; 
display:block; 
height:0; 
clear:both; 
visibility: hidden; 
}

.clearfix {zoom:1;}
原理：IE8 以上和非 IE 浏览器才支持: after，原理和方法 2 有点类似，zoom(IE 转有属性) 可解决 ie6,ie7 浮动问题
优点：结构和语义化完全正确, 代码量也适中，可重复利用率（建议定义公共类）
缺点：代码不是非常简洁（极力推荐使用）
经益求精写法

.clearfix:after { 
content:”\200B”; 
display:block; 
height:0; 
clear:both; 
} 
.clearfix {*zoom:1;} 照顾 IE6，IE7 就可以了

4.BFC 相关知识
定义：BFC(Block formatting context) 直译为 “块级格式化上下文”。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。
BFC 布局规则
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

BFC 这个元素的垂直方向的边距会发生重叠，垂直方向的距离由 margin 决定，取最大值
BFC 的区域不会与浮动盒子重叠（清除浮动原理）。
计算 BFC 的高度时，浮动元素也参与计算。

哪些元素会生成 BFC

根元素
float 属性不为 none
position 为 absolute 或 fixed
display 为 inline-block， table-cell， table-caption， flex， inline-flex
overflow 不为 visible

5.box-sizing 是什么
设置 CSS 盒模型为标准模型或 IE 模型。标准模型的宽度只包括 content，二 IE 模型包括 border 和 padding
box-sizing 属性可以为三个值之一：

content-box，默认值，只计算内容的宽度，border 和 padding 不计算入 width 之内
padding-box，padding 计算入宽度内
border-box，border 和 padding 计算入宽度之内

6.px，em，rem 的区别
px 像素 (Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。
em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
rem 是 CSS3 新增的一个相对单位 (root em，根 em)，使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。
7.CSS 引入的方式有哪些? link 和 @import 的区别是?
有四种：内联 (元素上的 style 属性)、内嵌 (style 标签)、外链 (link)、导入 (@import)
link 和 @import 的区别：

link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import 属于 CSS 范畴，只能加载 CSS。
link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。
link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

流式布局与响应式布局的区别
流式布局
使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进
行伸缩，不受固定像素的限制，内容向两侧填充。
响应式开发
利用 CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。

超小屏幕 (移动设备) 768px 以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px 以上

Le développement réactif étant plus lourd, il est généralement effectué à l'aide d'un framework réactif tiers, tel que bootstrap, pour effectuer une partie du travail. Bien sûr, vous pouvez également écrire vous-même un développement réactif.
Différence

-
Disposition du flux
Développement responsive

Méthode de développement
Développement Web mobile + Développement PC
Développement responsive

Application scénarios
Généralement, lorsqu'il existe déjà un site PC, lors du développement d'une version mobile, il suffit de développer la version mobile séparément
Pour certains nouveaux sites Web, il est désormais nécessaire de s'adapter à la version mobile, donc un l'ensemble de pages est compatible avec divers terminaux

Développement
Fort alignement, haute efficacité de développement
Compatible avec divers terminaux, faible efficacité

Adaptation
Adapté uniquement aux appareils mobiles, l'expérience sur le pad est relativement mauvaise
Peut être adapté à divers terminaux

Efficacité
Code simple, chargement rapide
Code relativement complexe, chargement lent

Amélioration progressive et dégradation gracieuse
La principale différence réside dans ce sur quoi ils se concentrent et la différence de flux de travail causée par cette différence

La dégradation gracieuse crée la fonctionnalité complète au début , puis cible les versions inférieures des navigateurs compatibles. .
L'amélioration progressive crée des pages pour les navigateurs de version basse afin de garantir les fonctions les plus basiques, puis améliore les effets, les interactions et ajoute des fonctions supplémentaires pour les navigateurs avancés afin d'obtenir une meilleure expérience utilisateur.

Différence :

La dégradation gracieuse commence à partir d'un statu quo compliqué et tente de réduire l'offre d'expérience utilisateur
L'amélioration progressive commence à partir d'une version très basique et fonctionnelle et continue de s'étendre jusqu'à. répondre aux besoins de l'environnement futur
Le déclassement (atténuation fonctionnelle) signifie regarder en arrière ; tandis que l'amélioration progressive signifie regarder vers l'avant tout en s'assurant que sa fondation est dans une zone de sécurité

10.CSS Plusieurs façons et différences de se cacher elements
display:none

L'élément disparaîtra complètement sur la page et l'espace initialement occupé par l'élément sera occupé par d'autres éléments, ce qui signifie que le navigateur rechargera la ligne et se redessinera. .
ne déclenchera pas son événement de clic

visibility:hidden

La différence entre display:none est qu'après la disparition de l'élément de la page, l'espace qu'il occupe sera toujours conservé, donc cela entraînera seulement la redessination du navigateur sans redistribution.
Impossible de déclencher son événement de clic
Applicable aux scénarios dans lesquels vous ne souhaitez pas que la mise en page change une fois l'élément masqué

opacité :0

Après avoir défini la transparence de l'élément element à 0, Aux yeux de nos utilisateurs, les éléments sont également masqués. Il s'agit d'une méthode pour masquer des éléments. Une chose que
et visible:hidden ont en commun est que l'élément occupe toujours de l'espace après avoir été masqué, mais nous savons tous qu'après avoir défini la transparence sur 0, l'élément est simplement invisible et il existe toujours sur la page.
Peut déclencher un événement de clic

Définissez les attributs du modèle de boîte tels que la hauteur et la largeur sur 0

En termes simples, il s'agit d'influencer la marge, la bordure, le remplissage, la hauteur et la largeur de l'élément au modèle de boîte d'élément. L'attribut est défini sur 0. S'il y a des sous-éléments ou du contenu dans l'élément, son overflow:hidden doit également être défini pour masquer ses sous-éléments.
Si la bordure, le remplissage et les autres attributs de l'élément sont définis sur une valeur autre que 0, il est évident que l'élément est toujours visible sur la page, et il n'y a aucun problème pour déclencher l'événement de clic de l'élément. Si tous les attributs sont définis sur 0, il est évident que l'élément disparaît, c'est-à-dire que l'événement click ne peut pas être déclenché.
Cette méthode n'est pas pratique et peut poser quelques problèmes. Mais certains effets de page que nous utilisons habituellement peuvent être complétés de cette manière, comme l'animation slideUp de jquery, qui définit le débordement: caché de l'élément, puis définit en continu la hauteur et la marge supérieure de l'élément via un timer, margin-bottom, border-top. , border-bottom, padding-top, padding-bottom valent 0, obtenant ainsi l'effet slideUp.

Autres méthodes de création

Définissez la position de l'élément et à gauche, en haut, en bas, à droite, etc., et déplacez l'élément hors de l'écran
Définissez la position de l'élément et l'index z , changez z -index est défini sur un nombre négatif aussi petit que possible

Décrivez brièvement la différence entre src et href
href pointe vers l'emplacement de la ressource réseau, l'établissement et l'élément courant (ancre) ou le document courant Un lien entre (liens), utilisé pour les hyperliens.
src pointe vers l'emplacement des ressources externes, et le contenu pointé sera intégré dans le document à l'emplacement de la balise actuelle ; lors de la demande de la ressource src, la ressource vers laquelle elle pointe sera téléchargée et appliquée au document, tels que les scripts js, les images img, les cadres et autres éléments. Lorsque le navigateur analyse cet élément, il suspend le téléchargement et le traitement des autres ressources jusqu'à ce que la ressource soit chargée, compilée et exécutée. Il en va de même pour les éléments tels que les images et les cadres, ce qui revient à intégrer la ressource pointée dans le fichier. balise actuelle. C'est aussi pourquoi le script js est placé en bas au lieu de la tête.
Quels sont les éléments en ligne ? Que sont les éléments de niveau bloc ? Quels sont les éléments vides ?
Cette question est parfois posée lors d'entretiens et je suis un peu confus~~~ Je n'y prête généralement pas attention. . . .
Éléments en ligne : a, b, span, img, input, strong, select, label, em, button, textarea
Éléments de niveau bloc : p, ul, li, dl, dt, dd, p, h1 - h6, blockquote
Élément vide : C'est un élément HTML sans contenu, tel que : br, meta, hr, link, input, img

Comment centrer un p à largeur et hauteur variables verticalement et horizontalement
Utiliser Flex

Uniquement dans la zone parent ? Paramètres : display : flex ; -50%, -50%);position : absolue;haut : 50%;gauche : 50%;

Utiliser la méthode display:table-cell

Paramètres de la boîte parent : display:table - cell; text-align:center;vertical-align:middle;
p settings: display:inline-block;vertical-align:middle;

2.position Le rôle de plusieurs attributs

position Quatre valeurs d'attribut communes : relative, absolue, fixe, statique. Généralement utilisé en conjonction avec les attributs « left », « top », « right » et « bottom ».

Flottant et effacement du flotteur
3.1 Connaissances liées au flottement

Valeur de l'attribut float :

gauche : l'élément flotte vers la gauche .
droite : l'élément flotte vers la droite.
aucun : valeur par défaut. L'élément n'est pas flottant et apparaît là où il apparaît dans le texte.

Caractéristiques du flottant :

L'affichage des éléments flottants aura des règles différentes selon les circonstances :

S'il y a plusieurs éléments flottants, les éléments flottants seront disposés dans l'ordre sans se chevaucher.

S'il y a plusieurs éléments flottants, la hauteur de l'élément suivant ne dépassera pas l'élément précédent et ne dépassera pas le bloc conteneur.

attribut clear

attribut clear : Assurez-vous qu'il n'y a aucun élément flottant sur les côtés gauche et droit de l'élément actuel. clear n'affecte que la disposition de l'élément lui-même.

Valeurs : gauche, droite, les deux
3.2 Le problème de l'effondrement de la hauteur de l'élément parent

Pourquoi devrions-nous effacer le flotteur et l'effondrement de la hauteur de l'élément parent

(.clear{clear:both})
Principe : Ajoutez une paire de balises p vides, utilisez l'attribut clear:both de css pour effacer le float, afin que le parent p puisse obtenir la hauteur.
Avantages : Bon support du navigateur
Inconvénients : Il y a beaucoup de balises p vides s'il y a beaucoup de modules flottants dans la page, il y aura beaucoup de balises p vides, ce qui ne semble pas très satisfaisant. (Non recommandé)
Méthode 3 : Laisser le parent p flotter également
Cela peut dans un premier temps résoudre le problème de flottement actuel. Mais cela fait également flotter le parent, ce qui entraînera de nouveaux problèmes de flottement. Non recommandé
Méthode 4 : Parent p définit display:table
Principe : Forcer l'attribut p dans une table
Avantages : Déroutant
Inconvénients : De nouveaux problèmes inconnus surgiront. (Non recommandé)
Méthode 5 : Débordement des paramètres de l'élément parent : caché, auto
Principe : La clé de cette méthode est de déclencher BFC. Dans IE6, hasLayout (zoom : 1) doit également être déclenché
Avantages : introduction du code, pas de problèmes structurels et sémantiques
Inconvénients : les éléments qui doivent déborder ne peuvent pas être affichés (non recommandés)
Méthode 6 : Parent p définit les pseudo-classes : after et zoom
.clearfix:after{
content:'.';
display:block
height:0; >visibilité : caché ;
}
.clearfix {zoom:1;}
Principe : IE8 ou supérieur et les navigateurs non-IE ne prennent en charge que : après, le principe est quelque peu similaire à la méthode 2, zoom (IE le transfert a des propriétés) peut résoudre le problème flottant de IE6 et IE7
Avantages : La structure et la sémantique sont tout à fait correctes, la quantité de code est modérée et il est réutilisable (il est recommandé de définir une classe publique)
Inconvénients : Le code n'est pas très concis (fortement recommandé)
Méthode d'écriture Jingyiqiujing
.clearfix:after {
content:”200B”;
height:0; >clear:both;
}
.clearfix {*zoom:1;} Prenez simplement soin de IE6 et IE7

Pour des connaissances détaillées sur le flottement, veuillez vous référer à cet article :
http ://luopq.com/2015/11/08/CSS-float/

4. Connaissances liées à BFC

Définition : BFC (Contexte de formatage de bloc) se traduit littéralement par « contexte de formatage au niveau du bloc ». Il s'agit d'une zone de rendu indépendante, à laquelle participent uniquement les boîtes de niveau bloc. Elle spécifie la manière dont les boîtes internes de niveau bloc sont disposées et n'a rien à voir avec l'extérieur de cette zone.
Règles de mise en page BFC

BFC est un conteneur indépendant isolé sur la page. Les sous-éléments à l'intérieur du conteneur n'affecteront pas les éléments à l'extérieur. Et vice versa.

BFC Les marges verticales de cet élément se chevaucheront. La distance verticale est déterminée par la marge, et la valeur maximale est prise
La zone de BFC ne chevauchera pas la boîte flottante (effacez la valeur). principe flottant).
Lors du calcul de la hauteur du BFC, les éléments flottants participent également au calcul.

Quels éléments généreront BFC

Élément racine

l'attribut float n'est pas nul

la position est absolue ou fixe

l'affichage est en ligne-bloc, table-cell, table- caption, flex, inline-flex

le débordement n'est pas visible

5. Qu'est-ce que le dimensionnement de la boîte
Définit le modèle de boîte CSS sur le modèle standard ou le modèle IE. La largeur du modèle standard inclut uniquement le contenu, et le deuxième modèle IE inclut la bordure et le remplissage. L'attribut
box-sizing peut avoir l'une des trois valeurs suivantes :

content-box, la valeur par défaut, uniquement. calcule la largeur du contenu, la bordure et le remplissage ne sont pas calculés dans la largeur
padding-box, le remplissage est calculé dans la largeur
border-box, la bordure et le remplissage sont calculés dans la largeur

6. La différence entre px, em et rem
px pixel (Pixel). Unité absolue. Le pixel px est relatif à la résolution de l'écran du moniteur. Il s'agit d'une unité de longueur virtuelle et de l'unité de longueur de l'image numérique du système informatique. Si px doit être converti en longueur physique, la précision DPI doit être spécifiée.
em est une unité de longueur relative, relative à la taille de la police du texte dans l'objet actuel. Si la taille de police actuelle du texte en ligne n'a pas été définie manuellement, elle sera relative à la taille de police par défaut du navigateur. Il hérite de la taille de police de l'élément parent, ce n'est donc pas une valeur fixe.

rem est une nouvelle unité relative (root em) dans CSS3 Lorsque vous utilisez rem pour définir la taille de la police d'un élément, il s'agit toujours d'une taille relative, mais elle est uniquement relative à l'élément racine HTML.

7. Quelles sont les manières d'introduire CSS ? Quelle est la différence entre lien et @import ?
Il en existe quatre types : inline (attribut de style sur l'élément), intégré (balise de style), lien externe (lien ), Import (@import) La différence entre
link et @import :

link est une balise XHTML En plus de charger du CSS, elle peut également définir d'autres transactions telles que RSS ; la catégorie CSS et ne peut charger que du CSS.
Lorsque le lien fait référence à CSS, il sera chargé en même temps que la page est chargée ; @import nécessite que la page soit complètement chargée avant le chargement.
link est une balise XHTML et n'a aucun problème de compatibilité ; @import a été proposé dans CSS2.1 et n'est pas pris en charge par les navigateurs de versions inférieures.

link prend en charge l'utilisation de Javascript pour contrôler le DOM afin de modifier le style ; @import ne le prend pas en charge.

流式布局与响应式布局的区别
流式布局
使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进
行伸缩，不受固定像素的限制，内容向两侧填充。
响应式开发
利用 CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。