CSS - 高度和宽度（尺寸）

HTML 元素的尺寸通常由 CSS width和height属性指定，我们可以使用这些属性来设置元素的尺寸。

CSS 还提供max-width、min-width、max-height和min-height等属性来设置元素的最大/最小宽度和高度。

使用 CSS 设置高度和宽度

height和width属性允许您设置元素的高度和宽度。这些属性可以包含以下值：

length：元素的高度和宽度可以是任何长度单位（px、pt、em、in 等）
百分比 (%)：该值可以作为百分比值传递，以包含块的百分比表示。
auto：浏览器计算元素的高度和宽度。这是默认值。
初始：将高度和宽度的值设置为其默认值。
继承：高度和宽度的值继承自其父值。

height和width属性不会向元素的布局添加任何内容，即它们不包括padding、margin或borders。它们设置元素的内边距、边框和边距内区域的高度和宽度。

例子

以下示例演示了如何使用div的高度和宽度。

<html>
<head>
<style>
   div { 
      height: 100px; width: 80%; background-color: #eee; 
   }
</style>
</head>
<body>
   <h2>Setting Height and Width Properties</h2>
   <div>This div element has a height of 100px and a width of 80%.</div>
</body>
</html>

使用 CSS 设置最大高度

CSS 可以使用max-height属性限制元素的最大高度。此属性允许指定元素的最大高度。max-height属性的值可以是：

none：未设置最大高度值。这是默认值。
length：以长度单位（px、pt、em、in 等）设置最大高度
百分比 (%)：该值相对于包含块的百分比。
初始：将高度和宽度的值设置为其默认值。
继承：该值从其父值继承。

例子

这是使用 CSS 设置最大高度的示例 -

<html>
<head>
<style>
   div.a {
      max-height: 100px; width: 80%; overflow: auto; 
      background-color: #eee; padding:10px;
   }
</style>
</head>
<body>

   <div class="a">
      <h2>max-height: 100px and width:80%</h2>
      <p>The <i>max-height</i> property allows you to specify maximum height of an element. The value of the max-height property can be various, but this div can be maximum 100px high and so it is creating a scrollbar to fit the content.</p>
   </div>
</body>
</html>

使用 CSS 设置最小高度

CSS 可以使用min-height属性限制元素的最小高度。此属性允许指定元素的最小高度。它指定元素可以具有的最小高度，确保它永远不会缩小到低于该值。min-height属性的值可以是：

length：以长度单位（px、pt、em、in 等）设置最小高度
百分比 (%)：该值相对于包含块的百分比。
初始：将高度和宽度的值设置为其默认值。
继承：该值从其父值继承。

当内容小于最小高度时，将应用最小高度。并且当内容大于最小高度时，min-height 的值对元素没有影响。

例子

这是使用 CSS 设置最小高度的示例 -

<html>
<head>
<style>
   div.a {
      min-height:200px; width: 80%; overflow: auto; 
      background-color: #eee; padding:10px;
   }
</style>
</head>
<body>

   <div class="a">
      <h2>min-height: 200px and width:80%</h2>
      <p>The <i>min-height</i> property allows you to specify minimum height of an element. The value of the min-height property can be various, but this div can not shrink below to 200px even if you reduce the screen height less than 200px.</p>
   </div>
</body>
</html>

使用 CSS 设置最大宽度

CSS 可以使用max-width属性限制元素的最大宽度。此属性允许指定元素的最大宽度。max-width属性的值可以是：

none：未设置最大宽度值。这是默认值。
length：以长度单位（px、pt、em、in 等）设置最大宽度
百分比 (%)：该值相对于包含块的百分比。
初始：将高度和宽度的值设置为其默认值。
继承：该值从其父值继承。

max -width值会覆盖width属性的值。如果元素内的内容大于指定的max-width，它将自动调整元素的高度以容纳元素内的内容。如果元素内的内容小于指定的max-width，则 max-width 属性不起作用。

例子

这是使用 CSS 设置最大宽度的示例 -

<html>
<head>
<style>
   div.a {
      max-width: 600px; overflow: auto; 
      background-color: #eee; padding:10px;
   }
</style>
</head>
<body>

   <div class="a">
      <h2>max-width: 600px </h2>
      <p>The <i>max-width</i> property allows you to specify maximum width of an element. This div can have maxmum width of 600px and if it has larger content than its width then it will adjust the height to fit the content.</p>
   </div>
</body>
</html>

使用 CSS 设置最小宽度

CSS 可以使用min-width属性限制元素的最小宽度。此属性允许指定元素的最小宽度。它指定元素可以具有的最小宽度，确保它永远不会缩小到低于该值。min-width属性的值可以是：

length：以长度单位（px、pt、em、in 等）设置最小宽度
百分比 (%)：该值相对于包含块的百分比。
初始：将高度和宽度的值设置为其默认值。
继承：该值从其父值继承。

如果元素的内容大于min-width，则 min-width 属性不起作用，但如果元素的内容小于指定的min-width，则将应用最小宽度。

例子

这是使用 CSS 设置最小宽度的示例 -

<html>
<head>
<style>
   div.a {
      min-width:400px; width: 80%; overflow: auto; 
      background-color: #eee; padding:10px;
   }
</style>
</head>
<body>

   <div class="a">
      <h2>min-width: 400px and width:80%</h2>
      <p>The <i>min-width</i> property allows you to specify minimum width of an element. This div can not shrink below to 400px even if you reduce the screen width less than 400px.</p>
   </div>
</body>
</html>

使用 CSS 设置行高

line-height属性允许您设置文本行之间的间距。line-height 属性的值可以是：

length：传递的值用于计算行框高度（px、pt、em、in 等）
百分比 (%)：该值相对于元素的字体大小。
number：它是一个无单位的数字，乘以元素自己的字体大小。
正常：这是一个关键字。默认值是 1.2，但这取决于元素的 font-family..

例子

这是使用 CSS 设置行高的示例 -

<html>
<head>
<style>
   div.a { 
      line-height: 1.0in; background-color: #eee; margin-bottom: 2px; 
   }
   div.b { 
      line-height: 50px; background-color: #eee; margin-bottom: 2px; 
   }
   div.c { 
      line-height: 5; background-color: #eee; margin-bottom: 5px; 
   }
   div.d { 
      line-height: normal; background-color: #eee; margin-bottom: 2px; 
   }
</style>
</head>
<body>
   <h2>Setting up line-height Property</h2>
   <div class="a">This div element has a line-height of 1.0 inche.</div>
   <div class="b">This div element has a line-height of 50px.</div>
   <div class="c">This div element has a line-height of 5 (unitless number)</div>
   <div class="d">This div element has a line-height of normal.</div>
</body>
</html>