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>
################# #######實例:################
<!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>






################################ ### ##
繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实例</title> <style type="text/css"> img.normal { height:auto; } img.big { height:50%; } p.ex { height: 30%; width: 40%; } </style> </head> <body> <img class="normal" src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" width="195" height="184" /><br> <img class="big" src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" width="120" height="90" /> <p class="ex">昨日香港银行同业人民币拆借利率出现明显飙升,隔夜离岸人民币Hibor涨82个基点报2.8284%, 创9月21日以来新高;一周离岸人民币Hibor涨262个基点报6.7610%,创9月20日以来新高,意味着离岸人民币流动性吃紧。</p> </body> </html>