CSS height width

创建时间:2019.03.24 修改时间:2019.06.10

控制元素长宽尺寸

<style>
p.normal
{
	height:auto;
	width:auto;
}
p.ex
{
	height:50px;
	width:50px;
}
</style>
<p class="ex"> 这个段落的高和宽是 50px。</p>
<p class="normal"> 这个段落为正常的高和宽。</p>

效果如下:

这个段落的高和宽是 50px。

这个段落为正常的高和宽。

注: 元素中的内容超过元素高度,则溢出。

使用百分比设置元素高宽

<style>
p.ex1
{
	height:50%;
	width:50%;
	background-color:yellow;
}
</style>
<p class="ex1"> 这个段落的宽为 10%,高 10% 对段落元素无意义。</p>
<p> 这个段落为正常的高和宽。</p>

效果如下:

这个段落的宽为 10%,高 10% 对段落元素无意义。

这个段落为正常的高和宽。

设置元素最大长宽

<style>
p.ex2
{
	max-height:50px;
	max-width:50px;
	background-color:yellow;
}
</style>
<p class="ex2"> 这个段落的最大高和宽是 50px。</p>

效果如下:

这个段落的最大高和宽是 50px。

设置元素最小长宽

<style>
p.ex3
{
	min-height:50px;
	min-width:50px;
	background-color:yellow;
}
</style>
<p class="ex3"> 这个段落的最大高和宽是 50px。</p>

效果如下:

这个段落的最大高和宽是 50px。

设置行高

<style>
p.small {line-height:70%;}
p.big {line-height:150%;}
p.ex4 {line-height:12px;}
</style>

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

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

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

<p class="ex4">
 这是一个固定行高的段落。<br>
 这是一个固定行高的段落。<br>
 这是一个固定行高的段落。<br>
 这是一个固定行高的段落。<br>
</p>

效果如下:

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

这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。

这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。

这是一个固定行高的段落。
这是一个固定行高的段落。
这是一个固定行高的段落。
这是一个固定行高的段落。