Notas: resumen completo de conocimientos de CSS3
Marco estructural: dividido en seis partes (atributos, selectores, gramática y reglas, valores, unidades css y apéndices)
Parte 1: Propiedades (posicionamiento, diseño, modelo de caja flexible, tamaño, relleno exterior, relleno interior, borde, fondo, color, fuente, lista, tabla, contenido, interfaz de usuario, múltiples columnas, transformación 2D, transición, animación, impresión, Consulta de medios, solo IE, solo Firefox, solo webkit)
La segunda parte: selector (selector de elementos, selector de relaciones, selector de atributos, selector de pseudo-tipo, selector de pseudo-objeto)
Parte 3: Gramática y reglas (! Importante, / comentario /, @import, @charset, @media, # font-face, @page, @keyframes)
Parte 4: Valor (color, texto, función, imagen, número, otro)
Parte 5: unidades CSS (longitud, ángulo, tiempo, frecuencia, diseño)
Parte VI: Apéndice (palabras clave de color, tipo de medio, truco de condición de css, truco de atributo de css, truco de selector de css, solución de cssbugs, habilidades y experiencia de css, otras habilidades de css)
Parte 1: Propiedades
Sección 1: Posicionamiento (posición, índice z, arriba, derecha, abajo, izquierda)
第二节 ： 布局 （mostrar、 flotante 、 claro 、 visibilidad 、clip、 desbordamiento 、desbordamiento-x、desbordamiento-y）
display: Ninguno oculta el objeto. A diferencia del valor oculto del atributo de visibilidad, no reserva el espacio físico para el objeto oculto y inlineespecifica el objeto como un elemento en línea. blockEl objeto especificado es un elemento de bloque. list-itemEl objeto especificado es un elemento de lista. inline-blockEl objeto especificado es un elemento de bloque en línea. (CSS2) tableEspecifique el objeto como una tabla a nivel de elemento de bloque. De manera similar a las etiquetas html <table>(CSS2), inline-tableespecifique el objeto como una tabla de nivel de elemento en línea. Al igual que las etiquetas html <table>(CSS2), table-captionespecifique el objeto como título de la tabla. Similar a las etiquetas html <caption>(CSS2), table-cellespecifican el objeto como una celda de tabla. Similar a las etiquetas html <td>(CSS2), table-rowespecifican el objeto como una fila de tabla. Similar a las etiquetas html <tr>(CSS2), table-row-groupespecifique objetos como grupos de filas de la tabla. Similar a las etiquetas html <tbody>(CSS2), table-columnespecifican objetos como columnas de tabla. De manera similar a las etiquetas html <col>(CSS2), el table-column-groupobjeto especificado se muestra como un grupo de columnas de tabla. De manera similar a las etiquetas html <colgroup>(CSS2), table-header-groupespecifique el objeto como grupo de título de la tabla. De manera similar a las etiquetas html <thead>(CSS2), table-footer-groupespecifique objetos como grupos de notas al pie de la tabla. Similar a las etiquetas html <tfoot>(CSS2) que compactasignan objetos a objetos de bloque u objetos en línea basados en contenido (CSS3) que run-inasignan objetos a objetos de bloque u objetos en línea basados en contenido (CSS3) que rubymuestran objetos como grupos de notas al pie de tabla ( CSS3) ruby-baseMostrar objetos como grupos de notas al pie de la tabla (CSS3)ruby-textMostrar objetos como grupos de notas al pie de tabla (CSS3) Mostrar ruby-base-groupobjetos como grupos de notas al pie de tabla (CSS3) Mostrar ruby-text-groupobjetos como grupos de notas al pie de tabla (CSS3) cuadro Mostrar
objetos como modelos de cuadro flexible (CSS3) -webkit-box; -moz-box ; -o-box; -ms-box; inline-box muestra el objeto como un modelo de caja flexible a nivel de bloque en línea (CSS3)
clip: rect (0 auto 35px 10px) no corta el borde superior, no corta el borde derecho, y el borde inferior se recorta desde el píxel 35 hasta la parte inferior, y el borde izquierdo se recorta 10
desbordamiento: visible no corta el contenido, y el contenido hiddenque excede el tamaño del objeto se recortará y la barra de desplazamiento no aparecerá. scrollEl contenido que excede el tamaño del objeto se recorta y el exceso de contenido se muestra en una barra de desplazamiento. autoCorte el contenido y agregue barras de desplazamiento cuando sea necesario. Este es el valor predeterminado para el objeto del cuerpo y el área de texto.
Sección 3: Modelo de caja flexible (disposición de subelementos de orientación de caja, alineación de subelemento de caja-paquete, alineación de subelemento de alineación de caja, subelementos de caja-flex cómo asignar el espacio restante de la caja restante, caja-flex-grupo El grupo del elemento secundario, el orden de visualización de los elementos secundarios box-ordinal-group, si se invierte el orden de los elementos secundarios de la dirección de la caja, si los elementos secundarios de las líneas de caja se pueden mostrar en una nueva línea) Para que sea efectivo, el elemento principal debe mostrarse como caja o sí cuadro en línea; preste atención al navegador
box-orient define la disposición de dirección de los elementos dentro de la cajahorizontal (de izquierda a derecha en la línea horizontal) vertical(de arriba a abajo en la línea vertical) inline-axis(disposición horizontal), block-axis(disposición vertical), inherit(heredando el elemento principal)
box-pack: start establece que los elementos secundarios del objeto modelo flexbox se alinearán desde la posición inicial (en su mayoría equivalente a la alineación izquierda) centerestablece que los elementos secundarios del objeto modelo flexbox se alinearán en el centro, endestablece que los elementos secundarios del objeto modelo flexbox se alinearán desde la posición final (grande Parte de la situación es equivalente a alinear a la derecha) justifyconfigurar o alinear los elementos secundarios del objeto del modelo flexbox
box-align: start establece los elementos secundarios del objeto del modelo flexbox para que se alineen desde la posición inicial, centerestablece el elemento secundario del objeto del modelo flexbox para que se alinee en el centro, endestablece el elemento secundario del objeto del modelo flexbox para que se alinee desde la posición final, baselineestablece la stretchconfiguración de alineación de la línea de base del elemento secundario del objeto del modelo flexbox El elemento secundario del objeto modelo flexbox se adapta al tamaño del elemento principal
box-flex: 0 Deja que los elementos secundarios se dividan según el ancho del elemento principal. Divide un contenedor en 6 partes, el objeto secundario a se divide en 1 parte, b se divide en 2 partes y c se divide en 3 partes (el espacio restante se asigna dinámicamente)
box-flex-group: 1 Asigne dinámicamente el espacio real requerido para su contenido al grupo con el número más grande (si no hay contenido, paddin, border, no ocupa espacio), y el espacio restante se asigna uniformemente al grupo con el número más pequeño (posiblemente Hay 1 o más elementos)
box-ordinal-group: 1 Ajusta el orden de las tres columnas, cuanto mayor es el número, menor es el elemento. El elemento con el valor más bajo se muestra delante del elemento con el valor más alto. El orden de visualización de los elementos con el mismo valor depende de su orden de código
dirección de caja: normal determina el orden de disposición de los elementos internos
normal, inverso (voltear), heredar Establecer los subelementos del objeto modelo flexbox para que se organicen en orden normal reverseInvertir el orden de disposición de los subelementos del objeto modelo flexbox
box-lines: Los elementos secundarios del objeto modelo flexbox único solo se muestran en una línea. multipleLos elementos secundarios del objeto modelo flexbox se muestran en una nueva línea cuando exceden el espacio del elemento principal.
第四节 ： 尺寸 （ancho 、 ancho mínimo 、 ancho máximo 、 alto 、 altura mínima 、 altura máxima）
第五节 ： 外 补 白 （margen 、 margen superior 、 margen derecho 、 margen inferior 、 margen izquierdo ）
第六节 ： 内 补 白 （padding 、 padding-top 、 padding-right 、 padding-bottom 、 padding-left）
第七节 ： 边框 （border 、 border-width 、 border-style 、 border-color 、 border-top 、 borde-ancho-superior 、 borde-estilo-superior 、 borde-color-superior 、 borde-derecho 、 borde-ancho-derecho 、 borde-estilo-derecho 、 borde-color-derecho 、 borde-inferior 、 borde-ancho-inferior 、 border-bottom-style 、 border-bottom-color 、 border-left 、 border-left-width 、 border-left-style 、 border-left-color 、border-image 、 border-radius 、 border-top-left-radius 、 border-top-right-radius 、 border-bottom-left-radio 、 border-bottom-right-radio 、 box-shadow 阴影 、 box-reflect 倒影）
border-image：border-image-sourceborder-image-slice / border-image-width / border-image-outset / border-image-repeat
ninguno: sin imagen de fondo. <url>Especifique la imagen utilizando direcciones absolutas o relativas. <number>Especifique el ancho con un número de punto flotante. No se permiten valores negativos. <percentage>Especifique el ancho en porcentaje. No se permiten valores negativos. <length>Especifique el ancho con el valor de la longitud. No se permiten valores negativos.
estirar: especifique un método de estirar para rellenar la imagen de fondo del marco.
repetir: especifique que se rellene la imagen de fondo del borde con mosaico. Cuando la imagen golpea el borde, si supera, se cortará.
redondo: especifica que se rellene la imagen de fondo del marco con mosaico. La imagen ajustará dinámicamente el tamaño de la imagen de acuerdo con el tamaño del marco hasta que pueda llenar todo el marco.
border-image:url(skin/border.png) 27/27px;box-shadow
none: el <length>①primer valor de longitud de ninguna sombra se utiliza para establecer el valor de desplazamiento horizontal de la sombra del objeto. Puede ser un valor negativo y <length>②el segundo valor de longitud se utiliza para establecer el valor de desplazamiento vertical de la sombra del objeto. Puede ser un valor negativo. <length>③Si se proporciona un tercer valor de longitud, se utiliza para establecer el valor de desenfoque de la sombra del objeto. No se permiten valores negativos. <length>④Si se proporciona el cuarto valor de longitud, se utiliza para establecer el valor de extensión de sombra del objeto. Los valores negativos no pueden <color>establecer el color de la sombra del objeto.
recuadro: establece el tipo de sombra del objeto en sombra interior. Cuando el valor está vacío, el tipo de sombra del objeto es sombra exteriorbox-shadow:5px 5px 5px 10px rgba(0,0,0,.6);
box-reflect：none | <direction> | <offset> | <mask-box-image>`
`<direction> = above | below | left | right`
`<offset> = <length> | <percentage>`
`<mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> |<repeating-radial-gradient>`
默认值：none无倒影
`box-reflect:below 0 linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));Sección 8: Fondo (fondo, color de fondo, imagen de fondo, repetición de fondo, imagen de fondo adjunta de fondo desplazada o fija, posición de fondo, origen de fondo, clip de fondo, tamaño de fondo, mezcla de varios fondos Atributos )
background-image:-moz-linear-gradient(top , #45B5DA, #0382AD);渐变背景`
`background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#45B5DA), to(#0382AD));渐变背景`
`background-image:-o-linear-gradient(top , #45B5DA, #0382AD);渐变背景`
`background-image:url(skin/p_103x196_1.jpg),url(skin/p_103x196_2.jpg),url(skin/p_103x196_3.jpg);多重背景`
`background：linear-gradient（top，#000，#999）。从上到下、从黑色到灰色水平方向渐变`
`background：linear-gradient（left，#000，#999）。起始于左边、从黑色到灰色垂直方向渐变`
`background：linear-gradient（left，30deg，#000，#999）。起始于左边，倾斜30度、从黑色到灰色水平渐变`
`background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);第九节 ： 颜色 （color 、 opacidad）
第十节 ： 字体 （fuente 、 estilo de fuente 、 peso de fuente 、 tamaño de fuente 、 familia de fuente 、 estiramiento de fuente）
第十一 节 ： 文本 （sangría de texto 、 texto -desbordamiento 、 alineación de texto 、 transformación de texto 、 decración de texto 、 línea de decoración de texto 、 color de decoración de texto 、 estilo de decoración de texto 、 sombra de texto 、 color de relleno de texto 、 trazo de texto 、 trazo de texto -ancho 、 color de trazo de texto 、 espaciado de letras spa espaciado de palabras 、 alineación vertical 、 ajuste de palabras 、 espacio en blanco 、 dirección 、 bidi unicode 、 altura de línea 、 tamaño de tabulación）
clip de desbordamiento de texto : cuando el texto del objeto se desborda, la marca de omisión (...) no se muestra, pero la parte desbordada se corta.
puntos suspensivos: muestra puntos suspensivos (...) cuando el texto del objeto se desborda.
text-transform
none: sin conversión
capitalizar: convertir la primera letra de cada palabra a
mayúscula mayúscula: convertir a mayúsculas
minúsculas: convertir a minúsculas
ancho
completo : tamaño completo-kana:
espacio en blanco
normal: el método de procesamiento predeterminado.
pre: muestra el texto preformateado en una fuente monoespaciada, sin fusionar la distancia en blanco entre el texto, y no envuelve el texto cuando excede el límite. Puede consultar el objeto previo
nowrap: Force para mostrar todo el texto en la misma línea hasta el final del texto o encontrar el objeto br.
pre-wrap: muestra el texto preformateado en una fuente monoespaciada, sin fusionar la distancia en blanco entre el texto, y ajusta el texto cuando toca el borde.
prelínea: mantenga el salto de línea del texto, no mantenga la distancia en blanco entre el texto, el salto de línea se produce cuando el texto llega al límite.
direction
ltr: el texto fluye de izquierda a derecha.
rtl: flujo de texto de derecha a izquierda
unicode-bidi
normal: el objeto no abre la capa de incrustación adicional. Para los elementos en línea, el reordenamiento implícito funciona a través de los límites del objeto.
incrustación: el objeto abre la capa de incrustación adicional, el valor del atributo de dirección especifica la capa de incrustación y se realiza un reordenamiento implícito dentro del objeto.
bidi-override reordena
estrictamente según el valor del atributo de dirección. Ignore las reglas implícitas de operación bidireccional.
Se utiliza para mostrar el texto leído desde diferentes direcciones en la misma página. Usar con el atributo de dirección
Si desea aplicar el atributo de dirección al texto del elemento en línea, debe configurar el atributo unicode-bidi para incrustar o bidi-override.
Sección 12: Lista (estilo-lista, imagen-estilo-lista, posición-estilo-lista, tipo-estilo-lista)
disco tipo lista : círculo sólido (CSS1)
círculo: círculo hueco (CSS1)
cuadrado: cuadrado sólido (CSS1)
decimal: números arábigos (CSS1)
inferior-romano: minúsculas números romanos (CSS1)
superior-romano: mayúsculas y números romanos (CSS1)
letras minúsculas en inglés (CSS1)
mayúsculas: letras mayúsculas en inglés (CSS1)
ninguna: sin viñetas (CSS1)
armenio: números armenios tradicionales (CSS2)
cjk-ideographic: números ideográficos pálidos (CSS2)
georgiano: números tradicionales de George (CSS2)
griego minúsculo: letras minúsculas griegas básicas (CSS2)
hebreo: números hebreos tradicionales (CSS2)
hiragana: caracteres hiragana japoneses (CSS2) hiragana
-iroha: plano japonés Número de serie de Kana (CSS2)
katakana: caracteres katakana japoneses (CSS2)
katakana-iroha: número de serie katakana japonés (CSS2)
latín minúsculo: letras latinas minúsculas (CSS2)
latín mayúscula: letras latinas mayúsculas (CSS2)
Sección 13: Tablas (diseño de tabla, colapso de borde, espaciado de borde, lado del título, celdas vacías)
Sección 14: Contenido (contenido, incremento de contador, reinicio de contador, comillas)
contenido
normal: el valor predeterminado. El comportamiento es el mismo que el
valor de none none: no se genera ningún valor. <attr>Inserte el atributo de etiqueta
value.attr p: after {content: attr (title);} <url>Use la dirección absoluta o relativa especificada para insertar un recurso externo (imagen, audio, video o cualquier otro recurso compatible con el navegador)
.url p: before { content: url (… /… / skin / ico.png);} <string>inserte la cadena
contador (nombre): use el contador nombrado.
contador1 li: antes de {contenido: contador (nombre de prueba);}
contador (nombre, estilo de lista -type): usa el contador nombrado y sigue el atributo de tipo de estilo de lista especificado.
counter2 li: before {content: counter (testname2, lower-roman);}
contadores (nombre, cadena): usa todos los contadores nombrados
.counter3 li {counter-increment: testname3;}
.counter3 li: before {content: counter (testname3, decimal) ".";}
contadores (nombre, cadena, tipo de estilo de lista): use todos los contadores con nombre y Siga el atributo list-style-type especificado
no-close-quote: No inserte el matasellos del atributo quote. Pero aumenta su nivel de anidación
.counter3 li li: before {content: counter (testname3, decimal) "." counter (testname4, decimal) ".";}
no-open-quote: No inserte la marca del principio del atributo de comillas. Pero reduzca su nivel de anidamiento
close-quote: inserte la etiqueta posterior del
atributo quote open-quote: inserte la etiqueta frontal del atributo quote
counter-incremento: none |[<identifier> <integer>]
第十五 节 ： 用户 interfaz de usuario （contorno 、 ancho de contorno 、 estilo de contorno 、 color de contorno 、 desplazamiento de contorno 、 índice de navegación 、 navegación arriba 、 navegación derecha 、 navegación abajo 、 navegación izquierda 、 cursor 、 zoom 、 Tamaño de caja 、 cambio de tamaño 、 modo ime）
outlineDefina el contorno alrededor del elemento, similar al
ancho del contorno del borde: especifique el ancho del borde del contorno.
contorno-estilo: especifique el estilo del borde del contorno.
contorno-color: especifique el color del borde del contorno. outline:2px solid #f00;border:3px solid #333;
El ancho del contorno<length> utiliza el valor de longitud para definir el grosor del contorno. No se permite
medio de valor negativo : defina el contorno del ancho predeterminado.
delgado: define un contorno más delgado que el ancho predeterminado.
grueso: define un contorno más grueso que el ancho predeterminado.
estilo de contorno
ninguno: sin contorno. Independiente de cualquier valor especificado de ancho de contorno
punteado: contorno punteado.
discontinua: contorno discontinuo.
sólido: contorno de línea continua
doble: contorno de línea doble. La suma de las dos líneas individuales y sus intervalos es igual al valor de ancho de contorno especificado
groove: contorno de groove 3D.
cresta: perfil de surco convexo 3D.
recuadro: contorno de borde cóncavo 3D.
inicio: contorno de borde convexo 3D.outline-offset：4px；
cursor [<url> [<x> <y>] [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll]
resize
none: los usuarios no pueden cambiar el tamaño del elemento.
Ambos: el usuario puede ajustar el ancho y el alto del elemento.
horizontal: el usuario puede ajustar el ancho del elemento
vertical: el usuario puede ajustar la altura del elemento.
none: los usuarios no pueden ajustar el tamaño del elemento.
Ambos: el usuario puede ajustar el ancho y el alto del elemento.
horizontal: el usuario puede ajustar el ancho del elemento
vertical: el usuario puede ajustar la altura del elemento.
第十六 节 ： 多 栏 columnas múltiples （columnas 、 ancho de columna 、 recuento de columnas 、 espacio de columna 、 regla de columna 、 estilo de regla de columna 、 color de regla de columna 、 extensión de columna 、 relleno de columna 、 columna -break-before 、 column-break-after 、 column-break-inside）
columns:200px 3;
columns:200px;
column-count:3;column-gap:40px;
Sección 17: Transformación 2D (transformación, transformación-origen)
translatemóvil. Traslade (X (distancia desde la posición izquierda), Y (distancia desde la posición superior)). El desplazamiento toma el origen del eje de coordenadas como centro y el valor positivo se mueve a la esquina inferior derecha.
1 rotación. transfrom: rotar (10 grados). Cuántos grados rotar el plano
2 Tracción oblicua. sesgo (X, Y). Cuánto inclinar el
zoom 3. escala (X, Y). Cuántas veces acercar o alejar
4 movimientos. traducir (X, Y)
transfrom：rotate（30deg）。
transfrom：scale（X，Y）。
transfrom：skew（X，Y）。
transfrom：translate（X，Y）。
1234Todos los métodos de conversión 2D están conectados entre sí matrix(). Transformación rectangular para matrix();
cambiar la posición del punto de partida:transfrom-origin：bottom left
eg：transfrom：scale（1.5）。
对应的matrix是 transfrom：matrix（1.5，0，0，1.5，0，0）；
matrix（scaleX，0，0，scaleY，0，0）
1234Profundizar en matrix
matrix () y matrix3d (), el primero es una transformación de movimiento de plano 2D, 3 3. La última es la transformación 3D, 4 4.
transfrom: matriz (a, b, c, d, e, f)
correspondiente a la matriz como se muestra en la figura siguiente. 
La primera se multiplica por la primera, la segunda se multiplica por la segunda y la tercera se multiplica por la tercera 
ax + cy + e es la coordenada horizontal. bx + dy + f es la coordenada vertical.
transfrom: matriz (1, 0, 0, 1, 30, 30) // a = 1, b = 0, c = 0, d = 1, e = 30, f = 30.
Suponga que las coordenadas del centro son (0, 0). Las
coordenadas x son ax + cy + e = 1 0 + 0 0 +30 = 30.
La coordenada y es bx + dy + f = 0 0 + 1 0 + 30 = 30.
Las coordenadas centrales se cambian a (30, 30) y se desplazan a la esquina inferior derecha, transfrom: translate (30px, 30px)
por lo que la matriz solo necesita preocuparse por los dos últimos parámetros para
hacer zoom: transfrom: matrix (1, 0, 0, 1, 30 , 30) donde 1 es el parámetro de escala, por lo que se escribe como transfrom: matrix (scalex, 0,0, scaley, 30,30)
Sección 18: Transición
transición-propiedad: nombre de propiedad CSS del efecto de transición. ninguno, todos, sangría
transición-duración: duración de la transición.
función de temporización de transición: curva de velocidad de transición. Primero plano o lento y luego rápido.
retraso de transición: retraso de transición.
Sección 19: Animación (función de temporización de animación)
animation-name：`动画名称。
`animation-delay：`动画延迟。
`animation-duration：`动画运动周期时长。
`animation-timing-function：`动画速度曲线。linear（速度一致）、ease（低速开始，然后加快，结束慢）、ease-in（低速开始）、ease-out（低速结束）、ease-in-out（低速开始和结束）、cubic-bezier（自己的值，从0到1）
`animation-iteration-count：`动画播放次数。0、infinite。
`animation-direction：`动画是否在下一个周期逆向播放。normal、alternate。
`animation-play-state：`动画是否正在运行或暂停。
`animation-fill-mode简写 ： animación ： nombre duración temporización-función retardo
@keyframes animationName{
from{ ...... }
to{ ...... }
}
@keyframes animationName{
0%{ ...... }
50%{ ...... }
100%{ ...... }
}