1. Selector universal*

2. Selector de elementos h2

3. Selector de clase .class

4.selector de identificación #id

1.Selector de intersección e#id ||

2. Selectores de unión e1,e2,e3

3. Selector de descendiente e1 e2 e3

4. Selector de descendiente e1>e2>e3

5. Selector de hermanos adyacentes e1 e2

6. Selector de hermanos universal e1 ~ e2

Selector de pseudoelementos

Selector de pseudoclase

1 [atributo]

2 [atributo="val"]

3 [atributo^="valor"]

4 [atributo$="valor"]

5 [atributo*="valor"]

6 [atributo~="valor"]

7 [atributo|="valor"]

no repetir

repetir-x

repetir-y

espacio (ajustar el espaciado de las imágenes)

redondo (cambiar el tamaño de la imagen)

(arriba, izquierda, derecha, abajo, centro) combinación por pares

(x%y%)

(x y)

caja de relleno

cuadro de borde

cuadro de contenido

caja de relleno

cuadro de borde

cuadro de contenido

automático (tamaño original)

x,y (ancho, alto)

x%,y% (porcentaje del elemento padre)

cubierta (ajustada para cubrir todo el contenedor)

contener (ajustado para que se muestre completamente)

local (pergaminos con contenido)

scroll (no se desplaza con el contenido, pero se desplaza con la página)

fijo (tamaño fijo, no controlado)

ancho del borde

color del borde

estilo de borde

frontera-raius

fuente-imagen-borde

corte-imagen-borde

ancho-de-imagen-del-borde

inicio-imagen-borde

repetición-imagen-borde

color de contorno, estilo, ancho

contorno-desplazamiento (el desplazamiento exterior del contorno desde el borde)

auto

oculto

Desplazarse

visible (predeterminado)

heredar

1. Después de que el elemento flote, se separará del flujo de documentos y aumentará el nivel.

2. La posición del elemento después de flotar se ve afectada por el elemento flotante anterior. Si el elemento anterior flota y la posición detrás de él es suficiente, se mostrará en la misma línea; El elemento se comprimirá a la siguiente línea para su visualización.

3. Después de que el elemento flote, si el elemento anterior no flota, el elemento actual flotará en su propia fila.

4. Si un elemento se empuja a la siguiente fila después de flotar, la posición del elemento actual se ve afectada por el elemento anterior con la misma dirección flotante.

1. Flotar hará que la altura del elemento principal se colapse.

2. Los elementos tienen "propiedades envolventes" después de flotar (similar a los bloques en línea).

estático (predeterminado, diseño normal)

relativo (posicionamiento relativo)

absoluto (posicionamiento absoluto)

fijo (posicionamiento fijo)

pegajoso (posicionamiento pegajoso)

1. Cuanto más tarde se posicione el elemento, mayor será el nivel (índice z)

2. Una vez colocado el elemento, tiene "propiedades de ajuste" (similares a los bloques en línea).

Centrado horizontal: elemento principal text-align: center;

Centrado verticalmente: altura de línea: (altura);

Centrar horizontalmente: margen: 0 automático;

Centrar verticalmente:

Usar implementación flotante

Utilice el posicionamiento para lograr

Diseño de ala volante doble

diseño del santo grial

Eje principal: especifica el orden en que se disponen los elementos elásticos.

Eje vertical: determina la dirección en la que se agregan los elementos de la segunda fila después de que se produce un salto de línea.

justificar contenido (alineación en el eje principal)

Alineación en eje vertical

flex-basis establece el tamaño inicial (no el ancho) ocupado por el elemento flexible en el eje principal.

Si se configuran flex-basis, ancho y alto al mismo tiempo, este último se sobrescribirá automáticamente.

fr (por ejemplo: 1fr 1fr 1fr; 100px 50% 1fr)

fr: El fr aquí es proporcional a la altura del contenedor de la cuadrícula. (Si no hay altura, se calculará según la altura del contenido).

Aviso

Habilidad