Css 简明教程

CSS - Height Property

height 属性设置元素内容区域的高度。如果 box-sizing 被设置为 border-box ,则属性 height 将设置边框区域的高度。

height 属性指定的值会被 min-heightmax-height 属性定义的值覆盖。

Possible Values

  1. length ——一个特定的长度值,例如像素(px)、厘米(cm)、英寸(in)等。

  2. percentage - 容器元素高度的百分比。

  3. auto - 浏览器将根据内容自动计算高度。这是默认值。

  4. * max-content* :定义固有首选高度。

  5. * min-content* :定义固有最小高度。

  6. * fit-content* :盒子将使用可用空间,但永远不会超过 max-content

  7. * fit-content (<length-percentage>)* :使用适合内容公式,即 min(max-content, max(min-content, <length-percentage>))

  8. clamp() :允许在最小高度和最大高度之间指定的值范围内选择一个中间值。

Applies to

除非替换内联元素、表格列和列组以外的所有 HTML 元素。

DOM Syntax

object.style.height = "100px";

CSS Height - Length Unit

以下是在长度单位中向 div 元素添加高度的示例:

<html>
<head>
<style>
   div {
      border: 1px solid black;
      margin-bottom: 5px;
   }
   div.a {
      height: 100px;
      background-color: rgb(230, 230, 203);
   }
   div.b {
      height: 2.5in;
      background-color: rgb(230, 230, 203);
   }
</style>
</head>
<body>
   <div class="a">This div element has a height of 100px.</div>
   <div class="b">This div element has a height of 2.5 inches.</div>
</body>
</html>

CSS Height - Percentage value

以下是在百分比值中向 div 元素添加高度的示例:

<html>
<head>
<style>
   div {
      border: 1px solid black;
      margin-bottom: 5px;
   }
   div.a {
      height: 80%;
      background-color: rgb(230, 230, 203);
   }
   div.b {
      height: 120%;
      background-color: rgb(236, 190, 190);
   }
</style>
</head>
<body>
   <div class="a">This div element has a height of 80%.</div>
   <div class="b">This div element has a height of 120%.</div>
</body>
</html>

CSS height - auto value

以下是在 div 元素中将高度设置为 auto 的示例:

<html>
<head>
<style>
   div.auto {
      height: auto;
      background-color: yellow;
      padding: 20px;
      margin-bottom: 5px;
   }
</style>
</head>
<body>
   <div class="auto">This div element has a height set as auto.</div>
</body>
</html>

CSS Height - Using max-content and min-content

以下是在高度等于 max-contentmin-content 示例:

<html>
<head>
<style>
   div {
      border: 1px solid black;
      margin-bottom: 5px;
   }
   div.c {
      height: max-content;
      background-color: bisque;
   }
   div.d {
      height: min-content;
      background-color: darkseagreen;
   }
</style>
</head>
<body>
   <div class="c">This div element has a height as max-content. This div element has a height as max-content.
   This div element has a height as max-content. This div element has a height as max-content. This div element has a height as max-content.</div>
   <div class="d">This div element has a height of min-content.</div>
</body>
</html>

CSS Height - Image

以下是在图像中添加高度的示例:

<html>
<head>
<style>
   .demoImg {
      margin-top: 15px;
      height: 200px;
      margin-right: 0.5in;
   }
</style>
</head>
<body>
   <img class="demoImg" src="images/scancode.png" alt="image-height">
</body>
</html>

CSS Height - Using clamp()

以下是有用于设置高度的 clamp() 函数的示例:

<html>
<head>
<style>
   p{
      display: inline-flex;
      border: 1px solid black;
      background-color: yellow;
      height: clamp(20px, 100px, 180px);
      width: clamp(50px, 100px, 200px);
      padding: 1em;
      margin: 2em;
   }
</style>
<body>
   <div>
      <p>The clamp function is used for height & width, where the background color is selected for the value between the
      min and max ranges of height and width.</p>
   </div>
</body>
</html>

以下是 height 相关 CSS 属性的列表:

property

value

max-height

对元素的高度设置上限。

min-height

对元素的高度设置下限。

min-content

设置内容的最小固有高度。

max-content

设置内容的最大固有高度。

fit-content

根据可用的大小调整内容。

fit-content()

用公式约束给定尺寸:min(最大尺寸,max(最小尺寸,参数))。