cuadro de dimensionamiento de la propiedad CSS3
Ejemplos
Dos cajas de frontera designada:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
Trate »
Soporte para el navegador
Las cifras de la tabla representan el primer navegador compatible con el número de versión de la propiedad.
Inmediatamente después de la -webkit- digital, -MS- o hace -moz- en apoyo del prefijo atribuyen primer número de la versión del navegador.
| 属性 | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
Definiciones de atributos e instrucciones
Box-dimensionamiento de la propiedad le permite definir ciertos elementos de alguna forma para adaptarse a la zona designada.
Por ejemplo, si se han de fijar dos de lado a lado con un cuadro de la frontera por la caja de tamaño para "frontera-box". Esto puede hacer que el navegador muestra un cuadro con la anchura y la altura especificada, y la frontera, y el relleno en la caja.
| Por defecto: | Contenido de la caja |
|---|---|
| herencia: | no |
| Version: | CSS3 |
| la sintaxis de JavaScript: | objetar .style.boxSizing = "border-box" |
gramática
caja de tamaño: el contenido de la caja | frontera-box | hereda:
| valor | explicación |
|---|---|
| Contenido de la caja | Este es el comportamiento de la anchura y altura especificadas CSS2.1. Anchura y altura (min / max atributo) elemento adecuado para el ancho de la caja y la altura especificadas. Acolchado y fronteras, y de presentaciones de dibujo especifican la anchura y la altura del elemento de excepción |
| frontera-box | Especifica la anchura y la altura (min / max atributo) para determinar cuadro de borde del elemento. En otras palabras, los elementos especificados anchura y la altura incluyendo la designación del relleno y el borde. Anchura y la altura de la menos el contenido de los respectivos lados de la frontera y llenar se calcula a partir del ancho "width" y "height" atributo especifica |
| heredar | Valor especifica la propiedad box-dimensionamiento debe ser heredado de elemento padre |
Artículos relacionados
CSS3 tutorial: CSS3 la interfaz de usuario