CSS 尺寸屬性
在網頁製作過程中,我們可能需要設定元素的高度,寬度,間距等等操作,這需要我們使用一些尺寸 (Dimension)屬性。
1. height屬性
#height屬性可設定一個元素的高度。
繼承性:No
可能的值
#值 說明
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 屬性繼承性: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>################# #######實例:################
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实例</title> <style type="text/css"> p { max-height:10px; background-color:yellow; } </style> </head> <body> <p>北京时间周四凌晨两点公布的美联储9月纪要显示,如美国经济持续走强,几位有投票权的决策者认为利率应该“很快”会上升。 美联储在会议纪要中指出“几位委员们认为,如若经济进展如预期般展开,那么较快提高联邦基金利率将是合适的”。</p> </body> </html>