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>
新建檔案
<!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>
預覽
Clear
- 課程推薦
- 課件下載
課件暫不提供下載，工作人員正在整理中，後期請多關注該課程~ 