When drawing HTML CSS, the layout may not be organized as you think.

I've had a lot of experience asking Google.

Recently, I watched Zerocho's developer talk video and decided to learn about the basics of CSS.

- I want to understand block elements, inline elements, margins, and alignment.

I already know this empirically, but I need to organize it.

■ If you need to modify css, applying things empirically and implementing them as you see them will cause problems in responsive design or make it more complex to maintain later.

1. Normal Flow

- There's nothing special to think about. All elements are placed from top to bottom and from left to right.

* When you paste HTML tags into a durumis post, they disappear. Do you know how to solve this? ;;

 <div>
     <p>First paragraph</p>
     <p>Second paragraph</p>
     <span>Inline element 1</span>
     <span>Inline element 2</span>

- Two blocks are created with the p tag, and the span tag is drawn in one line.

 First paragraph
 Second paragraph

2. BFC (Block Formatting Context)

- It is mainly used to construct layouts. (Blocks are constructed, and inlines are constructed inside them.)

- It is the way block-level elements are stacked.

- Block-level elements are as follows:

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

- It takes up the entire width of the parent element regardless of the length of the content inside the element. (One line)

- You can put a block inside a block, or you can put an inline element inside it.

- You can set width, height, margin, and padding.

 <div style="padding :10px;"> 
     <h1>Title</h1>
     <p>This is a short paragraph.</p>

- Two lines are generated inside the div tag.

- BFC is created in the following cases. You can look it up whenever you need it.

• If the float property is not none
• If position is absolute or fixed
• If display is inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid
• If overflow is not visible, etc.
  
  

3. IFC (Inline Formatting Context)

<p>
    Hello! <strong> durumis </strong> This is the second post!
    <span style="color: pink;">좋아요</button> Click the button.

- It is configured within a block element. (No line by line)

- You cannot set width and height directly. (It takes up the size of the content.)

- You can only apply horizontal padding and margins.

- You can only include inline elements within an inline element.

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

So, when do you use it?

- bfc is used to handle float interactions or margin offsets.

1. float interaction

- If you apply a free-spirited style to a child, the parent cannot wrap it.

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

- At this time, the layout is configured by giving the parent element a bfc.

(Apply display: inline-block, overflow: auto, float: left, etc. to the parent tag.)

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

2. Margin offset

- css overlaps the top and bottom margins of two adjacent tags.

ex) The vertical space between the two div tags below is 100px, not 150px.

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

- Add a new bfc element between the two tags in the situation above.

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

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

ps. Do you know how to copy and paste durumis html? ;;