CSS height

CSS height

此CSS属性设置元素的高度,它不包括padding边距、边框区域内的高度。它可以接受长度和百分比值。但是它不允许负值。
我们将高度设置为数字值(例如px,%等),如果内容不适合给定的高度,则内容可能会溢出。我们可以通过定义
overflow 属性来管理溢出内容。
如果未明确定义容器的高度,并且元素没有绝对定位(即
position:absolute; ),将
height 属性的值设置为
auto 。 min-height和max-height属性还可用于控制大小。

语法

 height: auto | length | initial | inherit;

属性值

此属性的值列表如下。
说明
auto 这是默认值。浏览器负责使用此值来计算元素的高度。不允许使用负值。
length 它使用px,cm,pt等长度单位指定元素的高度。不允许使用负值。
以%定义容器的高度。不允许使用负值。
initial 用于将属性设置为其默认值。
inherit 它用于从其父元素继承属性。
我们通过一些示例来更清楚地了解这些属性。

示例

在这里,我们使用关键字值
auto 以及height属性的长度值,以
px
em
 <!DOCTYPE html> 
<html>
<head>
<style>
#auto{
height: auto;
width: 275px;
border: 2px solid blue;
}
#px{
height: 320px;
width: 275px;
border: 2px solid blue;
}
#em{
height: 16em;
width: 275px;
border: 2px solid blue;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<h2> height:auto; </h2>
<div id ="auto">
<img src="../uploads/html/rose.jpg">
<p> Welcome to the bianchenghao6.com </p>
<p> 此div元素的高度设置为auto。 </p>
</div>
<h2> height: 320px; </h2>
<div id ="px">
<img src="../uploads/html/rose.jpg">
<p> Welcome to the bianchenghao6.com </p>
<p> 此div元素的高度设置为320px。 </p>
</div><br>
<h2> height: 16em; </h2>
<div id ="em">
<img src="../uploads/html/rose.jpg">
<p> Welcome to the bianchenghao6.com </p>
<p> 此div元素的高度设置为16em。 </p>
</div>
</body>
</html>
输出

CSS height_https://bianchenghao6.com_【CSS 教程】_第1张

示例

在这里,我们以百分比指定
height 属性的值。
 <!DOCTYPE html> 
<html>
<head>
<style>
#per{
position: absolute;
width: auto;
height: 65%;
border: 2px solid blue;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<h2> height: 65%; </h2>
<div id ="per">
<img src="../uploads/html/rose.jpg">
<p> Welcome to the bianchenghao6.com </p>
<p> The height this div element is set to 65%. </p>
</div>
</body>
</html>
输出

CSS height_https://bianchenghao6.com_【CSS 教程】_第2张