20 questions d'entretien CSS de base

Cet article partage principalement avec vous une question d'entretien CSS de base, qui a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde. Suivons l’éditeur et jetons un coup d’œil.

1 Introduire le modèle de boîte CSS standard ? En quoi est-il différent du modèle boîte des versions inférieures d’IE ?

Modèle de boîte standard : largeur = largeur du contenu (contenu) + bordure + remplissage + marge
Modèle de boîte IE version basse : largeur = largeur du contenu (contenu+bordure + rembourrage) + marge

Recommandation spéciale : Résumé des questions d'entretien CSS 2020 (dernière)

Le mode d'analyse utilisé pour contrôler le modèle de boîte de l'élément, la valeur par défaut est content-box
context-box : le modèle de boîte standard du W3C, la définition de l'attribut hauteur/largeur de l'élément fait référence à la hauteur/largeur de la partie de contenu
border-box : modèle de boîte traditionnelle IE. La définition des attributs hauteur/largeur d'un élément fait référence à la hauteur/largeur de la bordure + remplissage + partie contenu

3 Que sont les sélecteurs CSS ? Quelles propriétés peuvent être héritées ?

Sélecteurs CSS : sélecteur d'identifiant (#myid), sélecteur de classe (.myclassname), sélecteur de balise (p, h1, p), sélecteur adjacent (h1 + p), sélecteur d'enfant (ul > li), sélecteur de descendant (li a), sélecteur de caractère générique (*), sélecteur d'attribut (a[rel=”external”]), sélecteur de pseudo-classe ( a:hover, li:nth-child)

Propriétés héréditaires : font-size, font-family, color

Style non héritable : border, padding, margin, width, height

Priorité (principe de proximité) : !important > [ id > class > tag ]
!important que dans Priorité de connexion élevée

4 Comment est calculé l'algorithme de priorité CSS ?

Sélecteur d'élément : 1
Sélecteur de classe : 10
Sélecteur d'identifiant : 100
Balise d'élément : 1000

1. !Le style déclaré par important a la priorité la plus élevée. S'il y a un conflit, il sera recalculé.

2. Si les priorités sont les mêmes, le style le plus récent est sélectionné.

3. Le style hérité a la priorité la plus basse.

5 Quelles sont les nouvelles pseudo-classes en CSS3 ?

p:first -of -type sélectionne le premier élément qui appartient à son élément parent
p:last-of-type sélectionne le dernier élément qui appartient à son élément parent
p:only-of-type sélectionne le seul élément qui appartient à son élément parent
p:only-child sélectionne le seul élément enfant qui appartient à son élément parent
p:nth-child(2) sélectionne le deuxième élément enfant qui appartient à son élément parent
:enabled :disabled L'état désactivé du contrôle de formulaire.
:coché Le bouton radio ou la case à cocher est coché.

6 Comment centrer p ? Comment centrer un élément flottant ? Comment centrer un p en position absolue ?

p :

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;

Centrer le haut, le bas, la gauche et la droite du flottant éléments :

border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;

Positionnement absolu centre gauche et droit :

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;

还有更加优雅的居中方式就是用flexbox，以后会做整理。

7 display有哪些值？说明他们的作用?

inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block

8 position的值？

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

9 CSS3有哪些新特性？

1. RGBA和透明度

2. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

3. word-wrap（对长的不可分割单词换行）word-wrap：break-word

4. 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）

5. font-face属性：定义自己的字体

6. 圆角（边框半径）：border-radius 属性用于创建圆角

7. 边框图片：border-image: url(border.png) 30 30 round

8. 盒阴影：box-shadow: 10px 10px 5px #888888

9. 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

10 请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

11 用纯CSS创建一个三角形的原理是什么？

首先，需要把元素的宽度、高度设为0。然后设置边框样式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

12 一个满屏品字布局如何设计?

第一种真正的品字：

1. 三块高宽是确定的；

2. 上面那块用margin: 0 auto;居中；

3. 下面两块用float或者inline-block不换行；

4. 用margin调整位置使他们居中。

第二种全屏的品字布局:

上面的p设置成100%，下面的p分别宽50%，然后使用float或者inline使其不换行。

13 常见的兼容性问题？

1. 不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}

2. IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。

3. 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

4. {
   background-color:#f1ee18;/*所有识别*/
   .background-color:#00deff\9; /*IE6、7、8识别*/
   +background-color:#a200ff;/*IE6、7识别*/
   _background-color:#1e0bd1;/*IE6识别*/
   }

5. 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

6. IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。

7. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

8. 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

14 为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

15 absolute的containing block计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

1. 若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；

2. 否则,则由这个祖先元素的 padding box 构成。

如果都找不到，则为 initial containing block。

补充：

1. static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）

2. absolute: 向上找最近的定位为absolute/relative的元素

3. fixed: 它的containing block一律为根元素(html/body)

16 CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。

1. chrome中，使用collapse值和使用hidden没有区别。

2. Firefox, Opera et IE, il n'y a aucune différence entre utiliser la valeur de repli et utiliser display:none.

17 Quelle est la différence entre display:none et visibilité:hidden ?

affichage : aucun n'affiche pas l'élément correspondant et n'alloue plus d'espace dans la mise en page du document (reflow + redessiner)
visibilité : masqué masque l'élément correspondant dans le document L'espace d'origine est toujours conservé dans la mise en page (redessin)

18 Que se passe-t-il lorsque la position, l'affichage, le débordement et le flotteur se superposent ?

L'attribut display spécifie le type de boîte que l'élément doit générer ; l'attribut position spécifie le type de positionnement de l'élément ; l'attribut float est une méthode de mise en page qui définit dans ; dans quelle direction l'élément flotte.
Similaire au mécanisme de priorité : position : absolue/fixe a la priorité la plus élevée. Lorsqu'ils sont présents, float ne fonctionne pas et la valeur d'affichage doit être ajustée. Les éléments positionnés par float ou absolu ne peuvent être que des éléments de bloc ou des tableaux.

19 Comprendre la spécification BFC (contexte de formatage des blocs) ?

BFC précise comment la Block Box interne est disposée.
Schéma de positionnement :

1. Les Box internes seront placées les unes après les autres dans le sens vertical.

2. La distance verticale de la Box est déterminée par la marge. Les marges de deux Box adjacentes appartenant au même BFC se chevaucheront.

3. Le côté gauche de la zone de marge de chaque élément touche le côté gauche de la zone de bordure du bloc contenant.

4. La zone BFC ne chevauchera pas la boîte flottante.

5. 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 extérieurs.

6. Lors du calcul de la hauteur de BFC, les éléments flottants participeront également au calcul.

BFC peut être déclenché si l'une des conditions suivantes est remplie

1. La racine élément, qui est html

2. La valeur de float n'est pas aucune (par défaut)

3. La valeur du débordement n'est pas visible (par défaut)

4. La valeur de l'affichage est inline-block, table-cell, table-caption

5. position est absolue ou fixe

20 Pourquoi le flotteur apparaît-il et quand il faut le nettoyer ? Comment effacer le flotteur ?

L'élément flottant s'arrête lorsqu'il touche la bordure le contenant ou la bordure de l'élément flottant. Étant donné que l'élément flottant ne se trouve pas dans le flux de documents, la zone de bloc de flux de documents se comporte comme si la zone flottante n'existait pas. Les éléments flottants flottent sur la zone de bloc du flux de documents. Problèmes causés par le flottement :

1. La hauteur de l'élément parent ne peut pas être étendue, affectant les éléments au même niveau que l'élément parent

2. Les éléments non flottants (éléments en ligne) au même niveau que l'élément flottant suivront

3. Si ce n'est pas le premier. Si un élément flotte, les éléments qui le précèdent doivent également être flottants, sinon cela affectera la structure d'affichage de la page.

Façon d'effacer les flotteurs :

1. Le parent p définit la hauteur

2. Ajoutez une balise p vide après le dernier élément flottant et ajoutez le style clear:both.

3. Ajouter un débordement de style à masqué ou auto à la balise parent contenant l'élément flottant.

4. Parent p définit le zoom

Recommandations de tutoriel associées : Tutoriel vidéo CSS

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!