CSS modelo de caja
modelo de caja CSS (modelo de caja)
Todos los elementos HTML pueden ser considerados como de caja en CSS, "modelo de caja" es el término utilizado para el diseño y el diseño de utilizar cuando.
Es una caja, empaquetado alrededor de los elementos HTML CSS modelo de caja en la naturaleza, incluyendo: márgenes, bordes, el relleno y el contenido real.
El modelo de caja que nos permite el espacio entre el otro elemento y se coloca alrededor del elemento del borde del elemento.
El cuadro siguiente muestra el modelo de caja (Box Model):
Diferentes partes de la descripción:
- El margen (margen) - despejar la zona fuera del borde, los márgenes son transparentes.
- Frontera (Border) - alrededor del margen y el contenido de las fronteras exteriores interior.
- Padding (relleno) - limpiar el área alrededor del contenido, el relleno es transparente.
- Contenido (contenido) - el contenido de la caja para mostrar texto e imágenes.
Para la anchura y la altura del elemento en todos los navegadores son las correctas, lo que necesita saber cómo funciona el modelo de caja.
Anchura y la altura del elemento
Importante: Cuando se especifica un ancho elemento CSS y atributos de altura, que acaba de establecer la anchura y la altura del área de contenido.Ya sabes, el tamaño completo del elemento, también se debe agregar el relleno, borde y los márgenes. .
La anchura total del elemento en el ejemplo siguiente es 300px:
padding:10px;
border:5px solid gray;
margin:10px;
Vamos a hacer los cálculos:
250 píxeles (ancho)
+ 20 píxeles (izquierdo + derecho relleno)
+ 10px (izquierdo + derecho frontera)
+ 20 píxeles (izquierdo + derecho margen)
= 300 px
Imagine que tiene sólo 250 píxeles de espacio. Vamos a configurar la anchura total del elemento 250 píxeles:
La anchura total del elemento final de la fórmula es la siguiente:
La anchura total del elemento de relleno a la izquierda = + ancho + acolchado de la derecha + + frontera del lado izquierdo + derecho de la caja de la izquierda + margen derecho
La altura total del elemento de final de fórmula de cálculo es la siguiente:
La altura total del elemento + = altura de la parte superior de relleno en el borde inferior + acolchado borde inferior + + + + margen sobre los márgenes más bajos
problemas de compatibilidad del navegador
Una vez que la página se establece en una DTD apropiada, la mayoría de los navegadores seguirán el icono de arriba para procesar el contenido. Sin embargo, IE representación es incorrecta. 5 y 6. De acuerdo con las especificaciones de W3C, el espacio ocupado por el contenido del elemento se establece por la propiedad de ancho, y el relleno y el borde alrededor del contenido es otro cálculo. Por desgracia, IE5.X 6 y utilizar sus propios modelos no estándar en el modo extraño. La anchura de estos navegadores de atributos anchura no es el contenido, pero el contenido, la suma de la anchura de relleno y el borde.
Aunque hay maneras de resolver este problema. Sin embargo, la mejor solución es para evitar este problema. Es decir, no agregue el relleno de un elemento con el ancho especificado, pero trate de agregar relleno o márgenes al elemento de matriz y el elemento secundario.
propiedad de ancho para Internet Explorer 8 y versiones anteriores de IE no son compatibles con el relleno y ancho del borde.
Resolver incompatibilidades IE8 y problemas anteriores pueden ser una declaración de la página HTML <! DOCTYPE html> puede.