1、什么是行內元素，什么是行內塊元素，什么是塊級元素

行內元素的特點：

不獨占一行，相鄰元素會在同一行顯示，直到一行排不下才換行。

寬度和高度由內容本身決定，無法通過width，height手動設置（設置無效）。

上下的margin和padding僅在水平方向有效，垂直方向不影響布局（不會推開上下元素）。

常見的行內元素：

<span>常用作文本容器，無默認樣式

<a>鏈接標簽，可嵌套文本或其他行內元素

<strong>文本加粗

<em>文本斜體

<code>表示代碼片段，默認等寬字體

<br>換行符（單標簽）

<img>其實默認是inline-block,但常被誤認為行內元素（見下方說明）

行內塊元素的特點：

不獨占一行，相鄰元素在同一行顯示（同行為內元素）

可以通過width，height手動設置寬高（同塊級元素）

水平和垂直方向的margin，padding都有效，會影響布局

常見的行內塊元素為：

<img>:圖片標簽，默認display：inline-block（可設置寬高，且不獨占一行）

<input>表單輸入框（文本框，按鈕等）

<button>按鈕元素

<textarea>多行文本輸入框

<select>下拉選擇框

塊級元素的特點：

塊級元素是一類默認以塊形式展示的元素，其核心特點是獨占一行空間，并會在前后自動換行，常用于構建頁面的整體結構布局（如布局，分區等）

塊級元素的主要特性：

獨占一行，默認情況下，塊級元素會占據其父元素的整個寬度（除非手動設置width），且前后元素會被強制換行，即一個塊級元素單獨占一行。

可設置寬高，可以通過width和heightcss屬性手動指定寬度和高度（默認寬度為父元素的100%，高度由內容撐開）

margin和padding全方向有效：水平和垂直方向的margin和padding都會生效，且會影響布局

可嵌套其他元素

常見的塊級元素:

<div>最常用的通用塊級容器，無默認樣式，用于布局分區

<h1>-<h6>標題元素

<p>段落元素，用于文本段落，默認由上下外邊距，不能嵌套塊級元素

<ul>/<ol>無序列表/有序列表，內部可包含<li>

<li>列表項，屬于會計元素，通常嵌套在<ul>或<ol>中

/* 將行內元素 <span> 轉為塊級元素 */
span { display: block; }/* 將塊級元素 <div> 轉為行內塊元素 */
div { display: inline-block; }