1. Entrevistador: Cuénteme sobre su comprensión del modelo de caja.
El modelo de cuadro CSS es esencialmente un cuadro, que incluye: contenido, relleno, borde, margen. Los modelos de caja en CSS incluyen el modelo de caja IE y el modelo de caja estándar W3C.
En el modelo de caja estándar , el ancho se refiere al ancho de la parte del contenido.
En el modelo de cuadro de IE , el ancho representa el ancho de las tres partes contenido+relleno+borde
Entonces hay una diferencia al calcular el ancho de la caja:
Modelo de caja estándar: ancho total de un bloque = ancho + margen (izquierdo y derecho) + relleno (izquierdo y derecho) + borde (izquierdo y derecho)
Modelo de caja extraña: ancho total de un bloque = ancho + margen (izquierdo y derecho) (ambos anchos ya incluyen valores de relleno y borde)
2. propiedad de tamaño de caja
La propiedad de tamaño de cuadro en CSS define cómo el motor debe calcular el ancho total y la altura total de un elemento
tamaño de cuadro: cuadro de contenido | cuadro de borde | heredar:
cuadro de contenido: el ancho/alto del elemento no incluye relleno, borde,. 【Modelo de caja estándar】
border-box: El ancho/alto del elemento incluye relleno y borde. [Modelo de caja IE]
heredar: hereda el valor de tamaño de cuadro del elemento principal.
3. Entrevistador: ¿Qué son los selectores de CSS? ¿prioridad? ¿Qué propiedades se pueden heredar?
Los selectores de atributos css comúnmente utilizados son:
selector de identificación (#myid)
selector de clase (.myclass)
selector de atributo (a[rel="externo"])
Selectores de pseudoclase (a:hover, li:nth-child)
selector de etiquetas (div, h1, p)
Selector de hermanos (h1+p)
selector de niños (ul > li)
selector de descendientes (li a)
Selector comodín (*)
prioridad:
!importante
estilos en línea (1000)
Selector de identificación (0100)
Selector de clase/Selector de atributo/Selector de pseudoclase (0010)
Selector de elementos/Selector de pseudoelementos (0001)
Selector de relaciones/selector de comodines (0000)
El atributo de estilo marcado con !important tiene la prioridad más alta, cuando la fuente de la hoja de estilo es la misma: !important > estilo en línea > selector de ID > selector de clase > etiqueta > comodín > herencia > atributo predeterminado del navegador
Propiedades heredadas:
atributo de familia de fuentes
Familia tipográfica |
peso de fuente |
tamaño de fuente |
Estilo de fuente |
fuente |
peso de fuente |
tamaño de fuente |
Estilo de fuente |
Propiedades de la serie de texto
guion de texto |
texto alineado |
altura de la línea |
dirección |
color |
guion de texto |
ajuste de nivel de texto |
altura de la línea |
dirección de escritura |
color de texto |
Elemento visibilidad visibilidad etc.
Propiedades sin herencia:
mostrar
Atributos de texto: alineación vertical, decoración de texto,
Propiedades de fondo, propiedades de modelo de caja, propiedades de posicionamiento, etc.
4. Entrevistador: ¿Cuéntame sobre la diferencia entre em/px/rem/vh/vw?
px: unidad absoluta, la página se muestra en píxeles precisos
em: unidad relativa, el punto de referencia es el tamaño de fuente del nodo principal, si usted mismo define el tamaño de fuente, se calculará por sí mismo, 1em en toda la página no es un valor fijo
rem: unidad relativa, relativa solo al valor del tamaño de fuente del elemento raíz HTML
vw, se divide en 100 partes iguales según el ancho de la ventana, 100vw significa ancho completo, de manera similar, vh es la altura de la ventana vh, vw: se utiliza principalmente para el diseño del tamaño de la ventana gráfica de la página, más conveniente y simple en el diseño de la página
5. Entrevistador: En css, ¿cuáles son las formas de ocultar elementos de página? ¿la diferencia?
Los métodos para ocultar elementos a través de css son los siguientes:
1. display:none Después de que el elemento se establece en display:none, el elemento desaparecerá por completo en la página, lo que provocará la reorganización y el redibujado del navegador, incapaz de responder a los eventos de clic.
2. visibilidad: oculto solo oculta el elemento y los resultados del DOM existirán, pero en ese momento se encuentra en un estado invisible y no activará la reorganización, pero activará el redibujado y no puede responder a los eventos de clic.
3. opacidad: 0 Después de establecer la transparencia del elemento en 0, el elemento también se oculta y no causará reorganización. Generalmente, también causará redibujado y puede responder a eventos de clic
4. Establezca los atributos del modelo de alto y ancho en 0. Establezca el alto y el ancho del elemento, como los atributos que afectan el modelo de caja del elemento, en 0. Si hay elementos secundarios o contenido en el elemento, también debe establecer overflow:hidden para ocultar sus elementos secundarios. Responder a los eventos de clic
5. position:absolute mueve el elemento fuera del área visible top: -9999px, left:-9999px, Features: el elemento es invisible y no afecta el diseño de la página
6. Entrevistador: Cuénteme sobre su comprensión de BFC.
BFC (contexto de formato de bloque), es decir, contexto de formato de nivel de bloque, es un área de representación en la página y tiene su propio conjunto de reglas de representación:
1. Las cajas interiores se colocarán una tras otra en dirección vertical
2. Los márgenes de dos cuadros adyacentes del mismo BFC se superpondrán, independientemente de la dirección.
3. El margen izquierdo de cada elemento toca el borde izquierdo del bloque contenedor (de izquierda a derecha), incluso para elementos flotantes
4. El área de BFC no se superpondrá con el área del elemento de flotación
5. Al calcular la altura de BFC, los subelementos flotantes también participan en el cálculo
6. BFC es un contenedor aislado e independiente en la página. Los elementos secundarios dentro del contenedor no afectarán a los elementos externos, y viceversa.
¿Cómo crear BFC?
1. El elemento raíz, el elemento HTML
2. El valor de float no es ninguno
3. La posición es absoluta o fija
4. El valor de visualización es bloque en línea, celda de tabla, título de tabla
5. El valor de desbordamiento no es visible
Escenarios de aplicación de BFC
1. Evite que el margen se superponga (colapse)
2. Flotación interna clara
3. Diseño adaptativo de varias columnas, etc.
7. Entrevistador: ¿Cuáles son las formas de centrar elementos horizontal y verticalmente?
1. Centrado horizontalmente
Para elementos en línea : alineación de texto: centro;
Para elementos a nivel de bloque que determinan el ancho:
(1) El ancho y el margen están realizados. margen: 0 automático;
(2) Posicionamiento absoluto y margen izquierdo: (ancho principal - ancho secundario)/2, siempre que la posición del elemento principal: relativa
Para elementos a nivel de bloque de ancho desconocido
(1) el bloque en línea realiza el método de centrado horizontal. El elemento secundario display: inline-block y el elemento principal text-align: center logran un centrado horizontal.
(2) Posicionamiento absoluto + transformación, translateX puede mover el 50% de sus propios elementos.
(3) El elemento padre del diseño flexible usa justificar-contenido:centro
(4) La etiqueta de la mesa coopera con el margen izquierdo y derecho automático para lograr el centrado horizontal. Use la etiqueta de la tabla y luego agregue los márgenes izquierdo y derecho a la etiqueta como automático.
Segundo, centrado vertical
1. Use la altura de línea para lograr el centrado, este método es adecuado para texto puro
2. Al establecer el posicionamiento relativo del contenedor principal y el posicionamiento absoluto del contenedor secundario, la etiqueta realiza un centrado autoadaptativo a través del margen
3. Flexibilidad de diseño flexible: pantalla configurada para padres: flexible, margen configurado para niños en automático para lograr un centrado adaptativo
4. Establezca el posicionamiento relativo en el nivel principal y el posicionamiento absoluto en el nivel secundario, y realícelo a través de la transformación de desplazamiento
5. Para el diseño de tablas, el nivel principal se convierte en un formulario de tabla y luego el nivel secundario se establece en alineación vertical.
8. Entrevistador: ¿Cómo realizar el diseño a dos columnas y la autoadaptación en el lado derecho? ¿Qué pasa con adaptativo en medio del diseño de tres columnas?
Diseño de dos columnas:
El efecto del diseño de dos columnas es dividir la página en dos columnas con diferentes anchos a la izquierda y a la derecha. La columna con un ancho más pequeño se establece en un ancho fijo, y el ancho restante se llena con la otra columna.
Idea de implementación 1:
1. columna flotante izquierda flotante izquierda
2. Use el margen izquierdo para apuntalar el bloque de contenido para la visualización de contenido
3. Agregue BFC al elemento de nivel para evitar que el elemento inferior vuele al contenido superior, como el desbordamiento: oculto
Idea de implementación 2:
diseño elástico flexible
La pantalla del cuadro principal: flex, el ancho del cuadro izquierdo está escrito y el cuadro derecho flex: 1 ocupa una parte
diseño de tres columnas
El diseño de tres columnas se organiza en el orden de izquierda, media y derecha. Por lo general, la columna central es la más ancha, seguida de las columnas izquierda y derecha.
Idea de implementación:
1. Use flotante en ambos lados y margen en el medio
2. Use absoluto, use margen en el medio
3. El diseño del santo grial, utilizando el método de valor negativo de margen (explicación detallada)
Para usar el diseño del santo grial, primero debe incluir un div fuera del elemento central. Para incluir el div, debe establecer el atributo flotante para formar un BFC y establecer el ancho en 100%. De esta manera, el medio El cuadro ocupa una sola línea, y los cuadros izquierdo y derecho se aprietan hacia abajo, lo que permite que el cuadro izquierdo suba. Establezca el margen izquierdo: -100%, deje que el cuadro de la derecha suba para establecer el margen izquierdo: Negativo ancho propio
4. Use la pantalla: tabla para lograr
5. Use flex para configurar el padre para que muestre: flex;justify-content: space- between;
6. diseño de cuadrícula
Establecer pantalla: cuadrícula, ancho: 100%, cuadrícula-plantilla-columnas: 300px auto 300px;
9. Entrevistador: Cuénteme sobre flexbox (modelo de diseño de caja flexible) y escenarios aplicables.
Con respecto a las propiedades comúnmente utilizadas de flex, podemos dividirlas en propiedades de contenedor y propiedades de miembro de contenedor.
1. Propiedades del contenedor
flex-direction: determina la dirección del eje principal flex-direction: fila | fila-reversa | columna | columna-reversa;
flex-wrap: determina la regla de nueva línea flex-wrap: nowrap | wrap |wrap-reverse;
flujo flexible: abreviatura de las propiedades de dirección flexible y envoltura flexible
justificar contenido: método de alineación, alineación del eje principal horizontal
1. espacio entre: ambos extremos están alineados y los intervalos entre elementos son iguales
2. espacio alrededor: dos elementos están igualmente espaciados en ambos lados
align-items: alineación, dirección del eje vertical
align-content: define la alineación de múltiples ejes
2. Las propiedades del artículo (las propiedades del elemento):
atributo de orden: define el orden de clasificación de los elementos, cuanto menor sea el orden, mayor será la clasificación, el valor predeterminado es 0
atributo flex-grow: define la relación de ampliación del elemento, el valor predeterminado es 0, incluso si hay espacio, no se ampliará
Atributo flex-shrink: define la relación de reducción del elemento, cuando el espacio es insuficiente, se reducirá proporcionalmente, si el flujo de contracción de un elemento se define como 0, no se reducirá
Atributo flex-basis: define el espacio que ocupa el elemento al asignar el exceso de espacio.
flex: Abreviatura de flex-grow, flex-shrink y flex-basis, el valor predeterminado es 0 1 auto.
align-self: permite que un solo elemento tenga una alineación diferente a la de otros elementos, lo que se puede anular
10. Flex realiza el diseño css en la esquina superior izquierda, esquina media e inferior izquierda del div
El padre configura al hijo para que use el posicionamiento absoluto para moverse libremente a diferentes posiciones en la página, como la esquina superior izquierda.
pantalla:flex;
posición: relativa;
dirección flexible:fila;
justificar-contenido:espacio-alrededor;
alinear elementos: centro;
11. Entrevistador: ¿Cuáles son las formas de despejar el flotador?
1. Agregue etiquetas adicionales al padre y agregue <divstyle="clear:both"></div>
2. Agregue el atributo de desbordamiento al padre o establezca la altura
3. Cree un selector de pseudoclase para borrar el flotante (el siguiente ejemplo) o 4. Use los pseudoelementos dobles antes y después para borrar el flotante
.parent:después{
/* Establecer el contenido del elemento secundario agregado para que esté vacío */
contenido: '';
/* Establecer el elemento secundario añadido como un elemento de nivel de bloque */
bloqueo de pantalla;
/* Establecer la altura del elemento secundario agregado en 0*/
altura: 0;
/* configurado para agregar elementos secundarios invisibles */
visibilidad: oculto;
/* Poner en claro: ambos */
Limpia los dos;
}
12. Entrevistador: ¿Qué nuevas funciones se han agregado a CSS3?
1. Selector
Se han agregado algunos selectores nuevos en css3, que incluyen principalmente selectores de atributos, selectores de pseudoclases estructurales, selectores de pseudoelementos, etc.
2. Nuevo estilo
marco |
fondo |
||
borde-radio |
Crear bordes redondeados |
clip de fondo |
Determine el área de pintura de fondo |
sombra de la caja |
Agregar sombras a los elementos |
fondo-origen |
Determinar el punto de alineación de la imagen |
imagen de borde |
Usa imágenes para dibujar bordes |
tamaño de fondo |
Cambiar el tamaño de la imagen de fondo |
sombra de la caja |
establecer la sombra del elemento |
|
|
carta |
color |
||
ajuste de línea |
Permitir saltos de línea dentro de las palabras |
rgb |
|
desbordamiento de texto |
Cómo mostrar más allá del borde del contenedor |
rgba se divide en dos partes, rgb es el valor del color, a es la transparencia |
|
sombra de texto |
Aplicar sombra al texto |
|
|
decoración de texto |
Representación más profunda del texto |
||
Tres, transición transición
La propiedad de transición se puede especificar como el efecto de transición de una o más propiedades CSS. Varias propiedades se separan con comas. La sintaxis es la siguiente:
transición: propiedad CSS, tiempo de costo, curva de efecto (facilidad predeterminada), tiempo de demora (0 predeterminado)
Cuatro, transformar la conversión
La propiedad de transformación le permite rotar, escalar, sesgar o traducir un elemento dado
Cinco, animación animación
6. Gradiente: gradiente lineal: gradiente lineal
imagen de fondo: gradiente lineal (dirección, color-stop1, color-stop2, ...);
7. Otras características nuevas de css3 incluyen diseño elástico flexible y diseño de cuadrícula
13. Entrevistador: ¿Qué son las animaciones CSS3?
Hay varias formas de implementar la animación en css:
1. La transición realiza la abreviatura de transición de la animación de gradiente: transición: todos los 2 s se suavizan en 500 ms;
2. transformar la animación de transición
Contiene cuatro funciones de uso común: traducir: escala de desplazamiento: zoom rotar: rotar sesgar: inclinar
3. La animación realiza una animación personalizada.
Definir fotogramas clave a través de @keyframes
14. Entrevistador: Si desea optimizar, ¿cuáles son las formas de mejorar el rendimiento de CSS?
Hay muchas formas de implementar, principalmente las siguientes:
1. Inline la clave CSS de la primera pantalla: a través del código de la clave css en línea, el navegador puede mostrarlo inmediatamente después de descargar el html
2、异步加载CSS：
3、资源压缩：利用webpack等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间
4、合理使用选择器：不要嵌套使用过多复杂选择器
5、减少使用昂贵的属性：在页面发生重绘的时候，昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等，会降低浏览器的渲染性能
6、不要使用@import：@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时
15、面试官：浏览器重绘与重排的区别？
重排/回流（Reflow）：当DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素。
重绘(Repaint): 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变
当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分。重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。
重绘不一定会出现重排，重排必然会出现重绘
如何触发重排和重绘？
任何改变用来构建渲染树的信息都会导致一次重排或重绘：
1、添加、删除、更新DOM节点
2、通过display: none隐藏一个DOM节点-触发重排和重绘
3、通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化
4、移动或者给页面中的DOM节点添加动画
5、添加一个样式表，调整样式属性
6、用户行为，例如调整窗口大小，改变字号，或者滚动。
如何避免重绘或者重排？
1、集中改变样式，不要一条一条地修改 DOM 的样式。
2、不要把 DOM 结点的属性值放在循环里当成循环里的变量。
3、为动画的 HTML 元件使用 fixed 或 absolute 的 position，那么修改他们的 CSS 是不会reflow 的。
4、不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。
5、尽量只修改position：absolute或fixed元素，对其他元素影响不大
6、动画开始GPU加速，translate使用3D变化
7、将元素提升为合成层
16、面试官：什么是响应式设计？响应式设计的基本原理是什么？如何做？
响应式网站设计是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整
响应式设计的基本原理：通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport
实现响应式布局的方式有如下：1、媒体查询 2、百分比 3、vw/vh 4、rem
媒体查询语法：
@mediascreen (min-width: 375px) and (max-width: 600px) {
body {
font-size: 18px;
}
}响应式布局优点：1、面对不同分辨率设备灵活性强2、能够快捷解决多设备显示适应问题
缺点：
1、仅适用布局、信息、框架并不复杂的部门类型网站
2、兼容各种设备工作量大，效率低下
17、面试官：如何实现单行／多行文本溢出的省略样式？
一、单行文本溢出省略
1、text-overflow: ellipsis：规定当文本溢出时，显示省略符号来代表被修剪的文本
2、white-space:nowrap：设置文字在一行显示，不能换行
3、overflow:hidden：文字长度超出限定宽度，则隐藏超出的内容
二、多行文本溢出省略
基于行数截断
-webkit-line-clamp:2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）
display:-webkit-box：和1结合使用，将对象作为弹性伸缩盒子模型显示
-webkit-box-orient:vertical：和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
overflow:hidden：文本溢出限定的宽度就隐藏内容
text-overflow:ellipsis：多行文本的情况下，用省略号“…”隐藏溢出范围的文本
18、面试官：如何使用css完成视差滚动效果?
视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验
可以使用transform:translate3D来实现
transform:css3 属性，可以对元素进行变换(2d/3d)，包括平移 translate,旋转 rotate,缩放 scale,
perspective:css3 属性，当元素涉及 3d 变换时，perspective 可以定义我们眼睛看到的 3d 立体效果，即空间感
这种方式实现视觉差动的原理如下：
1、容器设置上 transform-style: preserve-3d 和 perspective: xpx，那么处于这个容器的子元素就将位于3D空间中，
2、子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样
3、滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果
19、如何画一条0.5px的线
方法一、移动端，采用metaviewport的方式
<metaname="viewport"
content="width=device-width,
initial-scale=0.5, minimum-scale=0.5,maximum-scale=0.5"/>这样子就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。
方法二、采用transform: scale()的方式
transform:scale(0.5,0.5);方法三、使用boxshadow
height:1px;
box-shadow:0 0.5px 0 #000;设置box-shadow的第二个参数为0.5px，表示阴影垂直方向的偏移为0.5px。
20、面试官：CSS如何画一个三角形？原理是什么？
/*记忆口诀：盒子宽高均为零，三面边框皆透明。 */
div:after{
position: absolute;
width: 0px;
height: 0px;
content: " ";
border-right: 100px solid transparent;
border-top: 100px solid #ff0;
border-left: 100px solid transparent;
border-bottom: 100px solid transparent;
}
21、面试官：让Chrome支持小于12px的文字方式有哪些？区别？
常见的解决方案有：
1、zoom
zoom的字面意思是“变焦”，可以改变页面上元素的尺寸，属于真实尺寸
其支持的类型有：
zoom:50%，表示缩小到原来的一半
zoom:0.5，表示缩小到原来的一半
2、-webkit-transform:scale()
针对chrome浏览器,加webkit前缀，用transform:scale()这个属性进行放缩
3、-webkit-text-size-adjust:none
该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小
22、面试官：说说对Css预编语言的理解？有哪些区别?
Css作为一门标记性语言，语法相对简单，但同时也带来一些问题。需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，Css预处理器便是针对上述问题的解决方案
Css预编译语言在前端里面有三大优秀的预编处理器，分别是：
1、sass 2、less 3、stylus
变量：less声明的变量必须以@开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号:分隔开
嵌套：三者的嵌套语法都是一致的
作用域：Css 预编译器把变量赋予作用域，也就是存在生命周期。就像 js一样，它会先从局部作用域查找变量，依次向上级作用域查找
混入：Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用
代码模块化：模块化就是将Css代码分成一个个模块
使用方法：
@import './common';