HTML 行內元素和塊級元素 全解析

行內元素（inline elements）和塊級元素（block-level elements）

1. 行內元素：a、abbr、acronym、b、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、samp、select、small、span、s、del、strike、strong、sub、sup、textarea、tt、u、var等

2. 塊級元素：address、blockquote、center、dir、div、dl、ul、ol、li、fieldset、form、form、*hn、hr、menu、noframes、frames、noscript、p、 pre、table等

   • 兼容性：display:inline-block;*display:inline;*zoom:1;
   • 行內元素：會在水平方向排列，不能包含塊級元素，設置width、height無效(可以設置line-height)，margin、padding上下無效。
   • 塊級元素：各佔據一行，垂直方向排列，可以包含行內元素。
   • 塊級元素的 width 默認爲 100%，而內聯元素則是根據其自身的內容或子元素來決定其寬度。

CSS display 屬性的常用值:

• none // 此元素不會被顯示
• block // 此元素將顯示爲塊級元素，此元素前後會帶有換行符
• inline // 默認。此元素會被顯示爲內聯元素，元素前後沒有換行符
• inline-block // 行內塊元素，既具有block的寬度高度特性又具有inline的同行特性
• http://www.w3school.com.cn/cssref/pr_class_display.asp

補充:

• display 屬性規定元素應該生成的框的類型，可以通過display:inline和display:block或者display:inline-block改變元素的框的類型。
• 默認情況下，block元素寬度自動填滿其父元素寬度。
• 塊級元素即使設置了寬度,仍然是獨佔一行。