CSS:關於元素高度與寬度的討論 系列文章（二）

前言：在上一篇文章中討論了關於塊級非置換元素寬度與高度在不一樣狀況下的表現，在這篇文章中將詳細的闡述來自w3c定義的視覺化格式模型中對於各類元素的定義，以及行內級非置換元素與行內級置換元素寬度與高度的討論

元素的各類定義

塊級元素與塊元素

塊級元素(block-level elements)

那些視覺上會被格式化成塊狀的元素，通俗一點來講就是那些會換新行的元素。display 屬性值爲：block, list-item, table 值均可以將一個元素設置成塊級元素。

塊元素

display屬性值爲block的元素，是塊級元素的一個子集。

行內級元素與行內元素

行內級元素(inline-level elements)

行內級元素是那些不會爲自身內容造成新的塊，而讓內容分佈在同一行中的元素。display 屬性的：inline, inline-table, inline-block 值均可以將一個元素設置成行內級元素。

行內元素

display屬性爲inline的元素，是行內級元素的一個子集

置換元素與非置換元素

置換元素(replaced element)

一個內容 不受CSS視覺格式化模型控制，CSS渲染模型並不考慮對此內容的渲染，且元素自己通常擁有固有尺寸（寬度，高度，寬高比）的元素，被稱之爲置換元素。這類元素，瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。
常見的置換元素有這些：img,input,textarea,select,button等

非置換元素(non-replaced element)

w3c並無給出明確的非置換元素的解釋，但能肯定的是除置換元素以外，全部的元素都是非置換元素。

元素高度與寬度的討論

行內級非置換元素

寬度與高度的設置對於行內級非置換元素時不適用的，例如span,a

行內級置換元素

在前面已經結束過關於置換元素的概念，置換元素通常都是通常擁有固有尺寸（寬度，高度，寬高比）的元素，所以對於置換元素在不設寬度和高度的狀況下，元素寬高度等於元素自身固有尺寸。所以只用對當元素寬度或者高度設爲100%的狀況進行討論

1.有固有比例的元素

對於有固有比例的元素來講若是寬度與高度的一方有肯定的值，若另外一方並沒有設置值，則另外一方的計算值就由肯定的高度或者寬度乘以固有比例來獲得，所以對於有固有比例的元素，咱們只用討論高度與寬度中的一方便可，例如img元素

2.沒有固有比例的元素

對於沒有固定比例的元素，元素的寬度或者高度不會隨另外一方的變化而變化，例如input,textarea,select,button等

結論

對於行內級置換元素：在設寬度爲100%的狀況下
比照上一篇的例子，可自行進行實驗，這裏我就直接給出結論
若元素爲普通流元素或者浮動元素，元素寬度或者高度爲父元素寬度或者高度的100%；若元素爲絕對定位元素，元素寬度或者高度爲元素offset-parent寬度或者高度的100%；若元素爲固定定位元素，元素寬度或者高度始終爲body的100%

參考：
http://www.w3.org/TR/CSS21/conform.html
http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html
視覺格式化模型中的各類框
置換元素與非置換元素