Tamaño de caja: aprender HTML


Sin ninguna alteración, el tamaño de un cuadro se calcula así: ancho + relleno + borde = ancho real de un elemento alto + relleno + borde = alto real de un elemento

Entonces, cuando establece el tamaño de un elemento, la imagen a menudo aparecerá más grande, porque los nuevos tamaños se agregan al original. Sin embargo, el elemento con el mismo tamaño puede parecer diferente debido a los diferentes acolchados agregados a cada elemento. La La propiedad permite que el relleno y el borde se incluyan en el ancho y alto total del elemento. La permite que el relleno y el borde se incluyan en un elemento.

<!DOCTYPE html>
<html>
<head>
    <style>
    <box-sizing: border-box;>
    </style>
</head>
<body>
</body>
</html>

Para incluir el borde, debe incluir el código del borde; borde: tipo de tamaño color;

<!DOCTYPE html>
<html>
<head>
    <style>
    <border: 1px solid blue>
    <box-sizing: border-box;>
    </style>
</head>
<body>
</body>
</html>

Ejercicio

1.Haga un div llamado box1 2.Haga el borde de 2px 3.Haga que el borde sea sólido 4.Haga que el borde sea rosa 5.Agregue el tamaño de la caja: border-box;

Deja un comentario