為了讓元素的邊界格線看得更清楚，
這邊統一對<body>之外的所有元素加上outline
CSS
* :not(body){
outline: 3px orange solid;
}
display 屬性是CSS中的最大利器，透過他才能兜出各式各樣的版型，
但他也是大魔王之一，因為有非常多的值可以套用，也容易造成搞混
包括 block、inline、flow、flex、grid...
每種變化都可以顛覆一開始對元素的想像，
有機會再一一介紹
區塊元素就是預設為display: block的標籤
例如:<h1>~<h6><div>、<p>、<blockquote>、<pre><ol>、<ul>、<li><form>、<table>
等等
block有區塊、阻塞的意思，會貪心地盡可能佔滿整個版面，不論長度寬度如何都會占滿一行，
多個block會由上而下、一個接一個垂直排列
block是有骨頭的大男人，可對他直接設定width、height來限制他的生長範圍。
若將區塊元素變成 display: inline，就能打破框架！
能排在同一行的<h1>
HTML
...
<h1>原本的標題H1</h1>
<h1>原本的標題H1</h1>
<h1>原本的標題H1</h1>
<h1 class="after">變成inline的H1</h1>
<h1 class="after">變成inline的H1</h1>
...
CSS
.after{
display: inline;
}
行內元素就是預設為display: inline的標籤
例如:<span>、<em>、<textarea><strong>、<b>、<i><a>、<img><input>、<select>
等等
行內元素最愛"ㄎㄟˋ修"了，
會與區塊元素擠在同一行、也會與行內元素擠在同一行，
只會佔用必要的寬度，沒事不會另起新的一行。
多個inline間會由左至右、一個接一個個水平排列
由於inline沒骨頭、全身軟趴趴的，沒辦法直接設定width、height
就算設定了他也站不起來，只能透過他裡面的元素(兒子)來撐場面
若將行內元素設定為display: block就能讓他有骨頭。
能設定成超大範圍的<a>標籤
HTML
...
<a href="#" class="before">原本的a標籤</a>
<a href="#" class="before">原本的a標籤</a>
<a href="#" class="before">原本的a標籤</a>
<a href="#" class="after">變成block設定長寬的a標籤</a>
<a href="#" class="after">變成block設定長寬的a標籤</a>
...
CSS
.before{
width: 200px; /* 不起作用 */
height: 100px; /* 不起作用 */
}
.after{
display: block;
width: 200px;
height: 100px;
}
居然還可以在block與inline之間隨意轉換
HTML標籤沒有一開始想像的這麼死
搭配上CSS能有很多靈活運用的方法但也會納悶...
既然可以任意轉換，為何還要區分<div>與<span>標籤?
沒看到有中文翻譯，
inline-block 用英文來看的話是 noun-adj(名詞-形容詞)但中文順序好像是顛倒的，當兩個名詞擺在一起時：
珍珠芭樂是珍珠還是芭樂? -> 是珍珠形狀的芭樂
那太陽餅是太陽還是餅? 錢包是錢還是包?所以這大概只能翻譯成 行內-區塊 或者 區塊行內
其實inline-block算在行內元素，只不過能設定寬高，
(inline-block裡面的content會作為block呈現)
HTML
...
<span> span </span>
<span> span </span>
<span class="after"> inline-block span </span>
<span class="after"> inline-block span </span>
...
CSS
.after{
display: inline-block;
width: 200px;
height: 100px;
}
<p>來包住區塊元素(block)，雖然<p>本身是區塊元素<a>標籤中再包<a>標籤，雖然<a>本身是行內元素，但到底會點到哪個連結？<span>來包 inline 與 inline-block<div>來包 block
iThome鐵人賽
看影片追技術