文章同步發布於個人部落格

說到骨架都會想到原神裡稻妻那隻蛇神奧羅巴斯的超巨大蛇骨架 (x)。
HTML 是 web 開發初學者會碰的第一個非程式語言的架構語言 (HTML 哭暈在廁所，它竟然不算程式語言)，但他對 web 的重要性相當於鋼筋水泥對於建築物那樣重要。
這裡不會去從頭開始說 HTML 到底該怎麼用，著重在那些面試時有機會會被問起的問題。

事實上，實務開發時通常都是 Vue 或 React (Angular 真的不在我的關注範圍...) 搭配合適的 UI 框架 (Quasar、NextUI...等) 之類的來進行開發，通常會把很多 HTML、CSS，甚至說，一些 JavaScript 的部分都交給了這些框架來處理。
很常實務上就是直接使用框架提供的 component 來進行開發，說真的，我最常寫到的幾個 HTML element 大概是 <div>、<span>、<p> 這種非常單純定義區塊或文字的 element，很多時候，這裡我用 Quasar 舉例，都會為那些常見的 web 元素寫好一個 component，例如：q-btn、q-input...等。
但其實面試這裡最常被考的就是因為過於習慣框架開發而忽略的一些基本問題，所以咱們來聊聊 HTML 最基本的問題 - block and inline element。

Block element 與 Inline element

我之前曾經為了跳槽去面過高雄某軟體公司，當時筆試題目有一題我印象有些深刻：

請問 <a href="..." style="width: 100px;" /> 為何樣式沒有作用？

Well，這個乍看之下是在考 CSS，如果思路真的往 CSS 那邊跑，開始思考莫非 <a> 不吃 width？嗯，那可能有點不妙。
其實這題最大的癥結點出在 <a> 是一個 inline element，而 inline element 雖然可以設定 width、height，但預設情況下大小還是跟著內容走，設了也不會改變它的寬高，必須改成 block 或 inline-block 才會生效。

但通常這種基本知識都很常被拋在腦後，所以來複習一下 block-level element 與 inline element 的差異：

有趣的是有個東西叫做 inline-block，透過 display: inline-block 可以讓一個 inline element 具有 block-level element 的特性，這個情況下設定 width、height 是生效的，但它仍然與其他 inline 或 inline-block 元素並排顯示 (重申一次，block 會自己吃掉一行)。

另外 padding 跟 margin 在 block-level element 與 inline element 上的表現也略有不同：

1. block-element：margin 和 padding 上下左右都生效，會影響整行的高度和間距。
2. inline-element：
   • margin 只有左右影響佈局，上下雖然存在但不會推開上下行距離。
   • padding 上下雖然會影響背景與可點擊範圍，但不會改變行高。

稍稍 murmur 幾句

其實這種問題說他是因為是基礎所以考出來也沒錯。
但實務上在套用了很多現代 UI framework 的情況下，或是精通 flex、grid 的情況下 (也是 UI framework 背後排版的那一套)，其實不用太在意什麼是 block-level element 或 inline element，因為一旦套用了 flex 或 grid，所有的元素都可以被視為 block-level element，而現今最主流的排版用法就是 flex 或 grid。
但面試有機會考，就還是稍微記一下唄。