inline,inline-block,block元素的區別

html元素分紅inline，inline-block, block元素

inline元素稱爲行內元素.inline元素的寬高之和元素內的內容有關。當有多個行內元素和行內塊級元素時，他們會並排排列，不會獨佔一行。

inline元素相較於inline-block元素和block元素最大的區別點是，該種元素不能設置寬高，行高（line-height），盒子模型中的margin-top和margin-bottom設置對於inline元素也是無效的，這個你們在使用中要注意，其餘的盒子模型中的屬性padding,margin-left,margin-right都是能夠正常使用，這個是inline元素和其餘類型元素的最大區別。

咱們經常使用的html中的行內元素有：span, i, b, label, a, img, addr,em ,strong等

inline-block元素稱爲行內塊級元素，咱們一般能夠將inline元素經過設置display: inline-block，將行內元素設置爲行內塊級元素。設置成行內塊級元素後就能夠設置元素的寬和高，從而能夠在網頁佈局中控制元素寬和高，從而實現符合需求的css佈局。行內元素在一般瀏覽器使用中會有3px bug的問題，就是兩個相鄰的inline-block元素之間會有3px的間隙，這樣每每會成爲網頁排版中的bug，一般狀況下咱們能夠經過設置包含inline-block元素的font-size屬性設置爲0，而後在inline-block元素中設置font-size。第二種是經過float浮動佈局來消除這種問題。inline-block元素有img

block元素稱爲塊級元素。相對於前兩種元素，塊級元素佈局會獨佔一行，能夠設置元素的寬高和行高。也能夠將塊級元素經過設置display: inline,inlie-block轉換成另外兩種元素。

經常使用的塊級元素：div，ul，li，dl，p，h等元素

剛纔提到的這三種元素能夠經過display: inline, inline-block,block相互轉換，可是再具體coding過程當中，咱們要遵循html的語義化原則，咱們儘可能使用相應的元素，而不是經過設置display屬性，但inline轉inline-block元素是比較經常使用的。其次對於html的嵌套原則，原則上inline元素是不可以嵌套inline-block,block元素的。