HTML元素定位

一切皆為框

div、h1 或 p 元素常常被稱為塊級元素（block element)。這意味著這些元素顯示為一塊內容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內元素”(inline element)，這是因為它們的內容顯示在行中，即“行內框”。

塊元素的盒子模型（box model of block element)

塊級元素：塊狀元素排斥其他元素與其位於同一行，可以設定元素的寬（width），高（height）和邊距（margin, padding)，塊級元素一般是其他元素的容器，可容納塊級元素和行內元素。常見的塊級元素有div, p ,h1~h6等。

行內元素：行內元素不可以設置寬（width）和高（height），但可以與其他行內元素位於同一行，行內元素內一般不可以包含塊級元素。行內元素的高度一般由元素內部的字體大小決定，寬度由內容的長度控製。常見的行內元素有a, em ,strong等。

行的塊元素：如果我們即想讓一個元素可以設置寬度高度，又想讓它以行內形式顯示，這時我們可以設置display的值為inline-block.

塊級元素轉行內元素

display:inline;

行內元素轉塊級元素

display:block;

元素轉行內塊元素（inline-block)

display:inline-block;

參考：

最後更新：2017-04-03 16:48:56