[Frontend] Comprensión profunda del modelo de caja CSS y flotante

I. Introducción

Todos los elementos de la página están compuestos por cuadros y el contenido de los elementos está contenido en los cuadros. Desde el interior hacia el exterior del cuadro se encuentran el contenido, el relleno, el borde y el margen, que también son atributos de uso común. Podemos ver claramente los atributos correspondientes y los valores de los atributos abriendo las herramientas de desarrollador y seleccionando los elementos en la página con F12.

2. modelo de caja

1. La composición del modelo de caja.

• borde
• contenido contenido
• relleno: la distancia entre el texto y el borde del cuadro
• margen: controla la distancia entre un cuadro y otro cuadro El
  
  llamado modelo de cuadro : consiste en considerar los elementos de diseño en la página HTML como un cuadro rectangular, que es un contenedor de contenido.
  El modelo de cuadro CSS es esencialmente un cuadro que encapsula elementos HTML, incluidos: bordes, márgenes, márgenes internos y contenido real.
  

1.1, frontera frontera

borde puede establecer el borde del elemento

1.1.1 El marco consta de tres partes.

• Ancho del borde (grosor, la unidad es px): ancho del borde
• Estilo de borde: estilo de borde
• Color del borde: color del borde

/* 边框高度 */
border-width: 5px;

/* 边框样式 solid实线 */
border-style: solid;

/* 边框样式 dashed虚线 */
border-style: dashed;

/* 边框样式 dotted点线 */
border-style: dotted;

/* 边框颜色 */
border-color: red;

/* transparent透明色 */
border-color: transparent;

1.1.2 Taquigrafía de estructura compuesta

/* 边框的复合简写 没有顺序*/
border: 5px solid red

1.1.3, escribe el marco por separado.

/* 边框分开写*/
border-top: 5px solid red;
border-bottom: 5px solid blue;
border-left: 5px solid pink;
border-right: 5px solid purple;

1.1.4, el borde de línea delgada de la tabla

La propiedad border-collapse controla cómo el navegador dibuja los bordes de la tabla. Controla los bordes de las celdas adyacentes.

/* 合并相邻的边框 表示相邻边框合并在一起 */
border-collapse: collapse;

1.2, margen interior acolchado

El atributo de relleno se utiliza para establecer el margen interior, es decir, la distancia entre el borde y el contenido.
El atributo de relleno (atributo abreviado) puede tener de uno a cuatro valores.

1.3, margen margen exterior

El atributo de margen se utiliza para establecer el margen exterior, es decir, la distancia entre el cuadro de control y el cuadro.

1.3.1, Los márgenes están centrados horizontalmente

Los márgenes permiten que las cajas a nivel de bloque se centren horizontalmente y se deben cumplir dos condiciones:

1. El cuadro debe especificar un ancho (width)
2. Los márgenes izquierdo y derecho del cuadro están configurados en automático.

元素/.类{
width: 20px;
margin: 0 auto;
}

El método anterior consiste en centrar el elemento a nivel de bloque horizontalmente y agregar text-align: center al elemento principal del elemento en línea o del elemento de bloque en línea.

1.3.2 Fusión de márgenes

Cuando se utiliza margen para definir el margen vertical de un elemento de bloque, el margen se puede fusionar

1.3.3 Colapso de márgenes verticales de elementos de bloque anidados

Para elementos de bloque con dos relaciones anidadas (relación padre-hijo), el elemento padre tiene un margen superior y el elemento hijo también tiene un margen superior. En este momento, el elemento padre colapsará con un valor de margen mayor

1.3.3.1 Soluciones

1. Se puede definir un borde superior para el elemento padre.

/* 设置边框为1px 实线 透明色 */
border: 1px solid transparent

2. Puede definir un relleno superior para el elemento padre

/* 设置内边距为1px */
padding: 1px

3. Puede agregar desbordamiento: oculto al elemento principal

1.3.4 Borrar márgenes internos y externos

* {
	//清除内边距
	padding: 0

	//清除外边距
	margin: 0
}

Nota : Para cuidar la compatibilidad, intente establecer solo los márgenes interior y exterior izquierdo y derecho para elementos en línea, y no establezca los márgenes interior y exterior superior e inferior. Pero la conversión a elementos de nivel de bloque y de bloque en línea funciona

2. Borde redondeado

El atributo border-radius se utiliza para establecer las esquinas redondeadas del borde exterior del elemento.

border-radius: 长度px/%；

3. Sombra de caja

La propiedad box-shadow agrega una sombra al cuadro.

box-shadow: h-shadow v-shadow blur spread color inset
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.3);

Nota :
1. El valor predeterminado es sombra exterior (inicio), pero esta palabra no se puede escribir, de lo contrario la sombra no será válida. 2. La sombra del
cuadro no ocupa espacio y no afectará la disposición de otros cuadros.
3. Compuesto Se debe utilizar la escritura, y la escritura por sí sola no tendrá efecto.

4. Sombra de texto

El atributo text-shadow agrega una sombra al texto.

text-shadow: h-shadow v-shadow blur color
text-shadow: 3px 3px 2px rgba(0,0,0,0.3);

Tres, CSS flotante

1. Flotando

1. La dirección horizontal del elemento flota, lo que significa que el elemento solo puede moverse hacia la izquierda y hacia la derecha, pero no hacia arriba y hacia abajo.
2. Un elemento flotante se mueve lo más hacia la izquierda o hacia la derecha posible hasta que su borde exterior toca el borde del cuadro contenedor u otro cuadro flotante.
3. Los elementos posteriores al elemento flotante se envolverán alrededor de él.
4. Los elementos anteriores al elemento flotante no se verán afectados.

1.1 Flujo estándar (flujo ordinario/flujo de documentos)

1.2 Características flotantes

1. Rompiendo con el control del flujo ordinario estándar (flotante) y moviéndose a la posición especificada (en movimiento), se denomina fuera de etiqueta.
2. Las cajas flotantes ya no conservan su posición original

2. Flotante claro

Cuatro Resumen

A través de la introducción de este artículo, los lectores tienen una comprensión más profunda del modelo de caja CSS y la flotación. Después de dominar estos dos conceptos, los lectores podrán realizar el diseño y el diseño de páginas de manera más flexible y mejorar la experiencia del usuario y la capacidad de mantenimiento de las páginas web. Al mismo tiempo, al comprender los problemas de compatibilidad y las soluciones del modelo de caja y flotante, los lectores pueden lidiar mejor con las diferencias de los diferentes navegadores y mejorar la eficiencia del desarrollo. Espero que este artículo pueda ayudar a los lectores a utilizar mejor el modelo de caja CSS y la tecnología flotante en el desarrollo front-end.