HTML元素分類【三種類型】

 

在CSS中，html中的標簽元素大體被分為三種不同的類型：
塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。

塊狀元素：display:block內聯元素：display:inline
內聯塊狀元素：display:inline-block

常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的內聯元素有：
<a>、<span>、
、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的內聯塊狀元素有：
<img>、<input>

內聯(行級)標簽：標簽在一行內，寬度與高度由內容決定，只有在內容超過HTML的寬度時，才會換行

塊狀標簽：標簽獨占一行，可指定寬、高

內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點，代碼display:inline-block就是將元素設置為內聯塊狀元素。(css2.1新增)，<img>、<input>標簽就是這種內聯塊狀標簽。
inline-block 元素特點：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設置

區別：
   
   是否占一行    能否指定高寬    垂直方向的margin    內聯    否    否    否    塊    是    是        是    是

 （擴展）隱性改變display類型：
    有一個有趣的現象就是當為元素（不論之前是什么類型元素，display:none 除外）設置以下 2 個句之一：

1. position : absolute 或 position:fixed
2. float : left 或 float:right

display:inline-block的方式顯示，當然就可以設置元素的 width 和 height 了且默認寬度不占滿父元素。