Wondershare EdrawMind
Galería de mapas mentales Selectores para HTML y CSS
- 9
Selectores para HTML y CSS
En HTML y CSS, los selectores básicos, los selectores compuestos, los pseudoselectores, etc. son contenidos importantes. Este mapa divide estos contenidos en detalle para que sea más fácil de entender.
Editado a las 2021-07-26 11:47:06,
- Recomendados
- Resumen
Selector CSS
Introducir hoja de estilo
1. Hojas de estilo en línea
2. Hoja de estilo interna
3. Hojas de estilo externas
Selector
selector básico
1. Selector universal*
2. Selector de elementos h2
3. Selector de clase .class
4.selector de identificación #id
selector compuesto
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
Pseudo selector
Selector de pseudoelementos
1::primera línea
2::primera letra
3 ::antes; ::después
4::selección
Selector de pseudoclase
1. Selector dinámico de pseudoclases
1: enlace; (enlace) cuando no se accede
2:visitado (enlace) después de ser visitado
3: flotar;
4: activar cuando se activa (cuando se presiona el mouse)
5:enfoque Al conseguir el enfoque
2.Selector de pseudoclase de UI
1 :habilitado; :deshabilitado
2: comprobado
3 :obligatorio; :opcional
4:predeterminado
5 :válido; :inválido
6: dentro del rango; fuera del rango
7 :solo lectura; :lectura-escritura;
3. Selector de pseudoclase estructural
1: selector de elemento raíz raíz
2: elemento vacío vacío
3
:primer hijo; :último hijo; :hijo único;
:primero de tipo; :último de tipo; :solo de tipo;
4
:enésimo-hijo(); :enésimo-último-hijo()
:enésimo-de-tipo(); :enésimo-último-de-tipo();
4. Otros selectores de pseudoclases
1: objetivo; punto de anclaje de la página
2: idioma; idioma
3: no (selector) Selector negativo
selector de atributos
1 [atributo]
2 [atributo="val"]
3 [atributo^="valor"]
4 [atributo$="valor"]
5 [atributo*="valor"]
6 [atributo~="valor"]
7 [atributo|="valor"]
CSS
expresión de color
RGB (RGBA)
MALEFICIO
HSL (HSLA)
fondo
fondo
color de fondo color de fondo
imagen de fondo imagen de fondo
repetición de fondo
no repetir
repetir-x
repetir-y
espacio (ajustar el espaciado de las imágenes)
redondo (cambiar el tamaño de la imagen)
posición de fondo
(arriba, izquierda, derecha, abajo, centro) combinación por pares
(x%y%)
(x y)
origen-fondo
caja de relleno
cuadro de borde
cuadro de contenido
clip de fondo
caja de relleno
cuadro de borde
cuadro de contenido
tamaño de fondo
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)
archivo adjunto de fondo
local (pergaminos con contenido)
scroll (no se desplaza con el contenido, pero se desplaza con la página)
fijo (tamaño fijo, no controlado)
modelo de caja
márgenes
El porcentaje es un porcentaje del ancho del contenedor principal.
relleno
margen
Perímetro
frontera frontera
ancho del borde
color del borde
estilo de borde
frontera-raius
imagen de borde imagen de borde
fuente-imagen-borde
corte-imagen-borde
ancho-de-imagen-del-borde
inicio-imagen-borde
repetición-imagen-borde
sombra de la caja
esquema esquema
color de contorno, estilo, ancho
contorno-desplazamiento (el desplazamiento exterior del contorno desde el borde)
tamaño
ancho
altura
ancho mínimo (alto)
ancho máximo (alto)
¿Escenario de aplicación?
tamaño de caja
cuadro de margen
cuadro de borde
caja de relleno
cuadro de contenido
Desbordamiento
Desbordamiento
auto
oculto
Desplazarse
visible (predeterminado)
heredar
desbordamiento-x, desbordamiento-y
mostrar
problema de colapso de margen
Colapso vertical (colapso de borde)
Colapso anidado
Ubicación
flotar
Varios métodos para eliminar flotadores:
El principio de flotación.
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.
Aviso
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).
posición
Atributos
estático (predeterminado, diseño normal)
relativo (posicionamiento relativo)
absoluto (posicionamiento absoluto)
fijo (posicionamiento fijo)
pegajoso (posicionamiento pegajoso)
Aviso
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).
Flotador claro: claro
BFC (contexto de formato a nivel de bloque)
1. Si se cumplen las siguientes condiciones, se creará automáticamente un nuevo BFC
El atributo flotante no es ninguno.
El atributo de posición no es estático ni relativo.
El valor del atributo de desbordamiento no es visible
El atributo de visualización es flex, inline-flex, inline-block, table-cell o table-caption.
2.Regulaciones BFC: colapso vertical del margen, colapso anidado
Solución: coloque el div en un BFC diferente
3. Métodos para acomodar elementos flotantes.
1. También configure el flotador para el contenedor.
2. Utilice transparente para limpiar los flotadores.
3. Cree un nuevo BFC para el elemento exterior.
4. Utilice BFC para evitar el ajuste de texto
diseño de varias columnas
recuento de columnas: especifique el número de columnas
ancho de columna: especifique el ancho de la columna
columnas
espacio entre columnas: espaciado entre columnas
longitud
normal
relleno de columna: cómo se distribuye el contenido entre columnas
equilibrio (el contenido se distribuye uniformemente)
auto (el contenido se completa en orden)
column-span: especifica cuántas columnas abarca el elemento horizontalmente
número
todo
ancho de regla de columna: especifique el ancho entre columnas
coloum-rule-style: especifica el estilo entre columnas
color-regla-columna: especifica el color entre columnas
regla de columna
Caso: disposición del flujo en cascada
Pregunta de la entrevista: varios métodos para implementar el diseño de varias columnas
flotar
posición
columna
Diseño de la página web de Trinity
Diseño centrado
elementos en línea
Centrado horizontal: elemento principal text-align: center;
Centrado verticalmente: altura de línea: (altura);
elementos a nivel de bloque
Centrar horizontalmente: margen: 0 automático;
Centrar verticalmente:
PASO1: posición: absoluta;
PASO 2: arriba, abajo (izquierda, derecha): 0;
PASO 3: margen: automático;
diseño de una sola columna
diseño de dos columnas
Diseño centrado de ancho fijo de dos columnas
La barra lateral tiene un ancho fijo y el contenido principal es adaptable.
Usar implementación flotante
Utilice el posicionamiento para lograr
diseño de tres columnas
método flotante
método de posicionamiento absoluto
Método de margen negativo
diseño clásico
Diseño de ala volante doble
diseño del santo grial
diseño de flujo de cascada
Uso de márgenes negativos
Márgenes negativos para elementos estáticos.
Arriba e izquierda: mueve el elemento hacia la parte superior izquierda
Abajo y derecha: permita que los elementos posteriores invadan desde abajo o hacia la derecha para cubrirse
Márgenes negativos para elementos flotantes
Igual que la dirección flotante: el elemento se mueve la distancia correspondiente en la dirección correspondiente
Lo opuesto a la dirección flotante: el elemento en sí no se mueve, y los elementos antes o después del elemento se moverán una distancia correspondiente en la dirección del elemento.
Aplicación de márgenes negativos
Diseño de tres columnas para listas
Diseño de caja flexible
pantalla (configurada en caja flexible)
flex (caja flexible a nivel de bloque)
inline-flex (caja flexible en línea)
flex-wrap (especificar ajuste de elemento)
wrap (especifique el elemento flexible para ajustar automáticamente)
nowrap (valor predeterminado, sin ajuste de línea automático)
wrap-reverse (los elementos flexibles se envuelven automáticamente al revés)
dirección flexible (especifica la dirección de disposición de los elementos)
fila (valor predeterminado, los elementos flexibles están dispuestos horizontalmente)
columna (disposición vertical)
fila inversa (disposición horizontal inversa)
column-reverse (disposición inversa vertical)
Se puede combinar en flujo flexible
Alineación del diseño de flexbox
Dos conceptos importantes
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.
Alineación
justificar contenido (alineación en el eje principal)
flex-start (valor predeterminado, el elemento elástico comienza cerca del eje principal)
extremo flexible (el elemento elástico está cerca del borde final del eje principal)
centro (el elemento flexible está centrado en el eje principal)
espacio entre (organice cada elemento de manera uniforme, con el primer elemento cerca del borde inicial del eje principal y el último elemento cerca del borde final del eje principal).
space-around (Todos los elementos flexibles están dispuestos de manera uniforme y el espacio entre elementos no colapsa). (Organiza cada elemento de manera uniforme, asigna el mismo espacio alrededor de cada elemento)
uniformemente en el espacio (Todos los elementos flexibles están dispuestos de manera uniforme y el espacio entre los elementos se contrae). (Cada elemento está dispuesto de manera uniforme, con el mismo espacio entre cada elemento)
Alineación en eje vertical
align-items (alineación de todos los elementos en el eje vertical)
flex-start (los elementos flexibles comienzan cerca del eje vertical)
extremo flexible (el elemento elástico está cerca del borde final del eje vertical)
centro (el elemento flexible está centrado en el eje vertical)
línea base (los elementos flexibles están alineados con la línea base)
estiramiento (valor predeterminado, el elemento elástico se estira para ocupar todo el tamaño del eje vertical)
align-self (alineación en el eje vertical de un elemento)
align-content (alineación de elementos flexibles de varias líneas)
inicio flexible
extremo flexible
centro
espacio entre
abarcar alrededor
uniformemente en el espacio
orden (orden de visualización)
elasticidad
flex-grow (Define cómo se amplía el elemento flexible).
flex-shrink (define cómo se comprimen los elementos flexibles)
base flexible (base flexible)
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.
flexionar (0 1 automático)
Características de los elementos flexibles.
1. Los márgenes de los dos elementos elásticos no colapsarán ni colapsarán.
2. No es válido configurar elementos flotantes en elementos flexibles (pero se puede configurar el posicionamiento)
Diseño de cuadrícula (diseño de cuadrícula)
terminología básica
Cuadricula
Pista de cuadrícula
Cuadrícula de celdas
Área de cuadrícula
visualización (establecida como contenedor de cuadrícula)
red
cuadrícula en línea
Definiciones de filas y columnas
columnas-plantilla-cuadricula
fr (por ejemplo: 1fr 1fr 1fr; 100px 50% 1fr)
filas de plantilla de cuadrícula
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).
Definir plantillas basadas en regiones
área de plantilla de cuadrícula: debe usarse con área de cuadrícula.
Aviso
1. Cada línea debe estar envuelta con una cuerda.
2. Debe ser rectangular.
Habilidad
...significa dejarlo en blanco