modelo de caja
- relleno y el margen
1. relleno usado, si la caja no se especifica la anchura, las dimensiones de la caja no cambia, cuando se especifique, las dimensiones correspondientes de la caja va a cambiar.
2. Los elementos en línea solamente unos márgenes, sin márgenes superior e inferior se deben evitar ajustar el relleno vertical, como era de esperar con diferente (problema del navegador).
Cuando se utiliza margen 3. Los elementos de bloque en la dirección vertical, los elementos de bloque adyacentes se pueden producir márgenes combinados, tomando la distancia máxima entre el entremedio exterior.
4. Cuando se utilizan elementos de bloque Inline Block margen de elementos, se pueden producir los márgenes de fusión (fenómeno es el padre cambio márgenes elemento, el elemento secundario con respecto al elemento padre desde el exterior no ha cambiado), solución:
(1) Sea el elemento padre 1 pixels definidos en la frontera o margen.
(2) el elemento padre puede agregar overflow: hidden.
Para más detalles, consulte: https://www.w3school.com.cn/css/css_margin_collapsing.asp
- el contenido de anchura y altura
utilizando atributos Anchura y Altura atributos altura anchura puede controlar el tamaño de la caja. valores de anchura y altura o valores de los atributos pueden ser diferentes unidades con respecto al porcentaje% del elemento padre. El más utilizado es el valor del píxel. ·
| Dimensiones de la caja calculados | cálculo |
|---|---|
| Tamaño del paquete (elemento de dimensión espacial) | Elemento altura del espacio = altura + acolchado + frontera + margen de espacio elemento width = ancho + acolchado + frontera + margen |
| El tamaño de la caja (tamaño del elemento) | 元素Altura = Altura + acolchado + frontera 元素Ancho = ancho + acolchado + frontera |
Nota:
1. La anchura y la altura atributos propiedad de ancho altura sólo se aplica a los elementos de bloque, el elemento interior no es válida fila.
2. Cálculo de la altura total del modelo de caja, también debe considerar el caso en que dos márgenes verticales perpendiculares combinados.
- modelo de caja (CSS3)
más que el modelo estándar y el contenido relacionado en esta presentación de otro modelo de caja. CSS3 modelo de caja puede ser especificado por la propiedad box-dimensionamiento, que puede ser designado como un modo de contenido de la caja, en la frontera de la caja, se cambia la diferencia de tamaño caja calculado.
| propiedad | descripción | formato |
|---|---|---|
| cuadro-dimensionamiento | El valor por defecto no está establecido, entonces el contenido de la caja. 1.content-box: un tamaño de la caja de relleno + + ancho del borde 2.border-Box: un tamaño de la caja de la anchura, es decir, incluyendo las protecciones y ancho del borde, el establecimiento de estas propiedades, excepto para cambiar el tamaño del contenido, el valor de atributo no anchura de cambio . |
caja de tamaño: el contenido de la caja | frontera-box |
Nota: El tamaño del margen no es fácil de calcular el ancho del recipiente final, porque él define como el envase en blanco, pero no el propio envase.
- sombra del borde
| propiedad | descripción | formato |
|---|---|---|
| sombra de la caja | propiedad box-shadow para agregar uno o más cuadros de sombra. Este atributo es una lista separada por comas de sombras, protegiéndose cada valor de la longitud de 2-4, y, opcionalmente, el valor de color opcional de una inserción de palabras clave predeterminada. se se omite valor de longitud 0. Parámetros: 1.h-Sombra: Obligatorio. La posición horizontal de la sombra. Permitir negativo. 2.v-sombra: Obligatorio. La posición vertical de la sombra. Permitir negativo. 3.blur: Opcional. distancia difusa. 4.spread: Opcional. Tamaño de la sombra. 5.color: Opcional. Color de la sombra. 6.inset: Opcional. La sombra exterior (principio como el valor por defecto, no se puede escribir, escribir una GO mal) en lugar de sombra interna. |
box-shadow: h-sombra v-sombra de color borroso propagación inserción; |
