HTML元素分類
根據css顯示分類，HTML元素被分為三種類型:塊狀元素，內聯元素，可變元素
1.塊狀元素（block element）
1）塊狀元素在網頁中就是以塊的形式顯示，所謂塊狀就是元素顯示為矩形區域，常用的塊狀元素包塊div,dl,dt,dd,ol,ul,(h1-h6),p,form,hr,table,tr,td等；
2）默認情況下，塊狀元素都會佔據一行，通俗地說，兩個相鄰塊狀元素不會出現並列顯示的現象；默認情況下，塊狀元素會按順序自上而下排列。
3）塊狀元素都可以定義自己的寬度和高度。
4）塊狀元素一般都作為其他元素的容器，它可以容納其它內聯元素和其它塊狀元素。
我們可以把這種容器比喻為一個盒子。
width不寫 默認100%；
2.內聯元素（inline element）（或是行內元素、行間元素、內嵌元素）
1) 常見的內聯元素如：a,span,i,em,strong,b，img，input等
2) 內聯元素的表現形式是始終以行內逐個進行顯示；
3) 內聯元素沒有自己的形狀，不能定義它的寬和高,它顯示的寬度、高度只能根據所包含內容的高度和寬度來確定，它的最小內容單元也會呈現矩形形狀；
4) 內聯元素也會遵循盒模型基本規則，如可以定義padding,border,margin,background等屬性，但個別屬性不能正確顯示;
3、可變元素
需要根據上下文關係確定該元素是塊元素或者內聯元素塊元素(block element)
display: block/inline//list-item/table-cell/none;
大概有這麼六種轉變。盒模型主要下面三種轉變。
Block: 塊級元素，可以設置寬高，獨佔一行。
Inline: 內聯元素，
inline-block：既能設置寬高 有能一行顯示。
下面是主要的用法
不定款導航居中
Ul{text-align:center}
Li{display:inline-block}
單行居中多行靠左
.all{text-align:center;}
.all div{display:inline-block;text-align:left;}
圖片垂直居中
Img{vertical-align:middle;}
Span{hieght:100%;width:0; vertical-align:middle;display:inline-block;}
閱讀更多 千鋒H5 的文章
