一、元素類型分類

html元素可分為三大類：塊元素，內聯元素，可變元素

1.塊元素

常見塊元素：div,p,ul,ol,li,dl,dt,dd,form,hr,table,tr,td,fieldset,h1,h2,h3,h4,h5,h6

塊狀元素特點：

a）塊狀元素會以塊的形式顯示為一個矩形區域

b）塊狀元素默認獨占一行，自上而下排列

c）塊狀元素可以定義自己的寬度和高度，以及盒模型中的任意padding,margin,border值

d) 塊狀元素可以作為一個容器來包含其他的塊狀元素和內聯元素

註：默認有margin，padding的塊狀元素

body,h1,h2,h3,h4,h5,h6,p,ul,dl,dd,td,fieldset

2.內聯元素(行內元素)

常見內聯元素：a,span,i,em,strong,b,label,img,input

內聯元素特點：

a) 內聯元素默認在一行逐個進行顯示

b）內聯元素不能定義寬度和高度，它的寬高由內容決定，也以一個矩形區域顯示

c) 內聯元素設置與高度相關的值沒有效果或顯示不準確（如margin-top,margin-bottom,padding-top,padding-bottom,border,line-height等）

d) 內聯元素可以設置與寬度相關的屬性（margin-left,margin-right,padding-left,padding-right）

內聯塊狀元素：img,input,select,textarea

內聯塊狀元素特點：

a)即具有內聯元素特點在一行顯示，又具有塊狀元素特點，可以定義寬和高

b)可以給內聯塊狀設置任何margin，padding,border

3.可變元素

根據上下文關系決定元素類型（可變的範圍是塊元素和內聯元素）

二、元素類型轉換

語法： display:block|inline|inline-block|list-item|none;

1.block

將元素類型轉換為塊狀元素，是大部分塊狀元素的默認display屬性值

2.inline

將元素類型轉換為內聯元素，是內聯元素的默認display屬性值

3.inline-block

將元素類型轉換為內聯塊狀元素，是內聯塊狀元素的默認display屬性值(如img，input)

註: 當元素設置了inline-block後，換行符，空格都會占據一定的空間(寬度)

只有inline-block類型的元素支持vertical-align屬性

4.none

將元素隱藏不顯示

註：如果想讓元素再次顯示，設置元素的默認display屬性值即可

5.list-item

將元素類型轉換為列表，是li的默認display屬性值

註：當給元素設置了float屬性後，就相當於元素設置了display:block;

三、置換元素和非置換元素

1.置換元素

瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容。

如：img的src屬性決定了圖片在網頁中的顯示效果

input的type屬性決定了在瀏覽器中呈現一個什麽樣類型的input控件

2.非置換元素

html的大多數元素是不可替換的非置換元素，即其內容直接表現在瀏覽器

從零開始學習前端開發 — 3、元素類型