1. Prefacio e índice
Diseño de varias columnas, también conocido como diseño de varias columnas, diseño de varias columnas, me gusta llamarlo diseño de columna, este diseño puede hablar sobre el diseño de contenido en un conjunto de cuadros de columna, similar a la composición tipográfica en los periódicos.
El diseño de columna es muy especial, diferente del método de diseño tradicional, divide todo el contenido, incluidos todos los subelementos, en columnas, que es similar a la forma en que el contenido de la página se divide en diferentes páginas cuando imprimimos una página web.
Se puede usar el diseño de columna IE10 +, la API es estable, la compatibilidad móvil es mejor que el diseño flexible, aunque la intención del diseño original es diferente, se pueden realizar muchos diseños. Incluso en algunos escenarios, solo se puede lograr mediante el diseño de columnas. Es necesario aprender.
Las propiedades CSS relacionadas con el diseño de columnas incluyen:
| Atributos directamente relacionados | Atributos indirectamente relacionados |
|---|---|
En segundo lugar, directamente relacionado con las propiedades CSS
1. ancho de columna
column-widthIndica el ancho óptimo de cada columna / fila.
Si solo lo configuramos column-width, el navegador dividirá automáticamente el número de columnas de acuerdo con el ancho del contenedor existente.
La sintaxis es la siguiente:
column-width: <length> | auto;
entre ellos:
<longitud>
Indica el valor de ancho de columna óptimo establecido. El ancho real de cada columna puede ser diferente del valor especificado. Para obtener más detalles, consulte la descripción detallada a continuación.
auto
Defaults. Indica que el ancho de cada columna está determinado por otras propiedades CSS, por ejemplo column-count.
Algunos detalles:
column-widthA veces no será válido. Por ejemplo, el ancho del contenedor es de 400 píxeles y el ancho establecido de cada columna es de 300 píxeles, lo que no es suficiente para dividir la columna. En este momento, se muestra que el llenado de contenido hace un uso completo del espacio disponible, y el ancho de la columna es finalmente más ancho que el ajuste. Por otro ejemplo, si el ancho del contenedor es de 400 píxeles, si secolumn-widthestablece en 500 píxeles, el ancho de la columna final no excederá el ancho del contenedor, que es menor que los 500 píxeles establecidos.column-widthNo se admiten valores negativos ni valores porcentuales.
Demostración de campo:
Haga clic en las siguientes pestañas para experimentar column-widthel rendimiento del diseño con diferentes valores de atributo:
column-width: autocolumn-width: 8% （无效） column-width: 80pxcolumn-width: 8em
La column-widthpropiedad CSS especifica el ancho de columna ideal en un diseño de varias columnas. El contenedor tendrá tantas columnas como sea posible y el ancho de cualquier columna no será menor que el valor del ancho de la columna. Si el ancho del contenedor es menor que el valor especificado, el ancho de una sola columna será menor que el ancho de columna declarado.
Esta propiedad puede ayudarlo a crear diseños receptivos que se adapten a diferentes tamaños de pantalla. Especialmente en presencia de column-countatributos (con prioridad), todos los valores de longitud relevantes deben especificarse para obtener anchos de columna precisos. En el texto horizontal, la longitud de estos valores incluyen width, column-width, column-gap, y column-rule-width.
2. recuento de columnas
column-countIndica el número ideal de columnas.
La sintaxis es la siguiente:
recuento de columnas: <integer> | auto;
entre ellos:
<integer>
Indica el número de columnas, un valor entero.
auto
Defaults. Indica que el número de columnas está determinado por otras propiedades CSS, por ejemplo column-width.
Algunos detalles:
column-countYcolumn-widthes probable que tengan una mayor prioridad, depende de la escena específica. El truco para el cálculo de la prioridad es unificar elcolumn-countvalor de conversión y usar el que sea menor.column-countLos valores negativos no se admiten ni se admiten0.
Demostración de campo:
Haga clic en las siguientes pestañas para experimentar column-countel rendimiento del diseño con diferentes valores de atributo:
recuento de columnas: recuento de columnas automático: 2 recuento de columnas: 2;
column-width: 200pxcolumn-count: 4;
ancho de columna: 200px
Se recomienda probar el efecto de conmutación de esta pestaña en el navegador de la PC. En el terminal móvil, la diferencia entre las dos últimas opciones no se puede sentir debido a la limitación de ancho.
En la PC de escritorio, el contenedor de 700 píxeles de ancho de aproximadamente un poco antes, esta vez column-width:200pxen términos de column-countaproximadamente 3.6. Por lo tanto, la pestaña 3 se divide en 2 columnas porque el column-count:2valor es más pequeño; y la pestaña 4 tiene una prioridad más alta debido al column-widthvalor de conversión más pequeño, column-widthy finalmente se divide en 3 columnas para su visualización.
Entre ellos, nos centramos en la pestaña 3 y la pestaña 4. En el operador de PC, dado que el ancho del contenedor es de aproximadamente 700 píxeles, el punto inicial, y por column-width:200pxlo tanto , puede considerarse aproximadamente column-countcomo 3.6. Recuerde el truco de cálculo de prioridad mencionado anteriormente: qué valor es menor y cuál prioridad es mayor. Por lo tanto, la pestaña 3 se divide en 2 columnas porque el column-count:2valor es más pequeño; y la pestaña 4 tiene una prioridad más alta debido al column-widthvalor de conversión más pequeño, column-widthy finalmente se divide en 3 columnas para su visualización.
Además, se puede ver por el efecto de las dos columnas que la altura de cada columna en las columnas no siempre es la misma, y el contenido no siempre se divide uniformemente El navegador tiene su propio algoritmo.
3. columnas
columnsEs una abreviatura para column-widthy column-countatributo. Dé algunos ejemplos de uso:
/ * Ancho de columna * / columnas: 18em; / * Número de columnas * / columnas: automático; columnas: 2; / * Definir ancho y número al mismo tiempo * / columnas: 2 automático; columnas: automático 12em; columnas: automático auto;
No se expande.
4. color-regla-columna
column-rule-colorIndica el color de la línea divisoria en cada columna.
La sintaxis es la siguiente:
color-regla-columna: <color>
Los valores de los atributos admitidos border-colorson exactamente los mismos, por ejemplo:
color-regla-columna: rojo; color-regla-columna: rgb (255, 0, 0); color-regla-columna: transparente; color-regla-columna: hsla (0, 100%, 50%, 0.5);
El valor predeterminado es colorel valor calculado del atributo actual .
Los ejemplos son los siguientes:
estilo de regla de columna: punteado; color-regla-columna: rojo;
Los efectos en tiempo real son los siguientes:
Dado que el column-ruletipo de divisor predeterminado es none, por lo tanto, debemos especificarlo column-rule-style, de lo contrario, el divisor no se verá. column-rule-*Los valores de los atributos relevantes border-*son los mismos.
5. estilo de regla de columna
column-rule-styleIndica el tipo de línea divisoria en el medio de cada columna. Los valores de los atributos admitidos border-styleson exactamente los mismos, por ejemplo:
estilo de regla de columna: ninguno; estilo de regla de columna: oculto; estilo de regla de columna: punteado; estilo de regla de columna: discontinuo; estilo de regla de columna: sólido; estilo de regla de columna: doble; estilo de regla de columna: ranura; estilo de regla de columna: cresta; estilo de regla de columna: recuadro; estilo de regla de columna: comienzo;
Los efectos específicos de cada valor de atributo se pueden experimentar haciendo clic en las siguientes pestañas:
ningunoescondidodotteddashedsoliddoblegrooveridgeinsetoutset
Entre ellos se encuentran los dottedpuntos punteados, dashedlas líneas punteadas y solidlas líneas continuas. Estos tres se usan más comúnmente, por lo que no los ampliaré. Luego, concéntrese en los siguientes. Primero double, doublesignifica el
borde de doble línea. Como sugiere el nombre, hay dos líneas y son líneas continuas. Aunque solemos usar menos, la compatibilidad es muy buena. El rendimiento visual es wireframe-transparente-wireframe. Otros column-rule-styletipos, como inset(cóncavo), outset(convexo), groove(surco), ridge(reborde), son anticuados y tienen una compatibilidad terrible, por lo que no tienen ningún valor práctico, por lo que no es necesario que te preocupes.
La investigación científica muestra que para la mayoría de las personas, no importa qué texto esté escrito aquí, los lectores no lo notarán.
5. column-rule-width
column-rule-widthIndica el ancho de la línea divisoria en el medio de cada columna. Los valores de los atributos admitidos border-widthson exactamente los mismos, por ejemplo:
/ * Valor de palabra clave * / column-rule-width: thin; column-rule-width: medium; / * Valor predeterminado * / column-rule-width: thick; / * Valor de longitud específico * / column-rule-width: 1px ; ancho de regla de columna: 2.5em;
Por lo general, usamos column-rule-widthcasi todos los valores fijos, por ejemplo column-rule-width:1px, y así sucesivamente, por lo que no sabemos mucho sobre los valores de atributo de palabras clave. Aquí hay una introducción. column-rule-widthAdmite tres valores de atributos de palabras clave, respectivamente thin, medium(valor predeterminado) y thicklos tamaños específicos correspondientes son los siguientes:
thin: Delgado, equivalente a1px;medium(Valor predeterminado): el espesor es uniforme, equivalente a3px;thick: Grueso, equivalente a5px;
Me pregunto si alguna vez ha pensado en una pregunta así: ¿por qué el tamaño de ancho predeterminado mediumes 3px, obviamente el ancho delgado (1px) se usa más comúnmente? Esto se debe a que ... ¡ column-rule-style:doubleal menos 3px es efectivo!
6. regla de columna
column-ruleSí column-rule-width, column-rule-styley column-rule-colorla abreviatura de estas 3 propiedades CSS. Tal como borderestá border-style, la abreviatura de border-widthy es border-colorla misma.
No hay nada más que decir, el orden de varios valores de atributo no es particular, solo casual. Excepto column-rule-styleque los otros dos atributos pueden ser predeterminados.
7. intervalo de columnas
column-spanUn poco similar a colspaneste atributo HTML en el diseño de la tabla , que indica si un determinado contenido se muestra en varias columnas.
gramática
intervalo de columnas: ninguno; intervalo de columnas: todos;
entre ellos:
ninguna
Significa no abarcar varias columnas, el valor predeterminado.
todas
Significa en todas las columnas verticales.
Echemos un vistazo a un ejemplo juntos para saber por qué se usa este atributo:
intervalo de columnas: ninguno intervalo de columnas: todos
En HTML, los <td>elementos de celda similares pueden establecer colspanatributos para indicar celdas combinadas, por ejemplo, colspan="3"indicar que 3 celdas ordinarias se fusionan en 1 celda grande.
column-spanEsta propiedad CSS funciona de manera similar, excepto que no se puede especificar un número específico. O no abarque las columnas, sino todas las columnas.
Este atributo se puede utilizar cuando queremos insertar un anuncio en toda la página de un artículo que se muestra en columnas verticales. O puede usar este atributo si solo desea mostrarlo en columnas verticales.
En el desarrollo real, si no especifica un elemento determinado column-span:all, no hay contenido de texto, solo una altura, o agrega un borde horizontal, puede dividir aún más el contenido del artículo hacia arriba y hacia abajo. Por tanto, el contenido de un artículo es como la maquetación de un periódico y puedes dividirlo en columnas donde quieras.
Por supuesto, este atributo también se puede utilizar para insertar anuncios publicitarios.
8. relleno de columna
column-fillLa función es cómo equilibrar el contenido llenado en cada columna cuando el contenido se divide en columnas.
gramática
relleno de columna: automático; relleno de columna: equilibrio; relleno de columna: equilibrar todo;
entre ellos:
auto
Llene cada columna en orden. El contenido solo ocupa el espacio que necesita.
equilibrar
Defaults. Intente equilibrar el contenido entre columnas tanto como sea posible. En el contexto de la separación, solo se equilibra el último segmento. Por ejemplo, si hay varios <p>elementos y el último solo se <p>ajusta, <p>el contenido de este elemento se divide en partes iguales para mantener el equilibrio. Esto resultará en menos contenido en la última columna.
balancear todo (se puede ignorar)
Intente equilibrar el contenido entre columnas tanto como sea posible. En el contexto de la separación, todos los fragmentos están equilibrados.
Echemos un vistazo a una column-filldemostración relacionada con los atributos (actualmente solo el navegador Firefox tiene el rendimiento correcto):
relleno de columna: relleno de columna automático: equilibrio relleno de columna: equilibrio-todo
Este es un grupo de columnas de texto divididas en múltiples. La propiedad CSS `column-fill` se utiliza para distribuir uniformemente el contenido en todas las columnas.
column-fillLa representación precisa de este atributo solo se puede ver en el navegador Firefox. Cuando hacemos clic auto, todo el contenido del texto debe comprimirse en la columna de la izquierda para que sea correcto. Pero Chrome e IE se balancecomportan igual que el valor del atributo.
Cuando hacemos clic en 'auto'esta pestaña en la demostración anterior , el rendimiento correcto debería ser el que se muestra en la siguiente figura:
Para column-fill:autotener el efecto en todos los navegadores , debe establecer un valor de altura fijo para el elemento contenedor.
Además, de acuerdo con mis pruebas con los navegadores IE, Chrome y Firefox, los clics de estos navegadores balance-allno se reconocen. Revisé el borrador del documento oficial y no había ninguna balance-allindicación de que este valor de atributo se pueda ignorar.
9. espacio entre columnas
column-gapIndica el tamaño del espacio en blanco entre cada columna.
gramática
espacio entre columnas: normal | <porcentaje de longitud>;
específico
/ * Valor de la palabra clave * / column-gap: normal; / * Valor de longitud * / column-gap: 3px; column-gap: 3em; / * Valor de porcentaje * / column-gap: 3%;
entre ellos:
normal
Defaults. En diseños de varias columnas 1em, en otros tipos de diseños 0.
<longitud>
El valor de longitud específico. No se admiten números negativos.
<porcentaje>
Valor porcentual. Y column-width, a diferencia, column-gapadmite valores porcentuales. Asimismo, no puede ser un número negativo.
Demostración de campo
espacio entre columnas: normal espacio entre columnas: 8% espacio entre columnas: 80 píxeles espacio entre columnas: 8em
Aunque el rendimiento final column-gapdel valor predeterminado del atributo normales 1em, no significa que pueda tener un transitionefecto de transición con el valor del atributo numérico . Por lo tanto, cuando hacemos clic en la primera pestaña, el cambio de ancho es repentino, en lugar de continuo.
column-gapCuando columnshay un conflicto con el atributo, por ejemplo, es column-gapdemasiado grande, lo que resulta en espacio insuficiente, en este caso column-gapse descartará.
Tres propiedades CSS relacionadas indirectamente
Cada posible punto de interrupción (en otras palabras, el límite de cada elemento) se ve afectado por tres propiedades: el break-aftervalor del elemento anterior, el valor del siguiente elemento break-beforey el valor del elemento contenedor break-inside.
Los tres atributos que se introducirán a continuación pueden controlar si el elemento actual en el diseño de columna puede dividirse en columnas.
1. descanso
break-afterEsta propiedad CSS define cómo debe comportarse el salto de página, columna o área después del cuadro generado. Si no se genera ningún cuadro, este atributo se ignora.
break-afterHay muchos atributos compatibles, pero la mayoría de los navegadores no. Solo debemos prestar atención a los siguientes dos valores de atributo en este momento:
break-after: auto; break-after: evitar;
entre ellos:
auto
Está permitido, pero no es obligatorio, insertar saltos después del marco principal (en el diseño de página, columna o región).
evitar
Evite insertar separadores (bajo el diseño de página, columna o región) después del marco principal.
2. romper antes
break-beforeEsta propiedad CSS define cómo debe comportarse el salto de página, columna o área antes del cuadro generado. Si no se genera ningún cuadro, este atributo se ignora.
break-beforeHay muchos atributos compatibles, pero la mayoría de los navegadores no. Solo debemos prestar atención a los siguientes dos valores de atributo en este momento:
romper antes: auto; romper antes: evitar;
entre ellos:
auto
Está permitido, pero no es obligatorio, insertar cualquier interrupción antes del marco principal (en el diseño de página, columna o región).
evitar
Evite insertar cualquier separador antes del marco principal (debajo del diseño de página, columna o región).
3. intrusión
break-insideEsta propiedad CSS define cómo debe comportarse un elemento cuando se interrumpe una página, columna o área. Si no hay interrupción, este atributo se ignora.
break-insideHay relativamente pocos atributos admitidos. Del mismo modo, solo debemos prestar atención a los dos valores de atributo siguientes en este momento:
break-inside: auto; intrusión: evitar;
entre ellos:
auto
Los elementos se pueden interrumpir.
evitar
El elemento no se puede interrumpir.
página de ejemplo de demostración
Tome el diseño de la columna como ejemplo. El diseño de la columna hace un buen trabajo al fluir y equilibrar el contenido. Desafortunadamente, no todos los elementos pueden fluir con gracia. A veces, los elementos se distribuirán en dos columnas. Como se muestra abajo:
A veces, esperamos que cada elemento de nuestra entrada sea independiente y no esté desconectado. En este momento, podemos usar la break-inside:avoidimplementación:
.list {
-webkit-column-break-inside: evitar; / * Chrome, Safari, Opera * /
page-break-inside: evitar; / * Firefox * /
break-inside: evitar; / * IE 10+, Chrome, Safari, Opera * /
}
En este momento, el efecto es el siguiente:
Puede hacer clic aquí: Demostración de CSS break-inside
otro
Debería ser el mes pasado, también introduje una box-decoration-breakpropiedad CSS llamada propiedad CSS, que también está relacionada con el diseño de las columnas, su función es más para el rendimiento decorativo después de desconectar el elemento. Si está interesado, consulte este artículo: " Introducción a la propiedad box-decoration-break de CSS / CSS3 ".
Cuatro, algunos ejemplos de aplicaciones de diseño especial
El diseño de varias columnas de columnas CSS3 puede realizar el efecto de lectura de volteo horizontal.
Para obtener más información, consulte este artículo: " Basado en el diseño de varias columnas de columnas CSS3 para lograr una interacción de cambio de página horizontal ".
El diseño de varias columnas de columnas CSS3 también se puede utilizar para lograr efectos de navegación de división igual, admite una y varias líneas, similar al efecto del diseño flexible, pero la compatibilidad es mejor que la flexibilidad. La extensión de este artículo ya es muy larga y escribiré un artículo sobre contenido relevante más adelante.
Otros artículos sobre temas similares
- Visualice usted mismo: tutorial de diseño flexible
- Una pantalla: tutorial de diseño de cuadrícula escrito para usted
Todo el que pueda leer esto es amor verdadero, ¡gracias, amor!