CSS caja de medición

caja de medición usando CSS : En este tutorial, vamos a aprender acerca de la caja de tamaño en el CSS (Cascading Style Sheet).

caja de medición usando CSS

Introducción:

Creación de páginas web tiene que ver con la creación de diversos elementos y luego ponerlos juntos para llevar a cabo la belleza de la página web. La refinación y el estilo mayormente dependen de varias opciones de edición y formato, si no están implicados adecuadamente, entonces la página web sería empezar a buscar fea e incluso a veces no responde. El desarrollador que entiende todos los detalles minuciosos de diseño, de ajuste de la posición de los elementos para crear un fondo hermoso y modificar el código JavaScript es el que seguramente as en la toma de una página web.

Discusión:

Por lo tanto, en esa nota ¿por qué no hablar de algo que es un aspecto muy pequeño de diseño de una página web, pero igualmente prominente? El nombre de ese aspecto es caja de medición en el CSS .

Todos sabemos cómo configurar el tamaño general de un elemento en una página web, que es muy simple mediante el ajuste de la anchura y la altura de ese elemento en particular. Pero, ¿cómo tamaño de la caja que contiene ese elemento en particular? Ahí es donde la propiedad caja de medición viene en

Definición:.

caja de medición es una propiedad muy simple de entender, ya que define o agrega los rellenos y las fronteras a todo el ancho y la altura de un elemento.

Bastante simple derecho? Pero cómo ayuda? Para entender que vamos a ver lo que sucede cuando no usamos caja de tamaño .

de la necesidad?

Cuando no estamos utilizando caja de tamaño el valor class de ancho y la altura de un elemento se calcula como este,

    padding+height+border = actual height of that element
padding+width+border = actual width of that element

Explicación:

Esto significa que cuando se tiende a establecer la la anchura y la altura de un elemento, el elemento podrían aparecer más grande que lo que se propuso y la razón default esto es porque el relleno y el borde se establecen en ancho específico del elemento y la altura.

Implementación:

Por lo tanto para resolver este problema caja de tamaño se utiliza, si va a for cuadro de dimensionamiento: Frontera de la caja; a su HTML o CSS, a continuación, el relleno y el borde se incluirían en la anchura y altura.

Sintaxis:

element {
box-sizing: border-box;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 200px;
height: 150px;
border: 1px solid green;
box-sizing: border-box;
}
.div2 {
width: 200px;
height: 150px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="div1">without padding</div>
<br/>
<div class="div2">with padding</div>
</body>
</html>

salida

CSS Box Sizing - 4

En el ejemplo anterior, podemos ver la diferencia entre ambos la div s después y antes de aplicar el relleno de 50px .

Conclusión:

Esta propiedad es tan brillante que muchos desarrolladores y navegadores incluso tienden a añadir esta propiedad por class en sus sitios web para hacer que sus elementos funcionan de esta manera.

Por lo tanto, sería muy conveniente y seguro para poner en práctica esta propiedad include muchos elementos pero de nuevo no class todos los elementos y que es la razón exacta por las zonas de entrada y de texto parecen ser diferentes de su ancho se ajusta al 100%!


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *