Diseño; cuadrícula
Similitudes:
Diferencias:
Estructura del nodo DOM:
El diseño del ala voladora utiliza un div más y menos que el santo grial. diseño Se utilizan cuatro atributos CSS, que son más directos e indirectos que el diseño del Santo Grial.
Flex es la abreviatura de Flexible Box, que significa "diseño flexible" y se utiliza para proporcionar la máxima flexibilidad a los modelos de caja. A cualquier contenedor se le puede asignar un diseño Flex, y el diseño Flex se convertirá en la primera opción para los navegadores modernos.
Posicionamiento absoluto: Absoluto hace que la posición del elemento sea independiente del flujo del documento, por lo que no ocupa espacio. PD: Esto es diferente del posicionamiento relativo, que en realidad es parte del modelo de posicionamiento de flujo universal, porque la posición del elemento es relativa a su posición en el flujo universal.
Cuadrícula
Se utiliza una matriz de cuadrícula regular para guiar y estandarizar el diseño y la distribución de la información en las páginas web. Es popular dividir las cuadrículas regulares en áreas específicas y confiar en estas cuadrículas para el diseño regular.
El papel del diseño de cuadrícula
El uso del diseño de cuadrícula
En la actualidad, la mayoría de los marcos de interfaz de usuario se diseñan utilizando sistemas de rasterización, como bootstrap (jquery). elemento (vue), antD (reaccionar), etc.
La idea adoptada por el sistema de rasterización de Bootstrap es dividir el diseño de la página en 12 columnas, y luego el módulo de control de clases predefinido implementa un diseño responsivo de acuerdo con el ancho de la página que ocupa la proporción de ancho (porcentaje de ancho).
Bootstrap divide los tamaños de pantalla en cuatro categorías, centrándose principalmente en la consulta de medios @media.
La definición de diseño del sitio web oficial es: crear rápida y fácilmente un diseño a través de las 24 columnas básicas. Element es un marco de interfaz de usuario desarrollado en base a vue.js y su sistema de cuadrícula es similar a Bootstrap. Puede elegir el modo flexible para satisfacer las necesidades de los navegadores modernos. El propósito del desarrollo de componentes es resolver problemas básicos de posicionamiento del diseño.
Los componentes principales son Row y Col, donde Row es un contenedor de diseño de filas y Col es un contenedor de diseño de columnas.
En referencia al diseño responsivo de Bootstrap, hay cinco tamaños de respuesta preestablecidos:
AntD es un marco de interfaz de usuario backend de nivel empresarial desarrollado por Ant Design Team basado en su grid Todo el diseño. El área de la propuesta se dividió en 24 partes iguales.
Admite diseño flexible, lo que permite la alineación horizontal de elementos secundarios dentro del nodo principal: alineación izquierda, alineación central, alineación derecha, alineación de igual ancho y disposición dispersa. Entre elementos secundarios, se admite la alineación superior, central vertical e inferior. También admite el uso de orden para definir el orden de los elementos.
Refiriéndose al diseño responsivo de Bootstrap, se preestablecen seis tamaños de respuesta:
¿Cómo implementar una rasterización básica?
Por lo general, un sistema de rasterización básico consta de:
Para establecer el ancho de todo el sistema de cuadrícula, necesitamos un contenedor. El ancho del contenedor suele ser 100, pero es posible que desees establecer un ancho máximo para pantallas más grandes.
El elemento fila se utiliza para evitar que las columnas internas se desborden a otras filas. Clearfix se suele utilizar para eliminar flotadores ya que realizamos sistemas de rejilla mediante flotadores.
El elemento columna es la parte central y más compleja del sistema reticular. Debido a que hay muchas formas de colocar una columna, también debemos considerar su ancho y su diseño responsivo.
Posición de las columnas
Los flotadores, los bloques en línea, la tabla de visualización y la visualización flexible pueden lograr el posicionamiento de las columnas en el diseño de la cuadrícula. Flotador de primer uso.
Si las filas están vacías, las filas flotantes se pegarán una encima de la otra. Para evitar esto:
Anchos de columnas
Dado que el ancho total del contenedor es 100 y queremos 6 columnas, el ancho de cada columna es: 100/6 = 16,66.
Aquí dividimos una fila en seis columnas. Mediante cálculos simples, también podemos definir columnas de varios anchos.
Espaciado entre columnas (column spacing)
Debido a que la unidad de ancho de la columna es el porcentaje de la respuesta (), le damos al espaciado de los elementos de la columna una unidad de relleno fija (px unidad). Para evitar cálculos complicados, especificamos que todos los cuadros son cuadros de límite.
Para adaptar el diseño a más resoluciones solo necesitamos cambiar el ancho de las columnas.
Por ejemplo, cuando el ancho de la pantalla es inferior a 1000 píxeles, para que el diseño sea más conciso, utilizamos el doble del ancho de la columna y una fila de seis columnas se convierte en una fila de tres columnas.
Cuando el ancho de la pantalla es inferior a 1000px.