CSS元素分類

CSS元素分類

CSS元素大的分爲兩類：塊級元素和行內級元素
但行內元素能夠進一步分爲：行內替換(置換)元素、行內非替換(非置換)元素。

1、塊級元素與塊元素

塊級元素：元素會新起一行，並獨佔一行，如div、p、form等。display 屬性值爲：block, list-item, table, flex, grid 時，均可以將一個元素設置成塊級元素。同時塊級元素能夠定義元素的寬度和高度。

塊元素：塊元素是display屬性值爲block的元素。於是兩者是包含關係。

2、行內級元素與行內元素

行內級元素：行內級不會以新行開始，在一行文檔流中排列，若是超過容器寬度，則折行顯示。display 屬性值爲：inline, inline-table, inline-block, inline-flex, inline-grid 值均可以將一個元素設置成行內級元素。

行內元素：行內元素是display屬性值爲inline的元素。
行內塊元素：display屬性值爲inline-table, inline-block, inline-flex, inline-grid的元素

行內級元素分類：

一、 行內級置換元素
       一個元素不受CSS視覺格式化模型控制，CSS渲染模型並不考慮對此元素內容的渲染，且元素自己通常擁有固有尺寸(寬度，高度，寬高比)的元素，被稱之爲置換元素，如img、表單元素（包括input、select、textarea、select等）

行內級置換元素寬度的定義：

• 若寬高的計算值爲auto且元素有固有寬度，則width爲固有寬度；
• 若寬度的計算值爲auto且元素有固有寬度，則width爲固有寬度；
• 若寬度的計算值爲auto且高度有具體的計算值，同時知道高寬比，則能夠計算出width=高度/高寬比；
• 除此以外，當 width 的計算值爲 auto 時，則寬度的使用值爲 300px。

行內級置換元素高度的定義：

• 若寬高的計算值爲auto且元素有固有高度，則height爲固有高度；
• 若高度的計算值爲auto且元素有固有高度，則height爲固有高度；
• 若高度的計算值爲auto且寬度有具體的計算值，同時知道高寬比，則能夠計算出height=寬度*高寬比；
• 除此以外，當 height的計算值爲 auto 時，使用值不能大於150px，且寬度不能大於長方形高度的2倍。

二、 行內級非置換元素
       沒法給元素定義寬度和高度的行內級元素，除了行內級置換元素外剩餘的元素都是行內級非置換元素。

參考：http://blog.doyoe.com/2015/03...