Diseño de varias columnas (varias columnas)
El diseño de varias columnas consiste en diseñar contenido de texto en un diseño de varias columnas como un periódico. En otras palabras, el flujo en cascada que antes podíamos lograr a través de js o JQuery se puede lograr directamente a través de CSS en CSS3, aunque existen problemas de compatibilidad. .
compatibilidad
IE10+, FireFox16+, Chrome26+, Safari6.1+, Opera12.1
Propiedades del diseño de varias columnas
CSS3 proporciona una serie de propiedades para implementar el diseño de varias columnas, como se muestra en la siguiente tabla:
1.columns establece el número de columnas del objeto y el ancho de cada columna
Establece o recupera el número de columnas del objeto y el ancho de cada columna.
gramática:
columnas:<'ancho-columna'>||<'recuento-columnas'>;
Descripción del parámetro:
(1) El primer parámetro se refiere al ancho de cada columna.
(2) El segundo parámetro se refiere al número de columnas. Puedes escribir dos o uno.
Los dos parámetros dan prioridad al número de columnas (en el caso de bajar). Si el ancho no es suficiente (número de columnas * ancho establecido > ancho del contenedor), automáticamente reducirá una columna y ampliará automáticamente el ancho del párrafo para alcanzar el ancho del contenedor. En el medio se genera automáticamente el espacio adecuado.
Ejemplo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Diseño de varias columnas</title><style>*{margin:0;padding:0;}div.test1,div.test2{border :20pxsolidrgba(0,0,0.3);}div.test1{width:900px;-webkit-columns:300px4;-moz-columns:300px4;columns:300px4;}div.test1>div{margin-top:20px; border:2pxsolidred;}div.test2{-webkit-columns:400px;-moz-columns:400px;columns:400px;}div.test2>div{margin-top:20px;border:2pxsolidred;}</style>< /head><body><div><div>Desde el posicionamiento inicial del invento de Dennis Ritchie, el inventor del lenguaje C, sabemos que va a ser un sistema, no un software gráfico en sí, y debe incluir controladores de desarrollo. , realice una serie de tareas centrales como el kernel del sistema, administración de archivos, administración interna, comunicación de red, etc. Por lo tanto, solo aprendiendo la sintaxis del lenguaje C, también debe aprender otros temas como los principios del sistema operativo, protocolos de comunicación, Principios del compilador y estructuras de datos. Complete los requisitos anteriores. </div><div>En este momento, cuando vea el manual de la placa base en inglés, sabrá qué interfaz debe leerse, cómo está estipulado el protocolo de comunicación, cuántos bytes deben leerse... y así sucesivamente, antes puedes escribir Solo se pueden escribir controladores y se pueden utilizar núcleos para la comunicación. Hasta este punto, incluso si la demanda de talentos corporativos en la sociedad es relativamente pequeña, no hay ningún problema de no poder encontrar trabajo. eliges un trabajo e incluso pagas por él, porque no solo puedes hacer esto, sino que muchas tareas relacionadas, como desarrollo de controladores, resolución de DNS, antivirus, seguridad de comunicaciones, tecnología de virtualización, poda de kernel, son todas competentes y puedes Incluso puede desarrollar un nuevo sistema operativo usted mismo. </div><div>Dicho esto, en nuestro entorno actual, la orientación de enseñanza del lenguaje C en la mayoría de las universidades es que, además de los cursos de lenguaje C, solo algunas universidades también deberían ofrecer estructura de datos, arquitectura informática, principios de compilación, cursos. como los principios del sistema operativo, y algunas escuelas solo conservan estructuras de datos en estos cursos, o incluso ya no ofrecen estructuras de datos. Por lo tanto, el lenguaje C solo se posiciona como iluminación en programación, y es suficiente estar familiarizado con el pensamiento orientado a procesos y C. sintaxis del lenguaje. </div><div>La escuela espera que después de aprender el lenguaje C, puedan aprender C ++ o Java u otros lenguajes de alto nivel para que puedan hacer cosas más prácticas y encontrar un trabajo fácilmente si tienen más ganas. Para tener éxito, simplemente pueden usar el lenguaje C. No más aprendizaje, simplemente aprenda Java o C ++ u otros lenguajes de alto nivel sin base. En realidad, esta es la diferencia entre una clase profesional y una institución de formación. Si no aprendes conocimientos en vano, deberías pensar más si es útil o no. </div></div><br><div><div>Entonces, a juzgar por el entorno general actual, si te estás especializando en informática/software en una universidad clave, entonces deberías trabajar duro en estos materiales reales. no desperdicie los recursos docentes del país, porque usted es responsable del futuro de la industria de software de TI del país, si desea dedicarse a la investigación y el desarrollo de software, al menos debe aprender bien la estructura de datos, porque tiene que crear; , no copiar. Si sólo quiere ganarse la vida, simplemente aprenda una técnica que pueda producir resultados. </div><div>Finalmente, echemos un vistazo a los propósitos comunes para que los estudiantes aprendan el lenguaje C, desde la universidad hasta la licenciatura, el examen de ingreso de posgrado y el lenguaje C de segundo nivel, los tutoriales orientados a la demanda se basan principalmente en. preguntas teóricas, preguntas de práctica y exámenes, por lo que el tipo de proyecto Hay recursos de lenguaje C mucho menos difíciles, por lo que, naturalmente, rara vez ves cosas gráficas. Por supuesto, como firme partidario del lenguaje C, Dotcpp también fortalecerá los recursos de programación aquí en el futuro para brindar a todos un soporte de recursos suficiente. </div><div>Cuando aprendemos el lenguaje C, debido a que elegimos programas de consola, sus programas se ejecutan en una ventana negra. Si escribe una aplicación de Windows, no habrá dicha ventana negra y la sintaxis del lenguaje C sí. Todavía se puede utilizar, todos pueden entender. </div><div>Si se trata de desarrollo gráfico en lenguaje C puro, dependiendo de su etapa, puede considerar utilizar la función de interfaz gráfica admitida por el compilador TurBoC o instalar la biblioteca easyX en VC6 para completar el desarrollo gráfico. de algunos juegos, como backgammon, Tetris, pinball, Snake, etc., que son todos gráficos e interactivos. Para los más avanzados, considerando la actualización de imágenes y la mejora profesional, puede considerar usar MFC o QT. </div></div></body></html>Resultados de ejecución:
Configure las columnas de div.test1: 300px 4; es decir, el ancho de cada columna es 300px y hay 4 columnas en total, pero el contenedor es de 900px, que es menos de 1200px, por lo que el número de columnas será automático. se reducirá y el ancho de la columna se incrementará adecuadamente para mostrarse de la manera más adecuada. Sin embargo, div.test2 no establece el ancho del contenedor, el ancho de la columna se establece en 300 px y el número de columnas se establece en 4 columnas. El número de columnas se limitará para optimizar el ancho de la columna.
Nota: Configure las columnas de div.test1: 300px 4; es decir, el ancho de cada columna es 300px y hay 4 columnas en total, pero el contenedor es de 900px, que es menos de 1200px, por lo que el número de columnas se reducirá automáticamente y el ancho de la columna se incrementará adecuadamente para lograr el método más apropiado para mostrar. Sin embargo, div.test2 no establece el ancho del contenedor, el ancho de la columna se establece en 300 px y el número de columnas se establece en 4 columnas. El número de columnas se limitará para optimizar el ancho de la columna.
2. ancho de columna establece el ancho de la columna
gramática:
ancho de columnas:<longitud>|valor predeterminado automático;
: Utilice el valor de longitud para definir el ancho de la columna, no se permiten valores negativos auto: personalice el ancho según el número de columnas.
Aunque el ancho de la columna está establecido, el ancho se asignará automáticamente según el número de columnas y el ancho del contenedor.
PD: el espacio en cada columna es de 14 píxeles.
3. column-count establece el número de columnas
Establece o recupera el número de columnas de un objeto.
gramática:
recuento de columnas:<entero>|auto;
Descripción del parámetro: Utilice valores enteros para definir el número de columnas, no se permiten valores negativos. Auto: personalice el ancho de asignación de acuerdo con el ancho de la columna.
4. column-gap establece el espacio entre columnas
Establece o recupera los espacios entre columnas de un objeto.
gramática:
espacio entre columnas：<longitud>|normal;
Descripción del parámetro: utilice el valor de longitud para definir el espacio entre columnas (no la distancia entre palabras, sino la distancia entre párrafos), no se permiten valores negativos normales: igual que el tamaño de fuente; El espaciado normal depende del tamaño de la fuente. Igual que el tamaño de fuente.
Ejemplo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Diseño de varias columnas</title><style>*{margin:0;padding:0;}div.test1,div.test2,div .test3{border:20pxsolidrgba(0,0,0.3);}div.test1>div,div.test2>div,div.test3>div{background-color:rgb(0,0,0,.3);margen -top:20px;}div.test1{ancho:900px;columnas:300px4;font-size:14px;}div.test2{columnas:400px;font-size:30px;}div.test3{column-count:4; column-gap:14px;}</style></head><body><h3>Fuente: 14px, sin espacio establecido: el valor predeterminado es el mismo que la fuente 14px;</h3><div><div>Muchas la gente ha aprendido el lenguaje C. Mis amigos definitivamente tendrán esta pregunta cuando vuelvan a mirar el lenguaje C. ¿Por qué el lenguaje C siempre se ejecuta en una ventana negra? ¿Un programa que calcula el área de un triángulo o imprime el número de narcisos? No importa cuán buena haya sido la programación, ¿por qué no podemos seguir haciendo ese software genial? Al final, ¡es simplemente infantil! Por qué. </div><div>Primero, el posicionamiento de la invención del lenguaje C, desde el inicio de su invención por Dennis Ritchie, el inventor del lenguaje C, sabemos que será un sistema, no un software gráfico en sí. debería ser Incluye una serie de tareas centrales como desarrollar controladores, hacer el kernel del sistema, administración de archivos, administración interna, comunicaciones de red, etc. </div><div>En segundo lugar, el posicionamiento común de la enseñanza en China. Dicho esto, en nuestro entorno actual, el posicionamiento de la enseñanza de la mayoría de las universidades para el lenguaje C es que solo algunas universidades deberían ofrecer estructuras de datos además de cursos de lenguaje C. , arquitectura de computadoras, principios del compilador, principios del sistema operativo y otros cursos. </div><div>Además, la Comisión de Inspección y Supervisión Disciplinaria del Condado de Wan'an ha investigado el desempeño de funciones por parte de unidades y personal relevantes, como la Oficina de Educación y Deportes del Condado, la Administración de Supervisión de Calidad y Mercado del Condado, y el Gobierno del Municipio de Jiantian, y revisó la supervisión Las personas responsables de la Oficina de Educación y Deportes del condado, la Administración de Supervisión de Calidad y Mercado del Condado, la Oficina de Agricultura del Condado, la Comisión de Salud y Planificación Familiar del Condado, el Gobierno del Municipio de Jiantian y otras unidades relevantes que Los casos que no cumplieron con su trabajo han presentado y revisado los casos por separado. Al mismo tiempo, la Comisión de Inspección y Supervisión Disciplinaria del Condado llevará a cabo una investigación sobre el proceso de licitación de comidas nutricionales para estudiantes y anunciará los resultados al público tan pronto como estén disponibles. </div></div><br><h3>Fuente: 30px, sin espacio establecido: el valor predeterminado es 30px, igual que la fuente;</h3><div><div>Muchos amigos que han estudiado lenguaje C estamos mirando hacia atrás en C Cuando se trata de idiomas, definitivamente habrá preguntas como esta: ¿Por qué el lenguaje C se ejecuta en una ventana negra? ¿Un programa que calcula el área de un triángulo o imprime el número de narcisos? No importa cuán buena haya sido la programación, ¿por qué no podemos seguir haciendo ese software genial? Al final, ¡es simplemente infantil! Por qué. </div><div>Primero, el posicionamiento de la invención del lenguaje C, desde el inicio de su invención por Dennis Ritchie, el inventor del lenguaje C, sabemos que será un sistema, no un software gráfico en sí. debería ser Incluye una serie de tareas centrales como desarrollar controladores, hacer el kernel del sistema, administración de archivos, administración interna, comunicaciones de red, etc. </div><div>En segundo lugar, el posicionamiento común de la enseñanza en China. Dicho esto, en nuestro entorno actual, el posicionamiento de la enseñanza de la mayoría de las universidades para el lenguaje C es que solo algunas universidades deberían ofrecer estructuras de datos además de cursos de lenguaje C. , arquitectura de computadoras, principios del compilador, principios del sistema operativo y otros cursos. </div><div>En tercer lugar, se puede utilizar el lenguaje C para hacerlo, pero rara vez se hace directamente en lenguaje C. Cuando aprendemos el lenguaje C, elegimos programas de consola, por lo que sus programas se ejecutan en una ventana negra. Al escribir una aplicación de Windows, no habrá esa ventana negra. Seguirá siendo la sintaxis del lenguaje C, que todos pueden entender. </div></div><br><h3>Fuente: 30px, espacio de configuración: 14px;</h3><div><div>Muchos amigos que han estudiado el lenguaje C definitivamente lo sabrán cuando vuelvan a mirar el lenguaje C. Tengo esta pregunta, ¿por qué el lenguaje C se ejecuta en una ventana negra? ¿Un programa que calcula el área de un triángulo o imprime el número de narcisos? No importa cuán buena haya sido la programación, ¿por qué no podemos seguir haciendo ese software genial? Al final, ¡es simplemente infantil! Por qué. </div><div>Primero, el posicionamiento de la invención del lenguaje C, desde el inicio de su invención por Dennis Ritchie, el inventor del lenguaje C, sabemos que será un sistema, no un software gráfico en sí. debería ser Incluye una serie de tareas centrales como desarrollar controladores, hacer el kernel del sistema, administración de archivos, administración interna, comunicaciones de red, etc. </div><div>En segundo lugar, el posicionamiento común de la enseñanza en China. Dicho esto, en nuestro entorno actual, el posicionamiento de la enseñanza de la mayoría de las universidades para el lenguaje C es que solo algunas universidades deberían ofrecer estructuras de datos además de cursos de lenguaje C. , arquitectura de computadoras, principios del compilador, principios del sistema operativo y otros cursos. </div><div>En tercer lugar, se puede utilizar el lenguaje C para hacerlo, pero rara vez se hace directamente en lenguaje C. Cuando aprendemos el lenguaje C, elegimos programas de consola, por lo que sus programas se ejecutan en una ventana negra. Al escribir una aplicación de Windows, no habrá esa ventana negra. Seguirá siendo la sintaxis del lenguaje C, que todos pueden entender. </div></div></body></html>Resultados de ejecución:
5. la regla de columna establece el borde entre columnas
gramática:
regla-columna:<ancho-regla-columna>||<estilo-regla-columna>||<color-regla-columna>
Descripción del parámetro
● column-regla-width El grosor del borde
● estilo de borde de estilo de regla de columna
● color del borde de la regla de la columna
PD: preste especial atención al hecho de que si el espacio entre columnas <el ancho del borde, habrá una situación en la que las columnas cubrirán el borde.
(1) ancho de regla de columna
Establece o recupera el grosor del borde entre columnas de un objeto.
gramática:
ancho de regla de columna: <longitud>|delgado|medio|grueso;
Descripción del parámetro
●longitud: utilice el valor de longitud para definir el grosor del borde; no se permiten valores negativos;
●medio: define el grosor predeterminado del borde;
●delgado: define un borde que es más delgado que el grosor predeterminado;
●grueso: define un borde más grueso que el grosor predeterminado.
(2) estilo de regla de columna establece el estilo del borde
Establece o recupera el estilo del borde entre las columnas de un objeto.
gramática
estilo de regla de columna: ninguno|oculto|punteado|discontinuo|sólido|doble|ranura|cresta|recuadro|inicial;
Descripción del parámetro
●ninguno: sin esquema;
●oculto: ocultar el borde;
●punteado: contorno punteado;
●discontinuo: contorno discontinuo;
●sólido: contorno sólido;
●doble: contorno de doble línea;
●ranura: perfil de ranura 3D;
●cresta: perfil de ranura convexa 3D;
●recuadro: contorno de borde cóncavo 3D;
●comienzo: contorno de borde convexo 3D.
Nota: Si hay un contorno con dos líneas, el ancho incluirá la distancia entre las dos líneas.
(3) color-regla-columna establece el color del borde
Establece o recupera el color del borde entre las columnas de un objeto.
gramática:
color-regla-columna:<color>;
Descripción del parámetro: Especificar color. Sin amplitud y estilo, el color fracasará. Negro predeterminado.
6. column-span establece el elemento para que abarque todas las columnas
Establece o recupera si el elemento del objeto abarca todas las columnas.
gramática:
intervalo de columnas: ninguno | todos;
Descripción del parámetro: ninguno: no abarca columnas; todo: abarca todas las columnas.
No se usa en el contenedor como otros atributos de columna, sino en los elementos secundarios del contenedor.
7. column-fill establece la altura de las columnas que se unificarán (actualmente no es compatible con los navegadores convencionales)
Establece o recupera si la altura de todas las columnas del objeto es uniforme.
gramática:
relleno de columna:autodefault|equilibrio;
Descripción del parámetro: automático: contenido adaptable a la altura de la columna; equilibrio: la altura de todas las columnas está unificada con la columna más alta.
Los principales navegadores no son compatibles con este atributo.
8. salto de columna establece nueva línea
●column-break-before establece si se debe dividir una línea antes del objeto especificado.
●column-break-after establece si se debe dividir una línea después del objeto especificado.
●column-break-inside establece si se deben dividir líneas dentro del objeto
(1) salto de columna antes
Si se deben romper líneas antes de configurar o recuperar el objeto.
gramática:
salto de columna antes: auto|siempre|evitar;
Descripción del parámetro: auto: no fuerza ni prohíbe romper líneas antes de elementos y generar nuevas columnas siempre: siempre romper líneas antes de elementos y generar nuevas columnas evitar: evitar romper líneas antes de elementos y generar nuevas columnas;
(2) salto de columna después
Ya sea para romper líneas después de configurar o recuperar el objeto.
gramática:
salto de columna después: auto|siempre|evitar;
Descripción del parámetro: auto: no fuerza ni prohíbe romper líneas después de elementos y generar nuevas columnas siempre: siempre romper líneas después de elementos y generar nuevas columnas evitar: evitar romper líneas después de elementos y generar nuevas columnas;
(3) atributo de interrupción de columna
Establece o recupera si las líneas están divididas dentro del objeto.
gramática:
salto de columna dentro: valor predeterminado automático | evitar