Organizar notas de estudio diarias en el patrón de diseño HTML

Esta semana no se realiza ningún proyecto, y he estado estudiando el modelo de diseño HTML. Organizaré y compartiré mis resultados de aprendizaje esta semana para su referencia.

Notas de aprendizaje de patrones de diseño HTML

Esta semana aprendí principalmente patrones de diseño HTML, y ahora resumiré mi contenido de aprendizaje de la siguiente manera:

uno. Aprendizaje del modelo de caja

Hay un modelo de diseño básico en CSS llamado modelo de caja, que define cómo los elementos se analizan como cajas. Principalmente aprendí seis tipos de modelos de caja, a saber, modelo de caja en línea, modelo de caja de bloque en línea, modelo de caja de bloques, modelo de caja de mesa, modelo de caja absoluta y modelo de caja de posicionamiento flotante.

El patrón de diseño del modelo de caja está integrado en CSS, que define la relación entre las siguientes propiedades: límites, bordes, rellenos y contenido. Cada atributo incluye cuatro partes: superior, derecha, inferior e izquierda; Estas cuatro partes se pueden establecer al mismo tiempo o por separado; Los bordes se pueden dividir en tamaño y color. Podemos entenderlo como el grosor de la caja visto en la vida y de qué color de la caja está hecho. El límite es qué tan lejos debe mantener la caja de otras cosas. El contenido es lo que está contenido en la caja y el material relleno en la parte de repuesto en la caja de llenado.

Los modelos de caja en línea se analizan en orden de disposición en línea, se clasifican horizontalmente de izquierda a derecha, y cuando exceden el ancho de sus antepasados ​​de bloque terminal más cercanos, se reemplazan con una nueva fila. El ancho, la altura y el desbordamiento no funcionan en elementos en línea, ya que siempre coinciden con el ancho y la altura del contenido. El margen y la altura de línea se pueden aplicar a elementos en línea de alguna manera especial. El margen horizontal cambia la posición de los elementos en línea en el orden de disposición. Un valor positivo de margen-izquierda mantendrá el elemento alejado del elemento antes, mientras que un valor negativo lo acercará. Un valor positivo del margen-derecha mantendrá el elemento alejado de su siguiente elemento, mientras que un valor negativo lo acercará. El techo de margen y el fondo del margen no funcionan para elementos en línea. El borde establece los bordes para elementos en línea de manera especial, y el borde horizontal cambiará la posición de los elementos en línea en el acuerdo. El borde izquierdo hará el elemento a la izquierda, y el borde derecho hará el siguiente elemento a la derecha. Los bordes superiores e inferiores se mostrarán fuera del margen interno, pero no se extienden a la altura de la fila ni cambian la posición del elemento en la dirección vertical. La plantilla de este patrón se puede expresar de la siguiente manera: