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>
提交重置代码
高并发千万级数据库系统解决方案
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

哈哈哈

还那么多讲究呢

7年前    添加回复 0

学习ing

学习了

7年前    添加回复 0

末日的春天

背景颜色也可以随便设置

7年前    添加回复 0

橱窗的光

在网页制作过程中,我们可能需要设置元素的高度,宽度,间距等等操作,这就需要我们使用一些尺寸 (Dimension)属性。

7年前    添加回复 0

em的含义是什么?

[最新 数据分析师 的回答] em的含义是什么?-PHP中文网问答-em的含义是什么?-PHP中文网问答围观一下哦,学习一下。

时间:7年前

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~