1. proceso de renderizado html
De acuerdo con la estructura de árbol del directorio de documentos, comenzando desde el nodo raíz, desde el elemento padre al elemento hijo, y luego al siguiente elemento padre al elemento hijo
2. El proceso de cálculo de los valores de propiedad CSS
El proceso de cálculo del valor del atributo desde cero. Nota: El requisito previo para representar cada elemento html es que todos los estilos CSS del elemento sean valiosos. (No existe después de que lo configuramos. Generalmente, el navegador dará el valor predeterminado cuando no está configurado)
Primero determine el valor de la declaración: consulte la declaración de atributo que no está en rojo en la hoja de estilo (estilo CSS, incluido el valor predeterminado, etc.) como el valor de atributo del CSS.
b) Conflicto en cascada: use reglas en cascada (descritas más adelante) para determinar el valor declarado en conflicto.
Por ejemplo: los dos siguientes son conflictos en cascada
h1{
color: red }
.head h1{
color: red }
c. Usar herencia: después de establecer los valores de las propiedades CSS a través de ayb, las propiedades restantes no tienen ningún valor. Si la propiedad se puede heredar, se hereda el valor del elemento padre.
d. Usar valores predeterminados: después de pasar a, byc, los valores restantes nuevamente usan el estilo predeterminado del navegador.
3. Reglas en cascada
a. Importancia
! importante> Estilo del autor (estilo escrito por nosotros mismos)> Estilo predeterminado del navegador
b. Particularidad (la prioridad de los
selectores CSS) El método de cálculo de los selectores CSS es comparar un número de
miles de cuatro dígitos : para determinar si hay un estilo en línea, si hay uno, es 1, de lo contrario es 0.
El lugar de los cientos: el número de todos los selectores de ID en el selector de CSS.
Decenas: el número total de selectores de clase, selectores de atributos y selectores de pseudoclase en los selectores CSS.
Unidades: el número total de selectores de elementos y selectores de pseudoelementos en los selectores CSS.
Nota: El sistema de acarreo no es decimal, es de 225 acarreo.
c. Orden de fuente
La prioridad más baja de escritura de código es mayor
4. Herencia CSS
Principalmente, el elemento secundario hereda la mayoría de los atributos de contenido de texto del elemento principal
5. Composición de la caja
内容, relleno, borde, margen
6. Características de la caja de filas
Extienda a lo largo del contenido: si el contenido se ajusta, el cuadro de línea se truncará a la siguiente línea y no se puede establecer el ancho y el alto del cuadro de línea. (El cuadro de bloque envuelve todo el contenido y no se ve afectado por el ajuste de línea)
b. El tamaño de fuente, el tipo de fuente y la altura de la línea para ajustar el ancho y la altura del cuadro de línea
c. El margen del borde de relleno del cuadro de fila es efectivo en la dirección horizontal y no ocupará espacio.
d) Se producirán pliegues en blanco dentro o entre los recuadros de línea.
e. Las cajas de hileras evitan las cajas flotantes cuando están dispuestas
Especial: para la
mayoría de los elementos, el resultado que se muestra en la página depende del contenido del elemento, que se denomina "elemento no reemplazable". Para una pequeña cantidad de elementos, los resultados que se muestran en la página dependen de los atributos del elemento, que se denominan "elementos modificables", como img, video, etc. La mayoría de los elementos reemplazables son cajas de líneas, pero al igual que las cajas de bloques de líneas, todos los tamaños en el modelo de caja son válidos.
7. Características de Fast Box
La visualización de la caja de bloque de línea en bloque no ocupa una sola línea. Todos los tamaños son válidos
. El plegado en blanco se producirá dentro de las cajas de bloque de línea o entre las cajas de bloque de línea.
8. Características de la caja de bloques
Dirección horizontal
El ancho total del cuadro del bloque es igual al ancho del bloque contenedor (el cuadro de contenido del elemento principal).
El valor de auto absorbe el espacio restante y la capacidad de absorción del ancho es mayor que el margen. Si se han calculado el ancho, el borde, el relleno y el margen, y todavía queda espacio, el espacio será absorbido por margin-right.
margen: 0 automático; centrado
b) Dirección
vertical La altura vertical de cada caja de bloque: se adapta automáticamente a la altura del contenido. margen: auto representa 0
c. Los márgenes superior e inferior de dos cuadros de bloque de flujo regular (sin flotación ni posicionamiento, etc.) se fusionarán si están adyacentes entre sí. Los dos márgenes toman el valor máximo. Se pueden aplicar tanto los elementos hermanos como los elementos principales y secundarios, a menos que los márgenes estén separados, como el borde Espere.
9. Valor porcentual
Los valores de porcentaje de relleno, margen y ancho se basan en el ancho del elemento principal. Tenga en cuenta que el elemento principal debe establecer un valor; de lo contrario, el porcentaje no es válido.
10. Elemento flotante
a. Después de que el elemento flota, debe ser una caja de bloques
b. Después de flotar, ancho y alto: auto; adaptarse al ancho y alto del contenido. margin: auto; el valor es 0. Los valores de borde, relleno y porcentaje son los mismos que los del flujo normal (artículo 8).
c) Las cajas flotantes evitarán las cajas de flujo regulares en el bloque contenedor Las cajas flotantes se ignoran cuando se organizan las cajas de bloques de flujo regulares. Por ejemplo: la caja de flujo regular está antes de la caja flotante y la caja flotante se colocará en una fila debajo del flujo regular. La caja de flujo convencional está detrás de la caja flotante y la caja flotante cubrirá la caja de flujo convencional.
d. Si el contenido de texto no está envuelto en el cuadro de línea, entonces el navegador generará un contenido de texto envuelto de cuadro de línea por defecto, que es equivalente al elemento p que envuelve el contenido de texto, y el navegador generará un intervalo en el elemento p (tenga en cuenta que solo es equivalente a, Pero no un lapso adicional)
e. Colapso de altura: La altura automática de la caja de flujo convencional no se considerará al calcular la caja flotante, por lo que la altura del elemento padre no envolverá la caja flotante.
Solución: use clear (cree div o directamente después)
11. Colocación
a. Los elementos de posicionamiento dejarán el flujo del documento (excepto el posicionamiento relativo).
b) En el posicionamiento, si hay un conflicto entre la izquierda y la derecha, prevalecerá la izquierda y prevalecerá el conflicto anterior.
c. Bloque de contención (área) absolutamente posicionado, busque el primer elemento que se colocará en el elemento ancestro de adentro hacia afuera, el cuadro lleno de este elemento es el bloque de contención (área), si no se encuentra, toda la página web es el bloque de contención.
d. El bloque contenedor posicionado de forma fija es toda la ventana de visualización del navegador.
e) Posicionamiento absoluto y relativo, ancho y alto automático, para adaptarse al contenido.
f. Centrado del estado de posicionamiento:
1. 定宽高
2. 将左右（上下）距离设为0
3. 将左右（上下）margin设为auto。
注意：在绝对定位和固定定位状态下，margin：auto会自动吸收剩空间。一般居中的广告就是这么显示
g) Posicionamiento absoluto y posicionamiento fijo: debe ser una caja de bloque, no debe ser flotante y no debe haber fusión de márgenes.