CSS (hojas de estilo en cascada) es un lenguaje de hojas de estilo utilizado para diseñar una página web para que sea atractiva. La razón para usar esto es simplificar el proceso de hacer que las páginas web estén presentables. Te permite aplicar estilos en las páginas web. Más importante aún, le permite hacer esto independientemente del HTML que conforma cada página web.
En este artículo, aprenderemos en qué se diferencia border-box de content-box.
border-box y content-box son los dos valores de box-sizing .
- border-box: en este valor, se incluyen las propiedades de alto y ancho, pero no se incluyeron el relleno, el borde o el margen.
Ejemplo:
.box {width: 350px; border: 10px solid black;}
Representa un cuadro de 370 px de ancho.
Cálculo de la dimensión =
ancho = ancho del contenido y alto = alto del contenido
(Los bordes y el relleno no se incluyen en el cálculo)
Sintaxis:
box-sizing: border-box;
- cuadro de contenido: en este valor, solo se incluyen las propiedades de ancho y alto, pero encontrará relleno y borde dentro del cuadro, por ejemplo, .box {ancho: 350px; border: 10px solid black;} muestra un cuadro de 350px de ancho.
Cálculo de la dimensión
= ancho = borde + relleno + ancho del contenido, y alto = borde + relleno + alto del contenido.
Sintaxis:
box-sizing: content-box;
Ejemplo: En el siguiente ejemplo, veremos la diferencia entre el ancho cuando se aplican las propiedades content-box y border-box .
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>GeeksforGeeks</title>
<style>
div {
width: 160px;
height: 80px;
padding: 20px;
border: 2px solid black;
background: lightgreen;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>
</center>
</body>
</html>
Producción:
cuadro de contenido y cuadro de borde