與工程師的協作之路-那些年，我們一起混淆的CSS（三）
相關文章：與工程師的協作之路-那些年，我們一起混淆的CSS（一）與工程師的協作之路-那些年，我們一起混淆的CSS（二）
講完了position和float，其實layout的部分大概已經能cover到...可能有五成吧？
不過除了這些，還有一個很重要的語法需要讓大家了解一下～
進入今天的文章之前，先提醒一下～每個元素在不同瀏覽器上都有屬於自己的預設值（大小，外距…等），可以先把這個觀念搞清楚再繼續往下看！
在「與工程師的協作之路-那些年，我們一起混淆的CSS（一）」中，我們提到了position，之前有朋友把position和display排版方式混淆在一起～（其實對我來說更容易混淆的是float和display！）
切版有趣的地方就在於 不同的寫法都能成就一樣的結果 吧～所以每個人會遇到的問題也不同！
總之呢～今天就來簡單介紹一下display吧！
display
這個語法的值很多，大家可以上W3C先瀏覽一下！
今天挑幾個我比較常用的來講就好！
．none
這個屬性能用的地方很多！但是對「網站內容」要非常小心使用！
PM「隱藏用display:none就好了！很簡單！」
-----
RD「疑...這邊怎麼怪怪的...天阿！為什麼load這麼多東西然後都隱藏（冒汗）」
PM「我也是學過一點程式的！不用謝我了（得意貌）」
RD「...不能這樣改（而且CSS才不是程式！！）」不懂的東西就請詢問過專業人員的意見，別自以為會做，把人家本來規劃好的全都打亂了 ！！
如果是需要大量被隱藏的，例如說RWD在PC和Mobile需要被顯示的不同，建議請工程用程式來控制頁面資料的加減取捨，否則刻意隱藏過量已load的內容，很可能造成網站被列為 欺騙爬蟲 ，在SEO上大大扣分喔！
．inline、block和inline-block
這幾個語法都是用來改變元素的呈列屬性的。inline是將屬性改為「行間」；block是將屬性設為「區塊」；inline-block則是「行間區塊」。
那麼，這三個差異在哪呢～？
來看下圖：
block應該不太有問題～就是佔據整個寬幅，如果說position:flexd是皇后病，display:block種程度來說應該也可以算公主病（喂～）
inline和inline-block就比較不好分～
前面有說了各個元素在不同瀏覽器會帶有一些預設值，如果說剛好這個元素目前的內外距都是0的話，那看起來效果就會一樣！
所以範例我幫紅色元素增加了一點上下距離，讓差異看起來比較明顯！
可以看到使用了inline-block的元素撐開了上下的空間，但只設定了inline的元素還是乖乖排隊～
．flex與gird
這兩個語法是後來因應大量RWD網頁而生的，但Flex的支援度比Gird好一些，有機會再整理出來！
比較常用的大概介紹到這裡，如果想試試看其他效果又懶得自己寫範例的話（？），可以到這個連結去戳戳看喔！
如果這篇文章有幫到你，歡迎幫我拍拍手獎勵一下～
據說拍到50下會有好事發生喔 XD