在繪製 HTML CSS 時，版面布局往往不如預期，

我曾經經常求助於 Google 搜尋。

最近在觀看 Zerocho 的開發者訪談影片時，決定深入了解 CSS 的基礎知識。

- 我想了解塊級元素、內聯元素、邊界和對齊方式。

雖然我已經在經驗上了解這些概念，但還是需要整理一下。

■ 雖然我需要修改 CSS，但如果只是根據經驗進行調整，並按照視覺效果進行實作，則在響應式設計中會出現問題，或是在日後的維護時變得更加複雜。

1. 常規流

- 沒有什麼特別需要考慮的。所有元素都從上到下、從左到右排列。

* 在 durumis 上撰寫文章時，如果貼上 HTML 標籤，就會消失，您知道解決方法嗎？

 <div>
     <p>第一段落</p>
     <p>第二段落</p>
     <span>內聯元素 1</span>
     <span>內聯元素 2</span>

- p 標籤會產生兩個塊，span 標籤會在一行上繪製。

 第一段落
 第二段落

2. BFC (塊級格式化上下文)

- 主要用於構成布局。（構成塊，並在其中構成內聯元素。）

- 塊級元素的堆疊方式。

- 塊級元素如下。

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

- 元素內的內容長度與否，都會佔用父元素的整個寬度。（一行）

- 可以在塊內放置塊或內聯元素。

- 可以設定寬度、高度、邊界和填充。

 <div style="padding :10px;"> 
     <h1>標題</h1>
     <p>這是一段簡短的段落。 </p>

- div 標籤內產生兩行。

- BFC 建立的時間如下。可以隨時查詢。

• float 屬性非 none 時
• position 為 absolute 或 fixed 時
• display 為 inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid 時
• overflow 非 visible 時等等
  
  

3. IFC (內聯格式化上下文)

<p>
    您好！<strong> durumis </strong> 第二篇文章！
    <span style="color: pink;">喜歡</button> 按鈕請按一下。

- 在塊級元素內構成。（不分行）

- 無法直接設定寬度和高度。（會佔用內容的大小。）

- 只能套用水平填充和邊界。

- 內聯元素內只能包含內聯元素。

<span>、<a>、、<img>、<input> 等

那麼，什麼時候使用呢？

- bfc 用於處理浮動互動或邊界抵消。

1. 浮動互動

- 如果對子元素套用自由奔放的樣式，則父元素無法包覆。

（float、position absolute、fixed、display inline-block 等等...）

- 這時，對父元素使用 bfc 來構成布局。

（對父標籤套用 display: inline-block、overflow: auto、float: left 等等...）

<div class="父元素" style="display: inline-block;">
    <div class="子元素" style="float: left;">...</div>

2. 邊界抵消

- CSS 會重疊相鄰兩個標籤的上下邊界。

例如）以下兩個 div 標籤之間的上下間隔為 100 像素，而非 150 像素。

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

- 在上述情況下，在兩個標籤之間添加新的 bfc 元素。

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

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

附註：您知道 durumis 的 HTML 貼上方法嗎？