塊級元素和行內元素

塊級元素:顯示在一塊內,會自動換行,元素會從上到下垂直排列,各自佔一行。如p,ul,form,div等標籤元素。瀏覽器

行內元素:元素在一行內水平排列,高度由元素的內容決定,height屬性不起做用。如span,input等元素。spa

display屬性值:orm

描述
none

此元素不會被顯示。ci

block

此元素將顯示爲塊級元素,此元素先後會帶有換行符。文檔

inline

此元素會被顯示爲內聯元素,元素先後沒有換行符。input

inline-block

行內塊元素。(CSS2.1 新增的值)table

設爲none效果很明顯,就是讓元素脫離文檔流,不顯示,不佔文檔空間,而設爲’’其實就是設置爲元素默認屬性block或inlineform

inline-block屬性是CSS2.1新加值,IE8以上及其餘主流瀏覽器都已經支持,它可使元素像行內元素那樣水平一次排列,可是框的內容符合塊級元素行爲,可以顯示設置寬,高,內外邊距。margin

能夠將display屬性設置爲block,使行內元素表現的想塊級元素同樣,反之亦然。tab

相關文章