En CSS, el diseño de cuadrícula se refiere al "diseño de cuadrícula", que es un sistema bidimensional que puede manejar filas y columnas al mismo tiempo. Puede usar el diseño de cuadrícula aplicando reglas CSS al elemento principal y a los elementos secundarios. del elemento, y diseño flexible se refiere a "diseño flexible" y es un sistema unidimensional que se utiliza para proporcionar la máxima flexibilidad para los modelos de caja.
(Tutorial recomendado: tutorial de vídeo CSS)
1. Introducción al diseño flexible
Flex es una introducción a la caja flexible (diseño flexible) Es un sistema unidimensional que se utiliza para proporcionar la máxima flexibilidad para los modelos de caja.
Uso: cualquier contenedor (los elementos en línea se pueden configurar para mostrar: bloque en línea);
Características: la distribución espacial se lleva a cabo en la línea, no en el
2. Introducción al diseño de cuadrícula El diseño de cuadrícula
(diseño de cuadrícula css) es el diseño más poderoso en CSS El sistema es un sistema bidimensional que puede procesar filas y columnas al mismo tiempo. Puede utilizar el diseño de la cuadrícula aplicando reglas CSS al elemento principal (el contenedor de la cuadrícula) y los elementos secundarios del elemento (el elemento de la cuadrícula) .
Utilice: configure dispay para el elemento principal: cuadrícula; grid-template-column y grid-template-rows para establecer varias filas y varias columnas, y luego configure los elementos secundarios para que ocupen varias filas y varias columnas.
Características: cuadrícula bidimensional estructura, muy fácil de operar y
combatir Uno: use el diseño de cuadrícula para hacer un
código html simple de cuadrícula de nueve cuadrados :
1
2
3
4
5
6
7
8
9
10
11
código css:
1
2
3
4
5
6
7
8
9
10
11
12
.box { width: 1200px; height: 80vh; display: grid; // habilitar el diseño de la cuadrícula grid-template-column: repeat (3,30%); / / Establecer la columna grid-template-rows: repeat (3,30%); // Establecer el grid-column-gap: 20px; // Establecer el espacio entre las cuadrículas grid-row-gap: 20px; // Establecer la cuadrícula Espacio entre cuadrículas } .box div { background-color: # 34ce57; } Combate real 2: Crea un diseño de sitio web común, código html: 1 2 3 4 5 6 7 8 9
encabezamiento
izquierda
centrar
derecho
pie de página
código CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.box { ancho: 1200px; alto: 80vh; pantalla: grid; // Activar el diseño de la cuadrícula grid-template-rows: 10% 80% 10%; // Establecer el número de filas } .header { background-color: # 6ac13c;
pantalla: cuadrícula;
/ * 居中 * /
align-content: center;
justificar-contenido: centro;
}
.content { / * color de fondo: # f1b0b7; * / display: grid; columnas de plantilla de cuadrícula: 10% 80% 10%; brecha de cuadrícula: 20px; // 网格 之间 的 间隔} .footer { color de fondo: # ffc107; pantalla: cuadrícula; alinear-elementos: centro; justificar-contenido: centro; } .left { color de fondo: # 5599FF; } .center { color de fondo: verde claro; } .right { color de fondo: orquídea; }