在這次的 CSS 教學為什麼我們需要學習和了解元素的顯示模式呢? 在你實際上應用時你是不是已經開始注意到有一些狀況，在 HTML 中的 H1 系列的標題標籤中是不是獨占一行，你在使用 <p> 段落標籤並不是獨佔一行，開始會思考哇勒! 到底哪些元素標籤是獨占一行那些並不是，以上這些你如果沒有發現這些問題沒關係，本篇會跟你說這問題會影響到日後我們在進行版面配置規劃會出現很大的問題，勢必有必要了解一下唷!
- 元素的顯示模式是什麼?
- 元素的顯示模式的分類有哪些?
- 元素顯示模式能互相轉換嗎?
CSS 中什麼是元素顯示模式?
HTML 網頁的元素標籤非常多，你也不用去記他們的顯示模式是怎麼呈現，查到該元素標籤就直接使用打打看代碼看該功能是怎麼顯示在網頁中的就能夠知道，標籤元素顯示的模式了唷! 大家一般都是這樣去進行測試與調用的，所以不要去背多用就知道原理了。
只要了解它們的特點可以讓我們更好的去發揮佈局網頁，每一種 HTML 標籤都有自己的特點和種類，那當然它們的顯示也就不一樣，那到底什麼是元素的顯示方式呢? 簡單來說就是這個 HTML 元素標籤或是 CSS 元素到底是以什麼樣的方式來進行顯示，顯示在網頁上，你有想過這個問題嗎?
這樣是不是會比較好理解，也知道了為什麼以前有些 HTML 元素標籤是獨佔一行，有的不能夠獨佔一行還需要跟別人做鄰居例如 H 系列的標題標籤，為什麼它們都是能夠獨佔一行憑什麼呢? 為什麼 <p> 段落標籤不能獨佔一行還要跟別人分作鄰居呀! 為什麼不一樣呀!
那就是因為他們被分成不同種類、所有就有不同的顯示模式，那這些成千上萬的 HTML 元素標籤與 CSS 屬性一共可以分成兩大類，一般會分成塊元素和行內元素這兩種類型
- 塊元素 ( 獨佔一行 )
- 行內元素 ( 不獨佔一行，可以同時很多行內元素當鄰居 )
CSS 中什麼是塊元素?
那接接下來的幾小節我們要來討論這兩大類哪一些元素標籤是屬於塊元素那些是屬於行內元素，當然小青我只會說我們一般前端人員會最常使用到的 HTML 元素標籤，使用頻率不高的本篇我就不太會提到唷!
常見的塊元素有 <h1> ~ <h6>、<p>、<div>、<ol>、<ul>、<li>…等，其中我們以後會用到佈局版面規劃的 <div> 盒子標籤是用最兇的，它也是最典型的塊元素唷!
- <h1> ~ <h6> ( 標題標籤 )
- <p> ( 段落標籤 )
- <div> ( 盒子標籤 )
- <ol> ( 有序列表標籤 )
- <ul> ( 無序列表標籤 )
- <li> ( 列表標籤 )
CSS 塊元素有什麼特點?
在前面我們已經知道了塊元素標籤是什麼了，還有最常使用到的 HTML 元素標籤是屬於塊元素的，再來我們來看看塊元素有哪些特點吧! 當然要先了解塊元素有什麼特殊功能，才會在應用時比較輕鬆不然盲目使用是很危險的。
塊元素的特點:
- 獨佔一行，誰都不能當它鄰居
- 高度、寬度、外邊距、內邊距，都可以控制
- 寬度會默認容器的 100%
CSS 塊元素會自動獨佔一行?
看完前面特點是不是好像是懂非懂，沒關係接下來你跟著寫代碼，一定很快就能理解其中的塊元素奧妙，下列先寫出 HTML 結構骨架，在裡頭創建一個 <div> 盒子標籤，來看看是不是真的獨佔一行。
<body>
<div>
我獨佔一行
</div>
Hello
</body>
當你寫完你會發現 <div> 盒子標籤裡的我獨佔一行就是會真的只獨佔一行，底下的 Hello 就會被擠到下面去，不能跟 <div> 盒子標籤當作鄰居，這就是塊元素的獨佔一行特色，讓任何人都不能跟它擠!
CSS 塊元素能改變塊的上下左右?
塊元素其實是可以控制長度、寬度的大小，當然還有外邊距以及內邊距的控制唷! 不信的話我們來創建一個 HTML 結構骨架，在裡頭創建一個 <div> 盒子標籤。
<body>
<div>
我獨佔一行
</div>
Hello
</body>
創建好後我們來試試看使用 CSS 屬性來控制 <div> 盒子模型標籤試試看，改變它的長度、寬度、外邊距、內邊距試試看，到底是真的如所說的那樣能夠改變還是說是亂說的!
<style>
div {
width: 300px;
height: 300px;
background-color: blue;
}
</style>
當我們把 CSS 屬性都寫好，按照道理 <div> 盒子標籤是不是獨佔一行沒錯吧! 但是我們給了寬度 300px 這也沒問題還有高度也是 300px，背景顏色給藍色讓我們好觀察，是不是個區塊就整個被撐開來了，但是裡頭的字大小還是固定的，從整體來看這整個那麼一大塊還是是一行唷! Hello 文字還是上不去 <div> 盒子標籤那一行的。
就算 <div> 盒子標籤後面沒用完，還是不會給 Hello 上來，<div> 盒子標籤後面沒用完的部分還是它的家誰都不能侵略侵占它的土地，我的還是我的誰都不能用。
CSS 塊元素不給寬度會怎樣?
我們可以看上一小節的 CSS 屬性，如果你不給 width 的話，就是不給值不使用這個 CSS 屬性值的話會發生什麼事?! 它就會默認成跟它的父親一樣寬，也就是說會直接占滿整個行這樣理解了嗎? 什麼?還是不理解唷! 沒關係可能你不太懂默認成跟它父親一樣寬，沒關係我們看下列 CSS 代碼屬性吧!
<style>
div {
height: 300px;
background-color: blue;
}
</style>
我們刪除了 width 的寬度了，接下來來看看 HTML 元素標籤裡面的 <div> 盒子標籤的父親是誰，這樣很清楚了吧! <div> 盒子標籤的父親就是 <body> 標籤，那 <body> 標籤就是跟我們的整個頁面是一樣寬的，那塊元素不給寬會發生什麼呢?! 我相信你很清楚了吧! 沒有給寬就是會看它父級多寬它就多寬唷!
<body>
<div>
我獨佔一行
</div>
Hello
</body>
CSS 塊級元素裡面可以放什麼?
其實每個塊都是一個容器，容器能裝什麼都可以也是有人會說盒子啦! 反正容器 ( 盒子 ) 就是能放什麼都可以，就像你寄包裹你裡面能放什麼都可以，你塞得下就放，那回過頭來看裡面也可以放盒子的盒子、盒子的盒子的盒子，就跟俄羅斯娃娃一樣一直套一樣的娃娃，是不是沒問題呀! 只是變成越來越複雜而已
<body>
<div>
我是盒子01
<div>
我是盒子02
</div>
</div>
</body>
最後注意:
- 文字類的元素不能使用塊級元素，也就是說不能讓 <div> 盒子標籤在它裡面
- 文字類元素就是指 <p> 段落標籤，它就是裡面存放文字的
- <h1> ~ <h6> 也是文字塊級標籤，裡面也不能放塊級元素
只要該 HTML 元素標籤裡面有放文字的，就不能在放塊級元素標籤
<body>
<p>
<div>
我是盒子
</div>
<p>
</body>
我們這樣寫後用網頁打開來看，你會看見顯示沒問題呀! 哪有阿?!! 你按右鍵或是 F12 檢查代碼你會發現，<p> 段落標籤原本包覆著 <div> 盒子標籤，會變成脫離開來唷!!! 還會再多一個 <p> 段落標籤!
如果你記不起來就把塊元素想成很霸道的人，就是要獨佔一行，誰都不能侵占我土地。
CSS 中什麼是行內元素?
接下來我們再來看看 HTML 中哪些是屬於行內元素呢?! 行內元素到底有哪些特點呢? 最常見的行內元素有 <a>、<strong>、<b>、<span>、<em>、<i>、<u>、<del> 其中最典型代表是 <span> 標籤，以上這些就是比較常見的行內元素，有些人還會稱行內元素為內聯元素唷!
一樣這些行內元素特別的多妳不需要全部背起來，說這屬性是塊元素還是行內元素，用的時候你只需要觀察這個元素標籤是會獨佔一行還是它會跟別人一起當鄰居就可以唷囉!
CSS 行內元素有什麼特點?
經過我們上一節提到，行內元素就是能夠一行有好幾個元素當作鄰居和平共處，並不會像塊元素一樣很兇字幾獨佔一行，就算沒用到別人也不能來它家，行內塊元素就不會那麼霸道唷! 那我們來看看行內塊元素有哪些特點吧!
行內元素的特點:
- 相鄰行內元素在一行上，可以顯示多個
- 不能設置行內元素的高度與寬度
- 默認寬度與高度就是行內元素內部容器的寬度
- 行內元素只能容納文本或是其他行內元素
以上就是行內元素的特點! 如果還是很不明白我們再來好好詳細介紹在實際開發中我們是怎麼使用的。
點我瞭解 小青如何每月多賺5位數台幣CSS 行內元素真的能相鄰嗎?
是的真的可以，他們可以與行內元素個別當鄰居，並不會各自獨佔一行，我們先寫出 HTML 元素標籤在裡頭創建 3 個 <span> 標籤，來看看真的能互相當鄰居嗎?
<body>
<span>我是小青</span>
<strong>我不是小青</strong>
</body>
是不是真的可以當鄰居呢?! 沒錯吧!!!
CSS 行內元素能設置寬度嗎?
好問題! 其實行內元素不能像塊元素自己設置寬度、高度，塊元素就像能夠設置字幾的庭園多寬多常都可以，而行內元素沒有庭院它比較像是公寓那種，並沒有庭院花園是固定死的，那鄰居也跟妳是住在同一個公寓當然也是一樣唷! 下列我們來看是不是真的是這樣，一樣我們創建一個 HTML 元素標籤，在寫一個簡單的 CSS 直接去改變 <span> 元素標籤的寬度、高度、背景顏色，看能不能像塊元素那樣起效果呢?!
<body>
<span>我是小青</span>
<strong>我不是小青</strong>
</body>
<style>
span {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
你會發現寬度與高度效果是沒有的，但是背景顏色我們可以改唷!
行內元素會自動默認容器的寬和高?
這是什麼意思呢? 就是行內本身包覆的內容是什麼，通常是文本，文本的大小就是行內元素的大小唷! 如果你文本的字體用很大納撐開來的行內元素就會很大這沒問題吧! 但我們前端開發者不會沒事把字體都弄很大，這樣給瀏覽者觀看體驗會不佳。
行內元素只能容納文本或是其他行內元素?
這句話是什麼意思呢?! 就是說行內元素裡面還可以放行內元素或是文本，<span> 元素標籤裡面還是可以放 <span> 元素這樣知道了吧! 但是行內元素禁止放 <div> 塊元素標籤唷! 不信的話你可以放放看，看會發生什麼事，先試錯才能預防以後的大錯。
行內元素最後要注意
- <a> 鏈結裡面不能再放 <a> 鏈結
- 特殊情況 <a> 錨點鏈結可以放塊元素，請記住不是每種都可以
- 通常 <a> 錨點鏈結可以放塊元素，但我們還是會用轉換的方式最安全，後面會講解
以上就是所有行內塊元素的用法以及需要注意的事項，但有時候行內塊元素在特殊情況會放塊元素進去，但是一般前端人員部會那麼做只是知道有那方法，為了讓網站穩定性很高，會把 <a> 錨點鏈結元素標籤進行轉換，轉換成塊級元素，這邊你可能就會想哇賽行內塊元素可以變成塊元素唷!
沒錯可以互相轉換塊元素也夠變成行內元素，在後面小青我講解這個用法，讓你在特殊場合還是根據你的需求場景去進行轉換，這樣就能提升效率，也不會因為因為獨佔一行還是當鄰居感到困擾了。
點我瞭解 小青如何每月多賺5位數台幣CSS 中什麼是行內塊元素?
根據前面的介紹與學習，你應該了解了什麼是塊元素什麼是行內元素了吧! 以及他們個別是用的場景，接下來我們來看看行內塊元素，你看它中文意思行內 + 塊就是這兩種都有的意思，這種元素特殊就特殊在你很少能在 HTML 元素標籤裡面真的查找到這種元素標籤的!
你可能會說什麼意思呀? 其實很好理解現在社會中存在者兩種人很好辨認，一種是男人一種是女人，這你沒意見吧，大部分我們能夠很好辨認出來，但其中有些男生他們的性向卻是女性，這個就沒辦法從外表認出來，女生也是，那行內塊元素就像是那個道理，
常見的行內塊元素有 <img />、<input />、<td> 它們同時兼具行內元素以及塊元素的特點唷! 行內塊元素有些人還會稱為行內塊級元素
CSS 行內塊元素有什麼特點?
現在我們前面介紹了行內塊元素是什麼後，接下來我們來看看主要的行內塊元素的特點有哪些?!
- 相鄰的行內塊元素中間會有一個空格縫隙
- 會默認寬度與高度為內部內容大小
- 高度與寬度、內邊距、外邊距都能夠控制
CSS 行內塊元素相鄰會有空隙?
沒錯一行上可以有很多行內塊元素，跟行內元素是一樣的都能夠有鄰居但是! 行內塊元素會與行內塊元素之間會有一個空格縫隙，你可以想它們為了保險起見中間就是要有防火巷這是行內塊元素的特點我們來新建一個 HTML 結構，在裡面創 2 個 <input /> 表單控件來看看是不是中間真的有一個空格縫隙隔開呢?!
<body>
<input type="text" />
<input type="text" />
</body>
當你自己寫寫看後在網頁中果然出現兩個表單，中間是真的有空格隔開，這就是行內塊元素的特點，一行能夠多行顯示，中間會有空格隔開。
CSS 行內塊元素會自動默認容器的寬和高?
對的行內塊元素會自己默認容器的寬度與高度，容器內的大小就會決定行內元素的大小唷! 這點是不是跟行內元素是一樣的沒錯! 它也是也有這樣的功能，不信的話你可以自己試試看容器多大它就多大，這邊我們插入<img /> 圖片和 <input /> 表單控件試試看。
<body>
<img src="#" />
<input type="text">
</body>
你可以發現會根據不同種的元素標籤自行默認成該容器中的原始大小的，前提是先不加入 CSS 屬性去改變。
點我瞭解 小青如何每月多賺5位數台幣CSS 行內塊元素可以改變寬與高?
是可以的，行內塊元素還有塊元素的特點，能夠改變寬度、高度、外邊距、內邊距，依照你的需求你怎麼改就怎麼改，就相當於我們在當初一開始學的塊元素的特點，只是差別在於行內塊元素不會獨佔一行，下列我們來試試看改變之前的 HTML 中的行內塊元素標籤吧!
<style>
input {
width: 350px;
height: 450px;
}
</style>
以上這些特點你就會發現哇賽! 這麼猛行內塊元素就是有行內以及塊元素的特點也，是的沒錯唷!
- 一行能設置多個行內塊元素
- 能夠設置寬度、高度、外邊距、內邊距
只要符合這兩點就是行內塊元素，但是行內塊元素非常少的
CSS 顯示模式能夠轉換?
這個在我們實際開發經常去使用，前面我們不是說塊元素和行內元素之間的特點，以及還有雙重屬性的行內塊元素對不對，其實我們還可以用一些方法直接把塊元素轉換成行內元素，或是把行內元素轉換成塊元素，這樣我們在使用上就沒有限制了，簡單來說就是能轉換成別種模式特性唷!
我們來先寫個 HTML 結構骨架，使用個 <a> 錨點鏈結來講解，<a> 錨點鏈結就是行內元素沒錯吧! 你應該還記得，可以一行放好多個 <a> 錨點鏈結標籤，那今天我們想要讓版面形成一個區塊，讓點擊範圍更大，讓用戶點擊到的範圍更大，如果是原本的話沒有寬度和高度是不是點及的範圍很小!
<body>
<a href="#">我是鏈結</a>
</body>
但是你可能會想不對啊! <a> 錨點鏈結標籤是行內元素捏! 怎麼是塊元素呀?! 這時候我們就需要用到轉換的功能，把行內元素轉換成塊元素，這樣我們就可以調整寬度與高度了能大達成我們的目的把點擊範圍區塊加大，那問題來了要怎麼轉換呢?
- display: block;
- block 就是塊的意思
<style>
a {
width: 200px;
height: 200px;
background-color: blue;
display: block;
}
</style>
那可以把行內元素賺換成塊元素，那是不是可以把塊元素轉換成行內元素? 沒錯唷! 那你可能就會想那須要怎麼做才能達到呢? 其實很簡單只需要在 CSS 屬性中的 display 值給 inline，我們在創建一個HTML 結構這次裡面來寫 <div> 盒子標籤，因為他是塊元素你應該沒忘記吧!
- display: inline;
- inline 就是行內的意思
<body>
<div>我是盒子01</div>
<div>我是盒子02</div>
</body>
創建好盒子後我們再來補一下 CSS 屬性中的寬度以及高度和背景顏色，最後再來個 display: inline 來看看真的有沒有變成行內元素。
<style>
div {
width: 200px;
height: 200px;
background-color: blue;
display: inline;
}
</style>
當你完成後你在你的網頁上你真的會看見這兩個盒子模型真的變成行內元素也! 一行顯示兩個盒子，但是它們的高度與寬度已經不能去使用了，兩個盒子中間也出現空白空隙，這很熟悉吧! 這些就是行內元素的特徵!
點我瞭解 小青如何每月多賺5位數台幣CSS 轉換總結
現在我們不管原本標籤是塊元素或是行內元素，甚至是行內塊元素，只要根據我們使用的場景我們能夠自由的去進行轉換成想要的效果囉! 至於怎麼轉換呢? 是需要透過 CSS 屬性值 display 進行改變就可以了，那其實前端工程師最常使用的是 display: block; 唷! 因為布局版面需要撐開寬度與高度。
- 轉換成塊元素: display: block; ( 使用頻率最高 )
- 轉換成行內元素: display: inline; ( 使用頻率低 )
- 轉換成行內塊元素: display: inline-block; ( 使用頻率次高 )
CSS 的元素顯示模式總結
那終於我們說完了這三種複合元素了，你還記得有哪三種嗎? 以及他們各至適用的場景，還有他們各自有什麼優點呢? 如果忘記了沒關係在回去該節好好的思考為什麼當初開發者會想要發展出這樣的應用呢? 試著去思考如果沒有這三種功能，你需要用到什麼樣的方法才能解決，要記得任何方法都可以完成任務，大家都可以完成那在來就是要看誰能用最少的代碼就能完成，也就是效率越高。
就像今天我們不考慮預算出國到美國，誰最快? 當然是坐飛機，誰最慢當然是用游泳的那位，反正方法很多種，那如果今天是有預算的那結果可能又會更不同了，但我可以跟你說在往後開發都會因為預算的問題而使用各種方法來嘗試寫法解決問題，因為是在有條件之下去完成任務那當然又更不同了，所以學習更好的方法就必須了。
| 元素模式 | 元素排列 | 設置樣式 |
| 塊級元素 | 獨佔一行 | 能設置寬度與高度 |
| 行內元素 | 一行能放多個行內元素 | 不能設置寬度與高度 |
| 行內塊元素 | 一行能放多個行內元素 | 能設置寬度與高度 |
那你還記得什麼是塊元素? 什麼是行內元素? 什麼又是行內塊元素嗎? 請試著說出他們最巨大的特色吧! 這樣才能檢驗你是否學會囉! 加油，共勉之。
點我瞭解 小青如何每月多賺5位數台幣
能看到這裡通常只有 1％ 的人，很感謝您可以閱讀到這裡（鞠躬）
本篇文章歡迎社群分享，可按分享按鈕，讓更多的人知道此篇文章
如果是引用本篇文章任何段落請附上本篇文章連結即可唷！
嚴禁搬運整篇文章到你個人部落格、寫成新聞稿
這麼做你會被任何搜尋引擎懲罰 Ban 掉
如需合作請右上角服務項目 -> 聯繫我們
by 小青