Tamaño de caja css box-sizing: border-box
CSS Tutorial » box-sizing: border-box
¿Qué es y para qué sirve?.
La propiedad CSS de tamaño de caja box-sizing: border-box establece cómo se calcula el ancho y alto total de un elemento.
¿Qué hace la propiedad box-sizing?
La propiedad de CSS box-sizing indica cómo se deben calcular las medidas de un elemento. ¿Qué significa esto? Pues que si le añades un padding o un border el tamaño de renderizado de la caja será: width + padding + border y luego no encaja.
Sintaxis:
Este elemento verde tiene un ancho de 300px, un alto de 150px, borde rojo de 14px, solid, marjen amarillo de 10px y
centrado en el centro.
La caja div verde no encaja el la amarilla
Sin box-sizing: border-box; la propiedad de tamaño de caja de CSS
Por defecto, el ancho y alto de un elemento se calcula así:
ancho + relleno + borde = ancho real de un elemento
altura + relleno + borde = altura real de un elemento
Esto significa: cuando establece el ancho / alto de un elemento, el elemento a menudo aparece más grande de lo que ha establecido (porque el borde y el relleno del elemento se agregan al ancho / alto especificado del elemento).
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 2px solid blue;
}.div2 {
width: 300px;
height: 100px;
padding: 30px;
border: 6px solid red;
}
</style>
</head>
<body><div class ="div1"> Este div es más pequeño (el ancho es 300px y el alto es 100px). </div>
<br /> <br />
<div class = "div2"> Este div es más grande (el ancho también es de 300 px y la altura es de 100 px). Este div es más grande (el ancho también es de 300 px y la altura es de 100 px). </div></body>
</html>
La propiedad de tamaño de caja resolverá este problema.
Etiquetas: tamaño de caja css box-sizing: border-box, tamaño de div css, tamaño de cajas en css, cambiar tamaño de div css, cambiar tamaño caja de texto css
Con la propiedad de tamaño de caja de CSS
La propiedad de tamaño de caja nos permite incluir el relleno y el borde en el ancho y alto total de un elemento.
Si establece box-sizing: border-box; en un elemento, el relleno y el borde se incluyen en el ancho y el alto:
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class ="div1"> ¡Ambos divs tienen el mismo tamaño ahora! </div>
<br>
<div class ="div2"> ¡Hurra! </div>
</body>
</html>
Aplicar box-sizing: border-box; a todos los elementos
El siguiente código garantiza que todos los elementos se dimensionen de esta manera más intuitiva.
Muchos navegadores ya utilizan box-sizing: border-box; para muchos elementos de formulario (pero no todos, razón por la cual las entradas y las áreas de texto se ven diferentes en el ancho: 100%;).
Aplicar esto a todos los elementos es seguro y prudente:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}* {
box-sizing: border-box;
}input, textarea {
width: 100%;
}
</style>
</head>
<body><form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br>
Comments:<br>
<textarea name="message" rows="5" cols="30">
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
<p> <strong> Sugerencia: </strong> intente eliminar la propiedad de tamaño de caja del elemento de estilo y observe lo que sucede.
Tenga en cuenta que el ancho de la entrada, el área de texto y el botón de envío saldrán de la pantalla. </p></body>
</html>
Etiquetas: tamaño de caja css box-sizing: border-box, tamaño de div css, tamaño de cajas en css, cambiar tamaño de div css, cambiar tamaño caja de texto css
Tamaño de caja css box-sizing: border-box - css.es
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.