Notas css personales

marcado de hipertexto html
referencia de hipertexto href
utf-8 es una implementación del código universal unicode gb2312 extensión gdk simplificada en chino, incluido el
rastreador tradicional lang = "en"
<div>


El elemento está centrado en la posición absoluta superior izquierda 50%
margen izquierdo = -1 / 2 ancho margen superior = -1 / 2 alto

  1. abiI inverted = "invertido" lista de orden inverso <img alt = "¿qué es esta imagen"> muestra información de texto cuando la dirección es incorrecta, título de marcador de posición de la imagen

punto de anclaje, adhiérase a la parte superior
<a> target = "_ blank" página de nueva pestaña
Inserte la descripción de la imagen aquí

Inserte la descripción de la imagen aquí
Envío de correos electrónicos
Aplicación Artículo 3 en su teléfono móvil, también puede enviar correos electrónicos
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

Inserte la descripción de la imagen aquí

Md5 es irreversible y se refuerza la
seguridad de la contraseña de la Segunda Guerra Mundial de EE. UU. 2g → 3 / 4g. La onda de frecuencia 5s lo convierte en una red 2g, que será interceptada cuando se transmita a la estación base más cercana.
Debe escribir el nombre en la captura <input>, de lo contrario, el envío no se realizará correctamente.
Inserte la descripción de la imagen aquí

El nombre de la radio está unificado. Establezca el valor predeterminado marcado = 'marcado' al configurar.
CheckBox
<option> puede agregar valor, el que sea mayor, pero no hay necesidad de
navegadores convencionales. Debe tener un kernel desarrollado de forma independiente. El kernel incluye 1, shell shell 2. 、 El kernel
IE trident
Firefox Gecko
Google Chrome Webkit / Blink
Safari Webkit
Opera presto / Blink (co-desarrollado) La
nueva versión Opera13 / 14 también usa la
hoja de estilo en cascada Css de webkit

  1. Style = "" en la etiqueta de estilo de línea
  2. El nivel de página csstype = ”text / css” se puede omitir
  3. Enlace de archivo css externo
    presione la tecla de tabulación
    para iniciar dos subprocesos al mismo tiempo, descargue css y html al mismo tiempo, ID asíncrono,
    identidad unicidad # ... {}
    Selector de atributos
    Inserte la descripción de la imagen aquí
    Inserte la descripción de la imagen aquí

Peso de CSS (comodín *)
Inserte la descripción de la imagen aquí

256 hexadecimal, con el
mismo peso, mira hacia atrás y cubre el frente al mismo nivel
Inserte la descripción de la imagen aquí
Selector padre-hijo, puedes mezclar el id de la clase, y el espacio servirá.
Inserte la descripción de la imagen aquí

El navegador mira el recorrido del selector padre-hijo de derecha a izquierda; de lo contrario, debe volver a mirar
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

Inserte la descripción de la imagen aquí
.box # solo también funciona,
selector de grupo
Inserte la descripción de la imagen aquí

El valor predeterminado de 16 px es generalmente 12 o 14, y el tamaño de la fuente se establece en la altura y el contorno de la fuente.
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

transparente transparente
Inserte la descripción de la imagen aquí
y cubre el efecto frontal
HTML CSS / * * /
1em = 1font-size;
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

Uno de los selectores de pseudoclase: hover
Inserte la descripción de la imagen aquí

Elemento de texto en línea, hay un espacio entre el ejemplo img (puede comentar el salto de línea o el tamaño de fuente = 0)
span, a, b, i, u, em, del, strong, pseudo elemento
(elemento de texto excepto p es nivel de bloque, el resto son de nivel de fila)
div, h series, li, dt, dd, p, ul, table, form
img, input, button (el tercer tipo)
contienenInserte la descripción de la imagen aquí

Cualquiera con un peso comodín de
zoom proporcional de ancho y alto de Img único en línea
es 0, por lo que el
cuerpo del comodín se puede anular y el margin8px predeterminado está
Inserte la descripción de la imagen aquí
centrado.Inserte la descripción de la imagen aquí

Diseño de dos columnas, en lugar de flotante, el orden de los dos div no se puede revertir

Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

bug①Collapse: Los elementos anidados padre e hijo están pegados juntos en la dirección vertical, y el margen es el valor máximo.
Contexto de formato de bloque El contexto de formato de bloque usa esto para cambiar las reglas gramaticales.
CSS tiene exactamente las mismas reglas en cada cuadro
Inserte la descripción de la imagen aquí

bug②Merge: Se fusiona el margen vertical de los elementos de la estructura del hermano y se
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
corrige el margen común .Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

Corrección correcta: Calcule más píxeles, no resuelva
FloatInserte la descripción de la imagen aquí

Los elementos en línea se denominan elementos de texto y solo los elementos a nivel de bloque no se pueden ver

Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

Los elementos de bloque no pueden ver elementos flotantes, por lo que, naturalmente, no
pueden contenerlos. Método de corrección: (no estándar, hay dos especificaciones a continuación)
Inserte la descripción de la imagen aquí

Los pseudo-elementos siempre existen, usamos css para seleccionar para modificar, el siguiente es el selector
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

Puede ser operado por css, pero no hay una estructura HTML, el contenido solo se puede usar en pseudo-elementos y debe estar escrito. Los
pseudo-elementos son elementos de nivel de línea
Inserte la descripción de la imagen aquí

Los flotadores despejados deben ser elementos a nivel de bloque.
Método uno, use pseudo elementos para despejar flotantes
Inserte la descripción de la imagen aquí

Se debe escribir un juego de tres piezas, siempre que haya un flujo flotante
Inserte la descripción de la imagen aquí

Método dos, contexto de formato de elemento a nivel de bloque bfc
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

pantalla:
texto de una sola línea en bloque en línea y texto de varias líneas
Inserte la descripción de la imagen aquí

Espacio en blanco: nowrap no ajusta el
desbordamiento de texto para lograr ...
Inserte la descripción de la imagen aquí

Una etiqueta con una imagen de fondo, en el caso de eliminar el css, la función básica también debe realizarse en el caso de la tarjeta de red
:
① La altura se cambia a 0px, el padding-top es la altura del contenedor, desbordamiento : oculto
② La sangría de texto, el ancho del contenedor, el espacio en blanco: Nowrap, sin salto de línea, desbordamiento: oculto
Inserte la descripción de la imagen aquí
p no puede contener div, a no puede contener un
Margen: 0px auto parent y child deben estar a nivel de bloque
el elemento de texto se alinea hacia abajo
una vez que un elemento de bloque de nivel de línea o un elemento de texto contiene texto, afuera El texto y el texto adentro están alineados en la parte inferior
Inserte la descripción de la imagen aquí
vertical-align: px valor positivo significa abajo
Inserte la descripción de la imagen aquí

¿Cuál es la diferencia en el valor de Posición?
Absoluta se desvía de la posición original, el modelo de capa, en relación con la posición del documento principal o relativo más cercano, se
desvía de fijo , se desvía de
Relativo y conserva la posición de posición original, el modelo de capa relativo a sí mismo, no se desvía del flujo del documento
z- El uso del índice está separado. Los
Inserte la descripción de la imagen aquí
píxeles son unidades relativas. Hay
cinco valores de
Inserte la descripción de la imagen aquí
altura de línea. Es mejor usar el valor de altura de línea directamente × tamaño de fuente , multiplica tu propio tamaño de fuente
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

@media se adapta al teléfono móvil @ font-face descarga fuentes que no están disponibles en la computadora y coloca el archivo de fuente en el directorio raíz
Inserte la descripción de la imagen aquí

Favicon.ico (avatar del sitio web) se coloca en el directorio raíz
Inserte la descripción de la imagen aquí

Por ejemplo, configurando el directorio raíz, la base puede poner muchos atributos
www navegador mosaico gráficos de visualización del navegador
No hay un logotipo de título llamativo etiqueta h1, solo aparece una vez, subtítulo h2 título de sección h3 título de sección h4 título de sección h5h6 generalmente no se usa, anidado
Inserte la descripción de la imagen aquí

Anida en el exterior, puede hacer clic en las esquinas y el área de clic aumenta.
Dos modelos de caja
Inserte la descripción de la imagen aquí

Utilice el segundo tipo para cambios frecuentes de relleno
Inserte la descripción de la imagen aquí

Flota hacia la izquierda, no hacia la derecha, y finalmente escribe en el medio
Inserte la descripción de la imagen aquí

desbordamiento oculto para cambiar palabras con imágenes
Inserte la descripción de la imagen aquí

Imagen de fondo de degradado lineal: degradado lineal (luz, color, color);
Inserte la descripción de la imagen aquí
135 °
Inserte la descripción de la imagen aquí

es decir, filtrar

Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

Navegación de Taobao
Inserte la descripción de la imagen aquí
sobre la
comprensiónInserte la descripción de la imagen aquí

La imagen está centrada y las celdas están centradas
. Configure display: table-cell para el elemento principal, y configure vertical-align: middle,
y luego configure el margin-left y margin-right del elemento secundario en auto.

Ponga el icono en una imagen, reduzca la solicitud, comprima la imagen (¿imagen de Sprite?)
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

Mesa
Inserte la descripción de la imagen aquí

.Webp
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

Agregar altura de línea si hay altura
Inserte la descripción de la imagen aquí

Espacio = nueva línea, nueva línea forzada
:: escrito como: compatible con IE8

Mapa de Sprite (sitio de entrevistas)
Inserte la descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/s8806479/article/details/114545482
Recomendado
Clasificación