Modelo de caja CSS
El modelo de caja css se compone de borde, margen, relleno y contenido real.
(1) frontera fronteriza
border: 1px solid black; // El primer parámetro 1px se refiere al grosor del borde, el segundo parámetro solid se refiere al estilo del borde: línea continua
El tercer parámetro se refiere al color del borde.
borde: 1px discontinuo negro; // línea discontinua
borde: 1px punteado negro; // línea punteada
(2) Margen (margen se refiere a la distancia entre el borde del elemento y los elementos adyacentes)
Una función importante del margen exterior es alinear los cuadros de nivel de bloque horizontalmente en el centro. Requisitos: 1. El cuadro de nivel de bloque debe especificar el ancho 2. Los márgenes izquierdo y derecho del cuadro están configurados en automático. La práctica más común: margen: 0 automático; los márgenes superior e inferior se establecen en 0, y los márgenes izquierdo y derecho se configuran en automático
Un problema común, cuando el cuadro de nivel de bloque B se encuentra en el cuadro de nivel de bloque A, es imposible mover el cuadro de nivel de bloque B hacia abajo configurando el margen. Para resolver este problema, puede establecer un borde (o borde superior).
(3) acolchado interior
En primer lugar, asegúrese de que el borde del borde tenga un ancho. Cuando configure un cuadro div con un ancho de 100 px y una altura de 100 px, si agrega un borde con un ancho de 1 px, entonces su ancho y alto reales serán Se convierte en 101 px. El margen es la distancia entre el borde del elemento y otros elementos. No importa cómo ajuste el margen, el ancho y la altura del elemento en sí no cambiarán. ¡El relleno se refiere a la distancia entre el contenido del cuadro y el borde del cuadro, y el relleno abrirá el cuadro! ! !
relleno: 5px; // El margen interno de arriba, abajo, izquierda y derecha son 5px
relleno: 5px 10px 15px 30px; // El primer parámetro es el relleno superior de 5px, el segundo parámetro es el relleno derecho, el tercer parámetro es el relleno inferior y el cuarto parámetro es el relleno izquierdo , El orden es en sentido horario, arriba a la derecha abajo a la izquierda
(4) Eliminar los márgenes interno y externo (importante)
Muchos elementos de la página web tienen márgenes internos y externos predeterminados, y los formatos predeterminados de los diferentes navegadores también son inconsistentes, por lo que los márgenes internos y externos de los elementos de la página web deben borrarse antes del diseño
* {
relleno: 0;
margen: 0;
}
Agregue un pequeño punto de conocimiento, quite la bala (pequeño punto) delante de li
estilo de lista: ninguno;
