CSS 尺寸屬性
在網頁制作過程中,我們可能需要設置元素的高度,寬度,間距等等操作,這就需要我們使用一些尺寸 (Dimension)屬性。
1. height屬性
height屬性可設置一個元素的高度。
繼承性:No
可能的值
值 ? ? ? ? ? ? ??描述
auto ? ?默認。瀏覽器會計算出實際的高度。 ? ?
length ? ?使用px、cm等單位定義高度。 ? ?
% ? ?基于包含它的塊級對象的百分比高度。 ? ?
2. line-height 屬性
line-height屬性可設置行間的距離。
注釋:不允許使用負值。
繼承性:Yes
可能的值
值 ? ? ? ? ? ? ? ?描述
normal ? ?默認。設置合理的行間距。 ? ?
number ? ?設置一個數字,此數字會與當前的字體尺寸相乘來設置行間距。 ? ?
length ? ?設置一個固定的行間距。 ? ?
% ? ?基于當前字體尺寸的百分比行間距。 ? ?
3. max-height 屬性
max-height屬性可設置一個元素的最大高度。
繼承性:No
可能的值
值 ? ? ? ? ? ? ? ?描述
none ? ?默認。定義對元素被允許的最大高度沒有限制。 ? ?
length ? ?定義元素的最大高度值。 ? ?
% ? ?定義基于包含它的塊級對象的百分比最大高度。 ? ?
4. max-width 屬性
max-width可定義一個元素的最大寬度。
繼承性:No
可能的值
值 ? ? ? ? ? ? ? ? ?描述
none ? ?默認。定義對元素的最大寬度沒有限制。 ? ?
length ? ?定義元素的最大寬度值。 ? ?
% ? ?定義基于包含它的塊級對象的百分比最大寬度。 ? ?
5. min-height 屬性
min-height屬性可設置元素的最小高度。
繼承性:No
可能的值
值 ? ? ? ? ? ? ? ? ? ? ?描述
length ? ?定義元素的最小高度。默認值是0。 ? ?
% ? ?定義基于包含它的塊級對象的百分比最小高度。 ? ?
6. min-width 屬性
min-width屬性可設置一個元素的最小寬度。
繼承性:No
可能的值
值 ? ? ? ? ? ??描述
length ? ?定義元素的最小寬度值。默認值:取決于瀏覽器。 ? ?
% ? ?定義基于包含它的塊級對象的百分比最小寬度。 ? ?
7. width 屬性
width屬性可設置一個元素的寬度。
繼承性:No
可能的值
值 ? ? ? ? ? ? ? ? ?描述
auto ? ?默認。瀏覽器可計算出實際的寬度。 ? ?
% ? ?定義基于父元素寬度的百分比寬度。 ? ?
length ? ?使用px、cm等單位定義寬度。 ? ?
實例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>實例</title> <style type="text/css"> img.normal { height:auto; } img.big { height:120px; } p.ex { height:100px; width:100px; } </style> </head> <body> <img class="normal" src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" width="95" height="84" /><br> <img class="big" src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" width="120" height="90" /> <p class="ex">這是一段句子的高和寬是 100px.</p> </body> </html>
實例:
嗯嗯