Chapitre CSS de la banque de questions de test écrit frontal Web

Dans l'article précédent "Banque de questions de test écrit front-end Web - HTML", nous avons partagé quelques questions d'entretien front-end sur HTML. L'article suivant fait suite au précédent et partage les questions du test écrit (avec réponses) pour la partie CSS. Voyons à combien d'entre elles vous pouvez répondre correctement !

1. Q : Les propriétés CSS sont-elles sensibles à la casse ?

 ```
 ul {
     MaRGin: 10px;
 }
 ```

A : Aucune distinction. HTML et CSS ne sont pas sensibles à la casse, mais pour une meilleure lisibilité et collaboration en équipe, ils sont généralement en minuscules. En XHTML, les noms et attributs des éléments doivent être en minuscules.

2. Q : La définition des marges supérieure et inférieure sur les éléments en ligne fonctionne-t-elle ?

A : Ça ne marche pas. (La réponse est que cela fonctionne, mais personnellement, je pense que c'est faux.) Les éléments de

html sont divisés en éléments remplacés et éléments non remplacés.

• Un élément de remplacement est un élément utilisé comme espace réservé pour un autre contenu. Le plus typique est img, qui pointe simplement vers un fichier image. Et la plupart des éléments du formulaire sont également remplacés, comme l'entrée, etc.

• Les éléments non remplacés sont des éléments dont le contenu est inclus dans le document. Par exemple, un paragraphe est un élément non remplacé si son contenu textuel est placé à l'intérieur de l'élément lui-même.

Pour déterminer si margin-top et margin-bottom fonctionnent sur les éléments en ligne, nous devons discuter séparément des éléments de remplacement en ligne et des éléments de non-remplacement en ligne.

Tout d'abord, nous devons préciser que des marges peuvent être appliquées aux éléments en ligne. Cependant, puisque les marges sont appliquées à un élément en ligne non remplacé, cela n'a aucun effet sur la hauteur de la ligne. . Puisque les marges sont effectivement transparentes. Il n'y a donc aucun effet visuel sur la déclaration de margin-top et margin-bottom. La raison en est que les marges des éléments en ligne non remplacés ne modifient pas la hauteur de ligne d'un élément. Ce n'est pas le cas des marges gauche et droite des éléments inline non remplacés, ce qui a un impact.

Les marges définies pour l'élément remplacé affecteront la hauteur de ligne, ce qui peut augmenter ou diminuer la hauteur de ligne, en fonction de la valeur des marges supérieure et inférieure. Les marges gauche et droite d'un élément remplacé en ligne ont le même effet que les marges gauche et droite d'un élément non remplacé. Jetons un coup d'œil à la démo :

http://codepen.io/paddingme/pen/JwCDF

3 Q : La définition de padding-top et padding-bottom sur un élément en ligne augmentera-t-elle sa hauteur ?

(La question initiale est : La définition de padding-top et padding-bottom sur un élément en ligne ajoute-t-elle à ses dimensions ?)

A : La réponse est non. Je suis un peu confus au sujet de la même question. Je ne comprends pas très bien ce que signifient les dimensions ici. Mettez-le de côté et analysons-le. Pour les éléments en ligne, définissez le remplissage gauche et droit, et le remplissage gauche et droit sera visible. Lors de la définition du remplissage supérieur et inférieur, vous pouvez voir que la zone de remplissage augmente après avoir défini la couleur d'arrière-plan. Pour les éléments en ligne non remplacés, la hauteur de la ligne ne sera pas affectée et l'élément parent ne sera pas étiré. Pour les éléments remplacés, l'élément parent est développé. Jetez un œil à la démo pour une meilleure compréhension :

http://codepen.io/paddingme/pen/CnFpa

4 Q : Définissez la taille de police de p : 10rem lorsque l'utilisateur réinitialise ou fait glisser le navigateur. window , la taille du texte changera-t-elle également ?

A : Non.

rem est une unité de mesure relative basée sur la taille de la police dans l'élément racine HTML. La taille du texte ne changera pas à mesure que la taille de la fenêtre change.

5. Q : Sélecteur de pseudo-classe : coché agira sur le type d'entrée de la radio ou de la case à cocher, et n'agira pas sur l'option.

A : Non.

La définition du sélecteur de pseudo-classe coché est évidente :

Le sélecteur de pseudo-classe CSS :checked représente n'importe quelle radio (d11dad02a1f3abd212da65221b2dc681), case à cocher (80a5462abd7374e41d992b38641a00e2dans un élément 221f08282418e2996498697df914ce4e) qui est cochée ou basculée vers un état activé. L'utilisateur peut modifier cet état en cliquant sur l'élément ou en sélectionnant une valeur différente, auquel cas le : la pseudo-classe cochée ne s'applique plus à cet élément, mais le sera à celui concerné.

6 Q : Dans le texte HTML, pseudo-class : root pointe toujours vers l'élément html ?

A : Non (oui ==|| est donné dans la réponse). Ce qui suit est extrait de Zhihu : Root et html font-ils référence au même élément en CSS3 ? La réponse :

Un seul doigt crée la racine. Cette racine ne peut pas être html , s'il s'agit d'un fragment html et qu'aucune racine n'est créée, ce sera la racine du fragment. Entrez l'URL ci-dessous dans un navigateur prenant en charge les URL de données (Firefox, Chrome, Safari, Opera) et vous verrez :

data:application/xhtml+xml,<div xmlns="http://www.w3.org/1999/xhtml"><style>:root { background: green; } html { background: red !important; }</style></div>

7 Q : La méthode translation() peut-elle déplacer la position d'un élément sur l'axe z. ?

A : Non. La méthode translate() ne peut modifier que le déplacement sur les axes x et y.

8. Q : Quelle est la couleur du texte « Saucisse » dans le code suivant ?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

ul {color:red;}
li {color:blue;}

A : bleu.

9. Q : Quelle est la couleur du texte « Saucisse » dans le code suivant ?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

ul {color:red;}
#must-buy {color:blue;}

A : bleu.

10. Q : Quelle est la couleur du texte « Saucisse » dans le code suivant ?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

.shopping-list .favorite {
    color: red;
}
#must-buy {
    color: blue;
}

A : bleu.

11、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

ul#awesome {
    color: red;
}
ul.shopping-list li.favorite span {
    color: blue;
}

A: blue。

12、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

ul#awesome #must-buy {
    color: red;
}
.favorite span {
    color: blue!important;
}

A: blue。

13、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

ul.shopping-list li .highlight {
    color: red;
}
ul.shopping-list li .highlight:nth-of-type(odd) {
    color: blue;
}

A: blue。

14、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

#awesome .favorite:not(#awesome) .highlight {
    color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
    color: blue;
}

A: blue。

15、Q:#example位置如何变化：

<p id="example">Hello</p>

#example {margin-bottom: -5px;}

A: 向上移动5px。

16、Q: #example位置如何变化：

<p id="example">Hello</p>

#example {margin-left: -5px;}

A: 向左移动5px。

17、#i-am-useless 会被浏览器加载吗？

<div id="test1">
    <span id="test2"></span>
</div>

#i-am-useless {background-image: url('mypic.jpg');}

A: 不会

18、mypic.jpg 会被浏览器加载吗？

<div id="test1">
    <span id="test2"></span>
</div>

#test2 {
    background-image: url('mypic.jpg');
    display: none;
}

A: 会被下载。

19、mypic.jpg 会被浏览器加载吗？

<div id="test1">
    <span id="test2"></span>
</div>

#test1 {
    display: none;
}
#test2 {
    background-image: url('mypic.jpg');
    visibility: hidden;
}

A: 不会被下载。

20、Q: only 选择器的作用是？

@media only screen and (max-width: 1024px) {argin: 0;}

A：停止旧版本浏览器解析选择器的其余部分。

only 用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query 但却支持Media Type 的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only 不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only 而不是screen；另外不支持Media Qqueries 的浏览器，不论是否支持only，样式都不会被采用。

21、Q:overfloa:hidden 是否形成新的块级格式化上下文？

<div>
    <p>I am floated</p>
    <p>So am I</p>
</div>

div {overflow: hidden;}
p {float: left;}

A：会形成。

会触发BFC的条件有：

• float的值不为none。

• overflow的值不为visible。

• display的值为table-cell, table-caption, inline-block 中的任何一个。

• position的值不为relative 和static。

22、Q: screen关键词是指设备物理屏幕的大小还是指浏览器的视窗？

@media only screen and (max-width: 1024px) {margin: 0;}

A: 浏览器视窗

（学习视频分享：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!