Al dibujar HTML CSS, la disposición no se configura como se esperaba.

Tuve la experiencia de preguntar mucho en Google.

Recientemente, vi el video de la charla del desarrollador de Zerocho y decidí aprender sobre los conceptos básicos 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 necesita modificar el CSS y aplica cosas de manera empírica mientras implementa solo lo que ve, tendrá problemas en el diseño receptivo o se volverá complicado de mantener en el futuro.

1. Flujo normal

- No hay nada especial que pensar. Todos los elementos se colocan de arriba a abajo y de izquierda a derecha.

* Cuando escribe un artículo en durumis, si pega una etiqueta html, desaparece, ¿sabe cómo resolverlo;;

 <div>
     <p>Primer párrafo</p>
     <p>Segundo párrafo</p>
     <span>Elemento en línea 1</span>
     <span>Elemento en línea 2</span>

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

 Primer párrafo
 Segundo párrafo

2. BFC (Contexto de formato de bloque)

- Se utiliza principalmente para configurar el diseño. (Organiza el bloque y luego organiza la línea dentro de él).

- Es una forma de apilar elementos de nivel de bloque.

- Los elementos de nivel de bloque son los siguientes.

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

- Ocupa todo el ancho del elemento padre independientemente de la longitud del contenido dentro del elemento. (una línea)

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

- Puede configurar ancho, alto, margen y relleno.

 <div style="padding :10px;"> 
     <h1>Título</h1>
     <p>Este es un párrafo corto. </p>

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

- Estos son los casos en que se crea un BFC. Puede buscarlo de vez en cuando.

• Cuando el atributo float no es none
• Cuando la posición es absoluta o fija
• Cuando la visualización es inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid
• Cuando el desbordamiento no es visible, etc.
  
  

3. IFC (Contexto de formato en línea)

<p>
    ¡Hola! <strong> durumis </strong> ¡Este es mi segundo artículo!
    <span style="color: pink;">Por favor, pulsa el botón</button> Me gusta.

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

- No se puede configurar el ancho y el alto directamente. (Ocupa el tamaño del contenido).

- Solo se puede aplicar relleno y margen horizontal.

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

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

Entonces, ¿cuándo se utiliza?

- bfc se utiliza para manejar la interacción flotante o la cancelación de márgenes.

1. Interacción flotante

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

(flotar, posición absoluta, fija, visualización de bloque en línea, etc.)

- En este caso, configura la disposición con bfc en el elemento padre.

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

<div class="padre" style="display: inline-block;">
    <div class="hijo" style="float: left;">...</div>

2. Cancelación de margen

- CSS superpone los márgenes superior e inferior de dos etiquetas adyacentes.

por ejemplo) La distancia vertical entre las dos etiquetas div a continuación no es 150px, sino 100px.

<div style="margin-bottom: 100px;">
..
</div>
<div style="margin-top: 50px;">
,,

- Añade un nuevo elemento bfc entre las dos etiquetas en la situación anterior.

<div style="margin-bottom: 100px;"></div> 

<div style="overflow: auto;"></div> <!-- Nuevo bfc-->

ps. ¿Sabes cómo pegar HTML en durumis;;