CSS 尺寸 (Dimension)

更新时间：2020-05-25 16:52

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

所有CSS 尺寸 (Dimension)属性
属性描述
height设置元素的高度。
line-height设置行高。
max-height设置元素的最大高度。
max-width设置元素的最大宽度。
min-height设置元素的最小高度。
min-width设置元素的最小宽度。
width设置元素的宽度。
height 属性
值描述
auto默认。浏览器会计算出实际的高度
length使用 px、cm 等单位定义高度
%基于包含它的块级对象的百分比高度
inherit规定应该从父元素继承 height 属性的值。

设置一个段落的高度和宽度实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>95知识库(995w.com)</title> 
<style>
img.normal{
    height:auto;
}
img.big{
    height:150px;
}
p.ex{
    height:100px;
    width:100px;
}
</style>
</head>

<body>
<img class="normal" src="/upload/image/20200525/6372602300291987503698012.gif" width="95" height="84" /><br>
<img class="big" src="/upload/image/20200525/6372602300291987503698012.gif" width="95" height="84" />
<p class="ex">这个段落的高和宽是 100px.</p>
<p>这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本.</p>
</body>
</html>

尝试一下>>

line-height 属性
值描述
normal默认。设置合理的行间距
number设置数字，此数字会与当前的字体尺寸相乘来设置行间距
length设置固定的行间距
%基于当前字体尺寸的百分比行间距
inherit规定应该从父元素继承 line-height 属性的值

使用百分比设置行高实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>95知识库(995w.com)</title> 
<style>
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
</head>

<body>
<p>
这是一个标准行高的段落。<br>
这是一个标准行高的段落。<br>
大多数浏览器的默认行高约为110%至120%。<br>
</p>

<p class="small">
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
</p>

<p class="big">
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
</p>

</body>
</html>

尝试一下>>

max-height 属性
值描述
none默认。定义对元素被允许的最大高度没有限制
length定义元素的最大高度值
%定义基于包含它的块级对象的百分比最大高度
inherit规定应该从父元素继承 max-height 属性的值

设置段落的最大高度实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>95知识库(995w.com)</title> 
<style>
p{
    max-height:50px;
    background-color:yellow;
}
</style>
</head>

<body>
<p>这一段的最大高度设置为50 px。这一段的最大高度设置为50 px。
这一段的最大高度设置为50 px。这一段的最大高度设置为50 px。
这一段的最大高度设置为50 px。这一段的最大高度设置为50 px。
这一段的最大高度设置为50 px。这一段的最大高度设置为50 px。
这一段的最大高度设置为50 px。这一段的最大高度设置为50 px。</p>
</body>
</html>

尝试一下>>

max-width 属性
值描述
none默认。定义对元素被允许的最大宽度没有限制
length定义元素的最大宽度值
%定义基于包含它的块级对象的百分比最大宽度
inherit规定应该从父元素继承 max-width 属性的值
设置段落的最大宽度实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>95知识库(995w.com)</title> 
<style>
p
{
	max-width:100px;
	background-color:yellow;
}
</style>
</head>

<body>
<p>这一段的最大宽度设置为100 px。</p>
</body>
</html>

尝试一下>>

min-height 属性


值描述
length定义元素的最小高度。默认值是 0。
%定义基于包含它的块级对象的百分比最小高度。
inherit规定应该从父元素继承 min-height 属性的值。


设置段落的最低高度实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>95知识库(995w.com)</title> 
<style>
p{
    min-height:100px;
    background-color:yellow;
}
</style>
</head>

<body>
<p>这段的最小高度设置为100 px。</p>
</body>
</html>

尝试一下>>

min-width 属性
值描述
length定义元素的最小宽度值。默认值：取决于浏览器。
%定义基于包含它的块级对象的百分比最小宽度
inherit规定应该从父元素继承 min-width 属性的值。


设置段落的最小宽度实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>95知识库(995w.com)</title> 
<style>
p{
    min-width:150px;
    background-color:yellow;
}
</style>
</head>

<body>
<p>这个段落的最小宽度设置为 150px。</p>
</body>
</html>

尝试一下>>

width 属性
值描述
auto默认。浏览器会计算出实际的宽度
length使用 px、cm 等单位定义宽度
%定义基于包含块（父元素）宽度的百分比宽度。
inherit规定应该从父元素继承 width 属性的值。


设置一个段落的高度和宽度实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>95知识库(995w.com)</title> 
<style>
img.normal{
    height:auto;
}
img.big{
    height:120px;
}
p.ex{
    height:100px;
    width:100px;
}
</style>
</head>

<body>
<img class="normal" src="/upload/image/20200525/6372602300291987503698012.gif" width="95" height="84" /><br>
<img class="big" src="/upload/image/20200525/6372602300291987503698012.gif" width="95" height="84" />
<p class="ex">这个段落的高和宽是 100px.</p>
<p>这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本.</p>
</body>
</html>

尝试一下>>