Directorio de artículos
1 modelo de caja
El llamado modelo de caja consiste en considerar los elementos de la página HTML como una caja rectangular, que es un contenedor para contener contenido. Cada rectángulo se compone de contenido de elemento, relleno, borde y margen.
1.1 Borde del recuadro (borde)
Puede establecer el tamaño del borde y los atributos de estilo de la línea del borde
También puede establecer el radio de la esquina del borde
radio de borde
1.2 Acolchado
El atributo de relleno se utiliza para configurar el relleno. Se refiere a la distancia entre el borde y el contenido.
padding-top: acolchado superior
padding-right: relleno derecho
padding-bottom: acolchado inferior
padding-left: margen interior izquierdo
Establecer la propiedad de relleno afectará su propio tamaño de borde
1.3 Margen
La propiedad margin se utiliza para establecer el margen exterior. La configuración de márgenes crea un "espacio en blanco" entre los elementos y, por lo general, este espacio en blanco no se puede utilizar para otro contenido.
margin-top: margen superior
margin-right: margen derecho
margin-bottom: margen inferior
margin-left: margen superior
Margen: margen superior, margen derecho, margen inferior, margen izquierdo
El orden de los valores es el mismo que el del relleno.
1.3.1 Márgenes exteriores para lograr el centrado de la caja
Para hacer una caja centrada horizontalmente, se deben cumplir las siguientes dos condiciones:
- Debe ser un elemento a nivel de bloque.
- La caja debe tener un ancho (ancho)
Luego, establezca los márgenes izquierdo y derecho en automático para centrar los elementos de nivel de bloque horizontalmente.
Este método se utiliza a menudo para el diseño de páginas web en trabajos reales. El código de muestra es el siguiente:
Establecer el margen de atributo de margen: 0px automático;
1.3.2 La diferencia entre la imagen centrada y el fondo del cuadro de texto
-
El centrado horizontal del texto es text-align: center
-
Cambie los márgenes izquierdo y derecho del cuadro horizontalmente a automático
-
Insertar imágenes que usamos más, como exhibición de productos
-
Imagen de fondo generalmente usamos un fondo de icono pequeño o una imagen de fondo súper grande
text-align: center; / * El texto está centrado horizontalmente /
margin: 10px auto; / El cuadro está centrado horizontalmente, los márgenes izquierdo y derecho se cambian a automático para hacerlo más ancho * /
1.3.3 Borrar los márgenes internos y externos predeterminados de los elementos
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
Nota: Los elementos en línea solo tienen márgenes izquierdo y derecho, pero no márgenes superior e inferior. Los márgenes internos también tendrán problemas en navegadores de versiones inferiores como ie6. Tratamos de no especificar márgenes internos y externos superiores e inferiores para los elementos en línea.
1.3.4 Fusión de los márgenes verticales de elementos de bloque adyacentes
Cuando dos elementos de bloque adyacentes se encuentran, si el elemento superior tiene un margen inferior inferior y el elemento inferior tiene un margen superior superior, entonces el espacio vertical entre ellos no es margen inferior ni margen superior. La suma, pero la mayor de las dos . Este fenómeno se denomina fusión de los márgenes verticales de elementos de bloque adyacentes (también llamado colapso de márgenes).
Estos dos divs son adyacentes entre sí. ** El div superior se establece con margin-bottom: 100px, y el div inferior se configura con margin-top: 100px, pero el espacio entre ellos no es 100 + 100px, sino el más grande , ** Preste especial atención a la hora de escribir.
1.4 Estabilidad de diseño del modelo de caja
Al comenzar a aprender el modelo de caja, el mayor rompecabezas para los estudiantes es que no pueden distinguir el uso de los márgenes internos y externos, cuándo usar los márgenes internos y cuándo usar los márgenes externos.
La respuesta es: de hecho, se pueden mezclar en la mayoría de los casos. En otras palabras, puede utilizar márgenes internos o externos. Utilice el que le resulte más conveniente.
Sin embargo, siempre hay uno que es mejor para usar. Lo dividimos según la estabilidad. Las sugerencias son las siguientes:
De acuerdo con el primer uso de ancho (ancho), seguido de relleno (relleno) y luego margen exterior (margen).
width > padding > margin
la razón:
- El margen tendrá el margen de fusión y el error de duplicar el margen en ie6 (odio), por lo que se usa al final.
- El relleno afectará el tamaño de la caja, y es necesario agregarlo y restarlo (problemático).
- No hay problema con el ancho (hipi). A menudo usamos el método de ancho restante y el método de alto restante para hacerlo.
1.5 modelo de caja CSS3
En CSS3, el modelo de caja se puede especificar por tamaño de caja, que se puede especificar como caja de contenido, caja de borde, de modo que la forma en que calculamos el tamaño de la caja ha cambiado.
Se puede dividir en dos situaciones:
1. Tamaño de caja: el tamaño de la caja de contenido es ancho + relleno + borde caja de contenido: este valor es su valor predeterminado, lo que permite que el elemento mantenga el modo de caja estándar de W3C
2. Tamaño del cuadro: el tamaño del cuadro del borde es el ancho, lo que significa que el relleno y el borde se incluyen en el ancho
Nota: El ancho marcado arriba se refiere al ancho: largo establecido en la propiedad CSS, y el valor del contenido se ajusta automáticamente.
Para decirlo sin rodeos, ¿qué es el centro, cuadro de borde? Este se centra en el borde, dando prioridad a garantizar que el tamaño del borde no cambie con el contenido.
content-box ( valor predeterminado ): se centra en el contenido, el tamaño del cuadro es ancho + relleno + borde, y la forma cambiará con los cambios en el relleno, el margen y el contenido . **
1.6 Sombra de caja
> box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
- Deben escribirse los dos primeros atributos. El resto se puede omitir.
- Sombra exterior (inicio) pero no se puede escribir la sombra interior predeterminada
