¿De cuántas maneras de centrar verticalmente?
1）tabla-celda
pantalla:table-cell;vertical-align:middle
2) flexionar
mostrar:flex;justificar-contenido:centro;alinear-elementos:centro
3) Posicionamiento absoluto
margin:auto;arriba, izquierda, derecha, abajo están todos configurados en 0
4）transformar:traducir(-50%,-50%);
position:absolute;tp:50%;left:50%;width:100%;transform:translate(-50%,-50%);
5) elemento principal relativo, elemento secundario absoluto (valores superiores e izquierdos específicos)
6) pantalla: bloque en línea
7) altura de línea
em y rem
- rem se calcula en relación con el elemento raíz, mientras que em es relativo al tamaño de fuente del elemento actual o del elemento principal.
- rem no solo puede establecer el tamaño de la fuente, sino que también admite atributos como el ancho y la altura del elemento.
- em se convierte en relación con el elemento actual o el elemento principal, cuanto más profundo sea el nivel, más compleja será la conversión. Y rem se calcula en relación con el elemento raíz, evitando relaciones jerárquicas.
¿Cuál es el modelo de caja? (contenido/relleno/borde)
Modelo de caja estándar: tamaño de caja: ancho de caja de contenido (contenido) + relleno + borde + margen
IE盒模型：box-sizing:border-box width(contenido + relleno + borde) + margen
El modelo de caja se divide en dos categorías: el modelo de caja estándar y el modelo de caja extraña (modelo de caja IE).Los
componentes del modelo de caja (de afuera hacia adentro):
margen (margen exterior) + borde (borde) + relleno ( margen interno) + contenido (tamaño del contenido de la caja)
Nota:
El ancho del modelo de caja estándar se refiere al ancho del contenido del contenido, y la altura se refiere a la altura del contenido.
El ancho del modelo de caja extraña se refiere al total ancho del contenido, borde y relleno (contenido + borde + relleno);
la altura se refiere a la altura total del contenido, borde y relleno
Método de conversión de cuadro:
si falta el protocolo doctype, lo definirá el propio navegador .
En el navegador IE, las versiones anteriores a IE9 (IE6, IE7, IE8) activan el modo raro, y otros navegadores usarán
el modo estándar W3C de forma predeterminada.
tamaño de caja: modelo de caja estándar de caja de contenido
tamaño de caja: modelo de caja IE de caja de borde
BFC (Contexto de formato de bloque))
BFC significa que se crea un área de representación independiente en el navegador y tiene un conjunto de reglas de representación que determinan cómo se colocan sus subelementos y cómo interactúan con otros elementos.
Los elementos con características BFC se pueden considerar como contenedores independientes aislados. Los elementos dentro del contenedor no afectarán a los elementos exteriores en el diseño, y BFC tiene algunas características que los contenedores ordinarios no tienen. En términos sencillos, BFC puede entenderse como una gran caja cerrada. No importa cuán abrumadores sean los elementos dentro de la caja, no afectarán el exterior.
¿Cuál es la diferencia entre mostrar: ninguno y visibilidad: oculto?
- display:none oculta el elemento correspondiente, no se le asigna espacio en el diseño del documento, y los elementos a cada lado se cerrarán, como si nunca hubiera existido.
- visibilidad:hidden oculta el elemento correspondiente, pero aún conserva el espacio original en el diseño del documento.
¿Qué es CSS Hack?
CSS hack es permitir que diferentes navegadores reconozcan diferentes símbolos agregando algunos símbolos especiales a los estilos CSS (existe un estándar para el tipo de símbolos que reconocen los navegadores, CSS hack es permitirle recordar este estándar), para lograr el propósito de aplicar diferentes estilos CSS.
Hay tres trucos de CSS de uso común, trucos internos de CSS, trucos de selector y referencias de encabezado HTML, el primero de los cuales es el más utilizado.
Trucos internos de CSS
/*Mozilla内核浏览器：firefox3.5+*/
-moz-transform: rotate | scale | skew | translate ;
/*Webkit内核浏览器：Safari and Chrome*/
-webkit-transform: rotate | scale | skew | translate ;
/*Opera*/
-o-transform: rotate | scale | skew | translate ;
/*IE9*/
-ms-transform: rotate | scale | skew | translate ;
/*W3C标准*/
transform: rotate | scale | skew | translate
truco selector
El truco para IE9 se puede escribir así
:root .test
{
background-color:green;
}Referencia de encabezado HTML
<!– 默认先调用css.css样式表 –>
<link rel="stylesheet" type="text/css" href="css.css" />
<!–[if IE 7]>
<!– 如果IE浏览器版是7,调用ie7.css样式表 –>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]–>
<!–[if lte IE 6]>
<!– 如果IE浏览器版本小于等于6,调用ie.css样式表 –>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]–>
Comprensión semántica de HTML
- Haz lo correcto con la etiqueta correcta.
- La semántica HTML hace que el contenido de la página sea más estructurado y claro, lo cual es conveniente para que los navegadores y los motores de búsqueda lo analicen; incluso en ausencia de estilos css, se muestra en un formato de documento y es fácil de leer.
- Los rastreadores de motores de búsqueda también se basan en etiquetas HTML para determinar el contexto y el peso de cada palabra clave, lo que favorece la optimización SEO.
- Facilite que las personas que leen el código fuente dividan el sitio web en fragmentos, lo cual es fácil de leer, mantener y comprender.
href y src?
- href (referencia de hipertexto) especifica la ubicación de un recurso web, definiendo así un enlace o relación entre el elemento actual o el documento actual y el ancla o recurso deseado definido por el atributo actual. (El propósito no es hacer referencia a los recursos, sino establecer un vínculo para que la etiqueta actual pueda vincularse a la dirección de destino).
- src source (abreviatura), apunta a la ubicación del recurso externo y el contenido señalado se aplicará a la ubicación de la etiqueta actual en el documento.
- La diferencia entre href y src:
- 1. Los tipos de recursos solicitados son diferentes: href apunta a la ubicación del recurso de red y establece una conexión con el elemento actual (anclaje) o el documento actual (enlace). Cuando se solicita el recurso src, los recursos a los que apunta se descargarán y aplicarán al documento, como secuencias de comandos JavaScript e imágenes img;
- 2. Los resultados son diferentes: href se usa para establecer una conexión entre el documento actual y el recurso de referencia, src se usa para reemplazar el contenido actual;
- 3. Los métodos de análisis del navegador son diferentes: cuando el navegador analiza a src, suspenderá la descarga y el procesamiento de otros recursos hasta que el recurso se cargue, compile y ejecute. recurso al contenido actual. Es por eso que se recomienda poner el script js en la parte inferior en lugar de la cabeza
¿Cuál es la diferencia entre readonly y disabled en un formulario?
Lo que tienen en común: la capacidad de evitar que los usuarios cambien el contenido del formulario
Diferencias:
1. solo lectura solo es válido para entrada y área de texto, pero deshabilitado es válido para todos los elementos de formulario,
incluidas la radio y la casilla de verificación
2. solo lectura puede obtener el foco, pero no se puede modificar.
El cuadro de texto establecido por disabled no puede recibir el foco
3. Si el campo del formulario está deshabilitado, el campo no se enviará (valor del formulario) ni se serializará
Explique brevemente la diferencia y el uso entre el enlace CSS y @import
link es una etiqueta XHTML, además de cargar CSS, también puede definir otras cosas como RSS; @import pertenece a la categoría de CSS y solo puede cargar CSS.
Cuando el enlace se refiere a CSS, se carga al mismo tiempo que se carga la página; @import debe cargarse después de que la página esté completamente cargada.
link es una etiqueta XHTML y no tiene problemas de compatibilidad; @import se propuso en CSS2.1 y los navegadores de versiones anteriores no lo admiten.
link admite el uso de Javascript para controlar DOM para cambiar estilos; @import no admite