interface Web
tutoriel CSS
Jetez un œil à ces questions d'entretien préliminaires pour vous aider à maîtriser les points de connaissances à haute fréquence (5)
Jetez un œil à ces questions d'entretien préliminaires pour vous aider à maîtriser les points de connaissances à haute fréquence (5)
10 questions chaque jour, après 100 jours, vous maîtriserez tous les points de connaissances à haute fréquence des entretiens front-end, allez ! ! ! , en lisant l'article, j'espère que vous ne regardez pas directement les réponses, mais demandez-vous d'abord si vous le savez, et si oui, quelle est votre réponse ? Pensez-y et comparez-la avec la réponse. Serait-ce mieux ? Bien sûr, si vous avez une meilleure réponse que la mienne, veuillez laisser un message dans la zone de commentaire et discuter ensemble de la beauté de la technologie.
Intervieweur : Comment obtenir une mise en page fixe de 300 px sur le côté gauche et une mise en page adaptative sur le côté droit en utilisant CSS ?
Moi : Euh~, d'accord, vous pouvez utiliser une mise en page flexible, ou flottant + BFC, le code entier est le suivant :
mise en page flexible :
<style>
*{margin: 0;padding: 0;}
.container{
display: flex;
}
.left{
width: 300px;
height: 100vh;
background-color: #f00;
}
.main{
flex: 1;
background-color: #ae5aca;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="main"></div>
</div>
</body>Floating + BFC :
<style>
*{margin: 0;padding: 0;}
.container {
height: 100vh;
}
.left {
float: left;
width: 300px;
height: 100%;
background-color: #f00;
}
.main {
height: 100%;
background-color: #ae5aca;
overflow: hidden;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="main"></div>
</div>
</body>
Intervieweur : Quelle est la différence entre align-content et align-items dans la mise en page flexible ?
Moi : Euh~, ce sont tous des éléments qui agissent sur l'axe vertical. Les différences spécifiques sont les suivantes :
align-content : Il agit sur des éléments multi-lignes sur l'axe vertical, et les éléments d'une seule ligne n'ont aucun effet. [Recommandations associées : développement web front-end]
<style>
.container {
background-color: #efefef;
border: 1px solid #888;
margin-top: 3rem;
height: 300px;
display: flex;
flex-wrap: wrap;
/* 纵轴多元素一起居中 */
align-content: center;
}
.item {
width: 200px;
height: 100px;
background-color: #ccc;
border: 1px solid #aaa;
}
</style>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
align-items : agit sur les éléments à une seule rangée d'axe vertical
<style>
.container {
background-color: #efefef;
border: 1px solid #888;
margin-top: 3rem;
height: 300px;
display: flex;
flex-wrap: wrap;
/* 纵轴单元素居中 */
align-items: center;
}
.item {
width: 200px;
height: 100px;
background-color: #ccc;
border: 1px solid #aaa;
}
</style>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
Intervieweur : Quels sont les avantages de la disposition en grille ?
Moi : Euh~, la disposition Flex est une disposition d'axe. Vous pouvez uniquement spécifier la position de "l'élément" sur l'axe, qui peut être considérée comme une disposition unidimensionnelle. La disposition en grille divise le conteneur en « lignes » et « colonnes », génère des cellules, puis spécifie la cellule où se trouve « l'élément », qui peut être considérée comme une disposition bidimensionnelle. La disposition en grille est bien plus puissante que la disposition Flex.
Intervieweur : Quelle est la différence entre la base flexible et la largeur dans la mise en page Flex ?
Moi : Euh~, la valeur de flex-basis est une situation idéale, mais elle peut être compressée dans des situations réelles. Lorsque flex-direction est une colonne, l'axe principal est l'axe vertical et flex-basis correspond à. hauteur en ce moment
Intervieweur : Le chargement du CSS bloquera-t-il l'analyse et le rendu de l'arborescence DOM ?
Moi : Euh~, le chargement du CSS affectera directement le rendu de la page Web, car ce n'est qu'après le chargement du CSS et la construction du CSSOM que l'arbre de rendu (Render Tree) sera construit puis rendu dans un bitmap S'il y a un chargement dans le script HTML, cela affectera également indirectement l'analyse de l'arborescence DOM, car le téléchargement, l'analyse et l'exécution de javascript bloquent l'analyse de l'arborescence DOM, et il est possible d'accéder à CSSOM en javascript, par exemple. comme Element.getBoundingClientRect, donc javascript ne démarrera pas tant que le CSSOM n'est pas construit, bloquant indirectement l'analyse de l'arborescence DOM.
Intervieweur : Qu'est-ce que le contexte d'empilement (contexte d'empilement), parlez de votre compréhension de celui-ci
Moi : Euh~, d'accord, le contexte d'empilement est une conception tridimensionnelle de ces éléments HTML. Les éléments HTML occupent cet espace par ordre de priorité en fonction de leurs attributs d'élément. Les priorités sont les suivantes :
Vous souhaitez en savoir plus sur le contexte d'empilement : Article recommandé : Compréhension approfondie du contexte d'empilement et de l'ordre d'empilement en CSS.
面试官：z-index: 999 元素一定会置于 z-index: 0 元素之上吗？
我：呃~，不会，我们在进行层叠上下文时，会优先比较父级，如果父级是层叠上下文，子级即使有z-index也不再起作用了，如果父级层叠上下文层叠顺序相等，那么采取后来居上原则，前者覆盖后者。如果父级是普通元素，子级层叠比较就不受父级的影响，谁的层叠顺序高谁就先展示。
层叠黄金准则：
谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。
后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。
整出代码如下：
<style>
.first {
background-color: red;
height: 3rem;
z-index: 2;
opacity: 0.99;
}
.item1 {
z-index: 0;
height: 100%;
width: 3rem;
background-color: orange;
}
.second {
background-color: blue;
height: 3rem;
margin-top: -1.5rem;
z-index: 3;
position: relative;
}
.item2 {
z-index: 999;
height: 100%;
width: 3rem;
background-color: green;
}
</style>
<body>
<div class="first">
<div class="item1"></div>
</div>
<div class="second">
<div class="item2"></div>
</div>
</body>
面试官：什么是 Data URL？
我：呃~，Data URL 是将图片转换为 base64 直接嵌入到了网页中。
使用
这种方式引用图片，不需要再发请求获取图片。
使用 Data URL 也有一些缺点：
base64 编码后的图片会比原来的体积大三分之一左右。
Data URL 形式的图片不会缓存下来，每次访问页面都要被下载一次。可以将 Data URL 写入到 CSS 文件中随着 CSS 被缓存下来。
面试官：网站设置字体时，如何设置优先使用系统默认字体？
我：呃~，system-ui 将会自动选取系统默认字体作为字体。
面试官：CSS如何实现圣杯布局？
我：呃~，圣杯布局是指两端宽度固定，中间自适应。在日常开发中，圣杯布局的使用频率是比较高的。举一个简单的浮动例子，当然也可以使用定位或flex布局，整出代码如下：
浮动：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
border: 1px solid black;
overflow: hidden;
padding: 0px 100px;
min-width: 100px;
}
.left {
background-color: greenyellow;
float: left;
width: 100px;
margin-left: -100%;
position: relative;
left: -100px;
}
.center {
background-color: darkorange;
float: left;
width: 100%;
}
.right {
background-color: darkgreen;
float: left;
width: 100px;
margin-left: -100px;
position: relative;
left: 100px;
}
</style>
</head>
<body>
<section class="container">
<article class="center"><br /><br /><br /></article>
<article class="left"><br /><br /><br /></article>
<article class="right"><br /><br /><br /></article>
</section>
</body>
</html>
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 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 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 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
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.
