Reglas básicas de CSS (Flujo normal, BFC, IFC)

Cuando diseño con HTML y CSS, a veces la disposición no se organiza como esperaba.

He tenido la experiencia de buscar mucho en Google.

Recientemente, mientras veía un video de charla de desarrolladores de Zerocho, decidí aprender sobre los fundamentos de CSS.

- Quiero entender los elementos de bloque, los elementos en línea, el margen y la alineación.

Ya lo sé por experiencia, pero necesito organizarlo.

■ Si necesito modificar el CSS y simplemente aplico varias cosas según mi experiencia y lo implemento solo con lo que veo, pueden surgir problemas con el diseño receptivo o complicarse el mantenimiento posterior.

1. Flujo Normal

- No hay nada que considerar en particular. Todos los elementos se colocan de arriba hacia abajo y de izquierda a derecha.

* Cuando pego etiquetas HTML al escribir en durumis, desaparecen. ¿Sabes cómo solucionarlo?;;

- Se crean dos bloques con la etiqueta p y la etiqueta span se dibuja en una línea.

2. BFC (Contexto de Formato de Bloque)

- Se usa principalmente para construir diseños. (Construye un bloque y dentro de él, construye elementos en línea.)

- Es la forma en que se apilan los elementos de nivel de bloque.

- Los elementos de nivel de bloque son los siguientes:

<div>, <p>, <h1>~<h6>, <ul>, <ol>, <li>, <table>, <form>

- Independientemente de la longitud del contenido dentro del elemento, ocupa todo el ancho del elemento padre. (Una línea)

- Puedes insertar un bloque dentro de un bloque o un elemento en línea.

- Puedes establecer width, height, margin y padding.

- Se generan dos líneas dentro de la etiqueta div.

- Los momentos en que se crea un BFC son los siguientes. Puedes buscarlos cada vez que los necesites.

• Cuando la propiedad float no es none
• Cuando la propiedad position es absolute o fixed
• Cuando la propiedad display es inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid
• Cuando la propiedad overflow no es visible, etc.
  
  

3. IFC (Contexto de Formato en Línea)

- Se construye dentro de un elemento de bloque. (Sin unidad de línea)

- No puedes establecer width y height directamente. (Ocupa solo el tamaño del contenido).

- Solo puedes aplicar padding y margin horizontales.

- Solo puedes incluir elementos en línea dentro de un elemento en línea.

<span>, <a>, , <img>, <input>, etc.

¿Entonces, cuándo se usa?

- BFC se usa para manejar la interacción de float o el colapso de margen.

1. Interacción de float

- Si le aplicas un estilo libre a un hijo, el padre no podrá contenerlo.

(float, position absolute, fixed, display inline-block, etc.)

- En este caso, se configura el diseño dando un BFC al elemento padre.

(Aplica display: inline-block, overflow: auto, float: left, etc., a la etiqueta padre.)

2. Colapso de margen

- CSS hace que los márgenes superior e inferior de dos etiquetas adyacentes se superpongan.

ej) El espacio vertical entre las dos etiquetas div a continuación no es 150px, sino 100px.

- En la situación anterior, se agrega un nuevo elemento BFC entre las dos etiquetas.

pd. ¿Sabes cómo pegar HTML en durumis?;;