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>
实例:
嗯嗯