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 (), case à cocher (dans un élément
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Comment utiliser Bootstrap en Vue
Apr 07, 2025 pm 11:33 PM
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
Comment écrire des lignes fendues sur bootstrap
Apr 07, 2025 pm 03:12 PM
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
Comment redimensionner le bootstrap
Apr 07, 2025 pm 03:18 PM
Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-
Comment configurer le cadre de bootstrap
Apr 07, 2025 pm 03:27 PM
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comment afficher la date de bootstrap
Apr 07, 2025 pm 03:03 PM
Réponse: Vous pouvez utiliser le composant de sélecteur de date de bootstrap pour afficher les dates dans la page. Étapes: Présentez le framework bootstrap. Créez une boîte d'entrée de sélecteur de date dans HTML. Bootstrap ajoutera automatiquement des styles au sélecteur. Utilisez JavaScript pour obtenir la date sélectionnée.
Comment utiliser le bouton bootstrap
Apr 07, 2025 pm 03:09 PM
Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton
