CSS 高度和宽度（尺寸）

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

CSS还提供了诸如 max-width , min-width , max-height 和 min-height 等属性，用于设置元素的最大/最小宽度和高度。

使用CSS设置高度和宽度

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

length ：元素的高度和宽度可以使用任何长度单位（像素、点、em、英寸等）。
percentage (%) ：可以将值传递为百分比值，该值是相对于包含它的块的百分比。
auto ：浏览器计算元素的高度和宽度。这是默认值。
initial ：将高度和宽度的值设置为默认值。
inherit ：高度和宽度的值从其父级值继承。

height 和 width 属性不会添加到元素的布局中，即它们不包括 padding, margin 或 borders 。它们设置在元素的padding、border和margin之内的区域的高度和宽度。

示例

下面的例子演示了如何使用高度和宽度来设置一个 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设置max-height

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

none ：没有设置最大高度值。这是默认值。
length ：以长度单位（像素、点、字号、英寸等）设置最大高度。
percentage (%) ：值相对于包含块的百分比。
initial ：将高度和宽度的值设置为默认值。
inherit ：值从其父元素继承。

示例

以下是使用CSS设置max-height的示例：

<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等）设置最小高度
percentage (%) ：该值相对于包含块的百分比
initial ：将高度和宽度的值设置为默认值
inherit ：该值从父元素继承

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

示例

以下是使用CSS设置min-height的示例：

<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 ：以长度单位（像素、点、em、英寸等）设置最大宽度。
percentage (%) ：值是相对于包含块的百分比。
initial ：将高度和宽度的值设置为默认值。
inherit ：值从父元素继承。

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

示例

以下是使用CSS设置max-width的示例：

<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等）设置最小宽度。
percentage（%） ：值相对于包含块的百分比。
initial ：将高度和宽度的值设置为其默认值。
inherit ：值从其父元素继承。

如果元素中的内容大于min-width，则min-width属性没有效果，但如果元素中的内容小于指定的min-width，则应用最小宽度。

示例

以下是使用CSS设置min-width的示例：

<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等）
percentage（%） ：该值相对于元素的字体大小
number ：无单位的数字，乘以元素自身的字体大小
normal ：关键字。默认值为1.2，但它取决于元素的字体系列。

示例

以下是使用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>