【網頁設計入門】05.區塊元素與行內元素、常見單位應用

-

 本篇文章將說明前篇【網頁設計入門】04 .Padding和Margin | 內間距與外間距 中提到的區塊元素與行內元素，並介紹網頁設計各種常見單位。


● 區塊元素(block)與行內元素(inline)

在HTML中加入的標籤元素，主要分為兩種類型：行內元素及區塊元素。根據不同類型的特性，可適用的CSS標籤也不同(比方說，對行內元素<a>直接設定區塊寬高是沒有效果的)，行內元素的特性是，如同文字由左到右排列，被放置於行內元素標籤內的物件會跟隨前項物件緊密排列直到溢出，物件的寬高是由物件內容撐開(無法設定margin/padding)；而區塊元素則如同<div>，是由上而下排列的塊面，預設寬度是100%，並可設定寬高，雖然標籤有它的預設類型，使用者仍可以在需要時使用display:block (常用) 或display:inline (較少使用)的標籤，將物件轉換成區塊或行內元素。

網路上有許多介紹行內元素與區塊元素的文章，請閱讀 HTML 塊和行內元素 這篇，瞭解行內元素和區塊元素的特性。(若還是不清楚，亦推薦區塊元素 行內元素 空元素特點? )


● 行內區塊 (inline-block) 

將元素轉換成區塊(block)特性，並以行內方式排列(由左至右)，且可以設定margin/padding、line-height (行高)。關於margin/padding的介紹可以參考 【網頁設計入門】04 .Padding和Margin ，還不清楚inline-block和inline、block特性的話，可以參考 CSS教學-關於display:inline、block、inline-block的差別 這篇。

※補充inline-block的應用技巧文章：


●常見單位應用

除了常見的絕對單位px、文字單位pt，針對網頁在不同應用裝置上的顯示需求，另有em/rem/vw/vh/vmin/vmax等適應裝置的相對單位可以運用，推薦閱讀文章：

［文字單位em與rem］



留言

張貼留言

這個網誌中的熱門文章