En este artículo, aprenderemos sobre el contexto de formato de bloque en CSS y su implementación. Un contexto de formato de bloque es una parte del CSS visible que se mostrará en la página web en la que los cuadros de bloque se colocan fuera. El flujo normal es el esquema de posicionamiento al que pertenece. Es una zona en la que se desarrolla la disposición de las cajas de bloques en las que los flotadores interactúan con otros elementos. Según W3C:
Flotantes, elementos absolutamente posicionados, contenedores de bloque (como bloques en línea, celdas de tabla y títulos de tabla) que no son cuadros de bloque y cuadros de bloque con ‘desbordamiento’ que no sea ‘visible’ (excepto cuando ese valor se ha propagado a la ventana gráfica) establecen nuevos contextos de formato de bloque para sus contenidos.
Las cajas se colocan verticalmente una tras otra, comenzando desde el bloque superior que contiene. La propiedad de margen ayuda a determinar la distancia vertical entre las 2 cajas hermanas. Es un cuadro HTML que debe cumplir al menos una de las siguientes condiciones:
- El valor flotante no debe declararse como ninguno.
- El valor de posición no es estático ni relativo.
- El valor de visualización es table-cell, table-caption, inline-block, flex o inline-flex.
- El valor de desbordamiento no debe declararse como visible.
La siguiente figura ilustra la diferencia entre la existencia y sin la existencia del contexto de formato de bloque.
- Inexistencia de contexto de formato de bloque:
- Existencia de contexto de formato de bloque:
Comprenderemos el concepto de contexto de formato de bloque a través de los ejemplos.
Ejemplo 1: este ejemplo ilustra el uso del contexto de formato de bloque mediante el uso de la propiedad flotante que se establece a la izquierda y la propiedad de visualización y establece su valor como bloque en línea;
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Block formatting Context in CSS</title>
<style>
.container {
width: 960px;
height: 160px;
margin: 100px;
border: 1px solid black;
border-radius: 5px;
background-color: rgb(230, 240, 235);
font-family: sans-serif;
}
.block1 {
float: left;
border: 1px solid red;
margin-top: 18px;
margin-left: 14px;
width: 450px;
background-color: rgb(183, 199, 232);
text-align: justify;
}
.block2 {
display: inline-block;
border: 1px solid navy;
padding-top: 5px;
margin-top: 18px;
margin-left: 15px;
width: 450px;
background-color: rgb(165, 232, 202);
text-align: justify;
}
span {
color: green;
font-size: 30px;
margin-left: 50px;
}
.block1,
.block2 p {
padding: 0 7px;
}
.main {
margin-left: 120px;
}
</style>
</head>
<body>
<div class="container">
<div class="block1">
<span class="main">
GeeksforGeeks
</span>
<p>
A Computer Science portal for geeks.
It contains well written, well
thought and well explained computer
science and programming articles.
</p>
</div>
<div class="block2">
<span class="submain">
GeeksforGeeks Placement
</span>
<p>
This course contains Placement
preparation tracks and Weekly Mock
Tests which will help you learn
different topics and practice.
</p>
</div>
</div>
</body>
</html>
Explicación: Aquí, hemos declarado la clase contenedora para crear el contexto de formato de bloque. Dentro de la clase contenedora, hemos definido otras 2 etiquetas div que tienen las clases block1 y block2 que contienen 2 subdiv dentro de cada clase que tiene clases principal y subprincipal. Hemos declarado propiedades CSS para cada clase. Para la clase block1, para alinearlo a la izquierda, hemos establecido el valor de la propiedad flotante como a la izquierda junto con el ancho del cuadro en 450px. Para alinear el segundo cuadro adyacente al primer cuadro, hemos utilizado la propiedad de visualización , para la cual establecemos el valor como bloque en línea. También usamos padding-top, margin-top, margin-left con valores de 5px, 18 px y 15 px respectivamente.
Producción:
Ejemplo 2: en este ejemplo, se usa la propiedad de desbordamiento cuyo valor se establece en automático , lo que recortará el desbordamiento y, si hay algún contenido, agregará el desplazamiento para mostrar el resto del contenido.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Block formatting Context in CSS</title>
<style>
.container {
background-color: rgb(118, 171, 119);
border: 5px solid #7d9ce8;
border-radius: 3px;
font-family: sans-serif;
overflow: auto;
width: 550px;
}
.subcontain {
background-color: white;
background-image: linear-gradient(
to top right, yellow, green);
border: 1px solid black;
border-radius: 2px;
color: green;
float: left;
font-size: 25px;
height: 110px;
padding-top: 60px;
text-align: center;
width: 200px;
}
.container p {
padding: 15px;
text-align: justify;
}
</style>
</head>
<body>
<div class="container">
<span class="subcontain">
GeeksforGeeks
</span>
<p>
A Computer Science portal for geeks.
It contains well written, well
thought and well explained computer
science and programming articles. We
provide a variety of services for
you to learn, thrive and also have
fun!
</p>
</div>
</body>
</html>
Explicación: Aquí, hemos declarado la etiqueta div con la clase contenedora y la etiqueta span con la clase subcontenida. Para alinear el cuadro a la izquierda, hemos establecido el valor de la propiedad flotante como a la izquierda, también hemos usado la propiedad de gradiente lineal .
Producción:
ventajas:
- El contexto de formato de bloque evita que los bordes se caigan.
- Un contexto de formato de bloque detiene las derivas de ajuste de contenido.
- El contexto de formato de bloque ayuda a percibir el contraste en dos sustancias diferentes.
Publicación traducida automáticamente
Artículo escrito por shikharmalik333 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA