Entrevista con una gran fábrica, estas preguntas de CSS deben dominarse

En el front-end moderno, las entrevistas tienen requisitos más bajos para la investigación de CSS, que difícilmente se pueden comparar con JavaScript, o incluso con un cierto tema de subdivisión de JavaScript.

Este artículo enumera varias preguntas de entrevista de CSS que se pueden usar para entrevistas de CSS en la mayoría de las empresas.

Para obtener más preguntas de la entrevista de CSS, puede ver Preguntas de la entrevista de CSS

modelo de caja

• Tema: Una breve descripción del modelo de caja CSS

El modelo de caja de CSS incluye principalmente los siguientes dos tipos, que se pueden configurar a través de la propiedad box-sizing :

• content-box: propiedad predeterminada. ancho contiene solo contenido
• border-box:width contiene (contenido, relleno, borde)

Especificidad CSS (peso)

• Tema: describir brevemente la especificidad de css

css specificityEs decir, el peso del selector en css, descienden a su vez los siguientes tres tipos de selectores

1. idselectores como#app
2. class, attributey pseudo-classesselectores , como .header, [type="radio"]y:hover
3. typeSelectores de etiquetas y selectores de pseudoelementos como h1, py::before

Entre ellos, los selectores comodín *, los selectores combinados + ~ >y los selectores de pseudoclase negados no tienen efecto :not()en la prioridad.

Los estilos en línea adicionales <div class="foo" style="color: red;"></div>y !important(el más alto) tienen mayor peso

:notEl impacto de prioridad de - codepen puede ver que no tiene efecto en la prioridad :notdel selector

Especificidad de CSS: codepen puede ver que hay más de una docena de selectores de clase y ninguno de los selectores de identificación tiene un peso alto

Preguntas complementarias:

1. 100 个 class 选择器和 id 选择器那个比较高
2. 属性选择器和类选择器哪个权重较高
3. 通配符选择器和元素选择器哪个权重教高

'+' 与 '~' 选择器有什么不同

• 【Q315】'+' 与 '~' 选择器有什么不同

• + 选择器匹配紧邻的兄弟元素

• ~ 选择器匹配随后的所有兄弟元素

z-index 与层叠上下文

• 题目：如何更好地给元素设置 z-index
• 题目：z-index: 999 元素一定会置于 z-index: 0 元素之上吗

z-index 高数值一定在低数值前边吗，div 层级如下所示

• A -> 3
  • AA -> 1000
• B -> 4
  • BB -> 10

代码见 zindex - codepen

不一定，更复杂的示例见 层叠上下文 - MDN

水平垂直居中

• 题目: 如何实现一个元素的水平垂直居中
• 代码: absolute/translate

宽高不定的块状元素水平垂直居中，可见以下示例

• absolute/translate

同时提供几种不同的思路：

• flex:
  • justify-content: center
  • align-content: center
• grid
  • place-items: center
• absolute/translate
  • position: absolute
  • left/top: 50%
  • transform: translate(50%)
• ##absolute/inset##

左侧固定、右侧自适应

• 题目: css 如何实现左侧固定300px，右侧自适应的布局
• 代码: 代码

提供 flex 与 grid 布局的两种思路

• flex:
  • 左侧: flex-basis: 200px
  • 右侧: flex-grow: 1; flex-shrink: 0;
• grid
  • 父容器: grid-template-columns: 200px 1fr;

.container
  .left
  .main
复制代码

.container {
  display: grid;
  grid-template-columns: 300px 1fr;
}
复制代码

三栏均分布局

• 题目: 如何实现三列均分布局
• Código: cómo implementar un diseño de tres columnas

También flexproporcione gridlos dos esquemas de y

• doblar:
  • Opcion uno:flex: 1;
  • Opción II:flex-basis: calc(100% / 3)
• red:
  • contenedor padre:grid-template-columns: 1fr 1fr 1fr

Otra pregunta: ¿Cómo realizar el diseño dividido uniformemente de dieciséis columnas?

Cómo dibujar un cuadrado/rectángulo con largo y ancho fijos

• Pregunta: Cómo dibujar un cuadrado/rectángulo con largo y ancho fijos

La solución anterior era usar padding. paddingSi un elemento se establece como un porcentaje, significa que el ancho del elemento principal se utiliza como punto de referencia.De acuerdo con este principio, se puede establecer la relación de aspecto. Pero, de hecho, el significado es limitado.Después de todo, ocupas el relleno y no hay área para el contenido.

Una solución moderna es utilizar la propiedad CSS de relación de aspecto: aspect-ratio.

Cómo CSS evita los conflictos de estilo

• Tema: Cómo evitar conflictos de estilo de nombres al escribir CSS

1. Fórmula BEM:.home-page .home-page-btn

.home-page {
  .home-page-btn {}
}
复制代码

BEM tiene una deficiencia, es decir, es demasiado largo y se puede simplificar adecuadamente, solo envolviendo el nombre de la clase raíz del componente de la página, pero puede aumentar el riesgo de conflicto de estilo.

.home-page {
  .btn {}
}
复制代码

2. Alcance CSS

scoped cssSe generará un atributo único o nombre de clase para todos los elementos bajo el componente actual (alcance), y todas las reglas de CSS llevarán atributos únicos para lograr la protección de nombres de alcance

// 手动写
.btn {}

// 编译后
.btn .jsx-1287234 {}

复制代码

3. Módulo CSS

• repositorio de módulos css
• demostración de módulos css

module cssEl nombre de la clase se codificará

Variables CSS

• Tema: ¿Alguna vez has usado la variable css y qué problemas resuelve?

:root{
  --bgcolor: #aaa;
  --color: #000;
}
复制代码

Modo oscuro de configuración CSS

• Tema: Cómo usar CSS para implementar el modo oscuro del sitio web (Dark Mode)

En su forma más simple, esto se logra a través de consultas de medios @media (prefers-color-scheme: dark)y variables CSS.

@media (prefers-color-scheme: dark) {
    :root{
    }
}
复制代码