CSS 尺寸 - 易学教程，面试笔记经验！

在前面的章节中，我们学习了如何使用 CSS 添加内边距、边距、边框等到元素。现在我们将了解如何设置元素的尺寸。在这里，我们将研究如何设置条件来限制定位元素的高度或宽度，更不用说您希望浏览器继续自动计算宽度、高度或两者的情况。

以下内容属性允许您控制元素的尺寸:

height:设置元素的高度。
width:设置元素的宽度。
line-height:设置文本行的高度。
max-height:设置元素可以具有的最大高度。
min-height:设置元素可以具有的最小高度。
max-width:设置元素可以拥有的最大宽度。
min-width:设置元素可以拥有的最小宽度。

高度和宽度

高度和width 属性允许您为定位元素设置特定的高度和宽度。

这些属性可以包含以下值:

长度:任何长度单位（px、pt、em、in 等）
百分比 (%):百分比值，以百分比表示包含块的。
auto:浏览器计算元素的高度和宽度。默认值。
initial:将高度和宽度的值设置为默认值。
inherit:继承该值其父值的高度和宽度。

以下示例演示如何使用 div 元素的高度和宽度:

<html>
<head>
<style>
   div {
      height: 100px;
      width: 80%;
      background-color: rgb(206, 211, 225);
   }
</style>
</head>
<body>
      <h2>没有布局属性的高度和宽度属性</h2>
    <div>此 div 元素的高度为 100px，宽度为 80%。</div>
</body>
</html>

height 和 width 属性不会向元素的布局添加任何内容，即不包括内边距、边距或边框。

以下示例演示了将 div 的高度和宽度与内边距、边框或边距一起使用时的差异:

<html>
<head>
<style>
   div {
      height: 100px;
      width: 80%;
      padding: 2em;
      border:1px solid;
      margin:2px;
      background-color: rgb(206, 211, 225);
   }
</style>
</head>
<body>
      <h2>具有内边距、边距、边框的高度和宽度属性</h2>
    <div>此 div 元素的高度为 100px，宽度为 80%。</div>
</body>
</html>

CSS 尺寸: line-height

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

length:任意单位长度，用于计算行框高度（px、pt、em、in等）
百分比（%）:相对于字体的值元素的大小。
number:无单位数字，乘以元素自己的字体大小。
normal:一个关键字。默认值为 1.2，但这取决于元素的字体系列。

示例

这里是一个示例:

<html>
<head>
<style>
   div.a {
      line-height: 2in;
      font-size: 10pt;
      background-color: rgb(206, 211, 225);
      margin-bottom: 2px;
      }
   div.b {
      line-height: 100px;
      font-size: 10pt;
      background-color: rgb(206, 211, 225);
      margin-bottom: 2px;
      }
   div.c {
      line-height: 5;
      font-size: 10pt;
      background-color: rgb(206, 211, 225);
      margin-bottom: 5px;
      }
   div.d {
      line-height: normal;
      font-size: 10pt;
      background-color: rgb(206, 211, 225);
      margin-bottom: 2px;
      }
</style>
</head>
<body>
      <h2>行高属性</h2>
    <div class="a">此 div 元素的行高为 2 英寸。</div>
    <div class="b">此 div 元素的行高为 100px。</div>
    <div class="c">此 div 元素的行高为 5（无单位数字）</div>
    <div class="d">此 div 元素的行高为正常。</div>
</body>
</html>

CSS 尺寸: max-height

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

none:没有最大高度值已设置。默认值。
length:以长度单位（px、pt、em、in 等）设置最大高度
百分比 (%):相对于包含块的百分比的值。
initial:将 max-height 的值设置为默认值。
inherit:从父级继承 max-height 的值。

示例

这里是一个示例:

<html>
<head>
<style>
   div {
      width: 60%;
      overflow: auto;
      border: 2px solid black;
      padding-bottom: 2px;
      }   
   div.a {
      max-height: 100px;
      }
   div.b {
      max-height: 70%;
      }
   div.c {
      max-height: inherit;
      }
   div.d {
      max-height: none;
      }
</style>
</head>
<body>
    <div class="a">
      <h2>max-height: 100px and width:80%</h2>
          <p class="a"><p><i>max-height</i> 属性允许您指定框的最大高度。 max-height 属性的值可以有多种，但这个是 100px。</p>
    </div>
    <div class="b">
      <h2>max-height: 70% and width:80%</h2>
          <p class="a"><p><i>max-height</i> 属性允许您指定框的最大高度。 max-height 属性的值可以有多种，但这个是 70%。</p>
    </div>
    <div class="c">
      <h2>max-height: inherit and width:80%</h2>
          <p class="a"><p><i>max-height</i> 属性允许您指定框的最大高度。 max-height 属性的值可以有多种，但这个是继承的。</p>
    </div>
    <div class="d">
      <h2>max-height: none and width:80%</h2>
          <p class="a"><p><i>max-height</i> 属性允许您指定框的最大高度。 max-height 属性的值可以有多种，但这个是没有的。</p>
    </div>
</body>
</html>

CSS 尺寸: min-height

CSS 中的 min-height 属性为用于设置元素的最小高度。它指定元素可以具有的最小高度，确保它永远不会缩小到低于该值。

min-height 属性的值可以是:

length:以长度单位（px、pt、em、in 等）设置最小高度。默认值。
百分比 (%):值相对于包含块的百分比。
初始:设置min-height 的值恢复为默认值。
继承:从父级继承 min-height 的值。

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

示例

这里是一个示例:

<html>
<head>
<style>
   div.a {
      border: 2px solid red;
      min-height: 200px;
      width: 80%;
      overflow: auto;
      margin-bottom:2px;
      }
   div.b {
      border: 2px solid blue;
      min-height: 40%;
      overflow: auto;
      margin-bottom:2px;
      }
   div.c {
      border: 2px solid green;
      min-height: 20px;
      overflow: auto;
      margin-bottom:2px;
      }
</style>
</head>
<body>
   <div style="border:2px 黑色虚线; margin-bottom:4px;">
       <h2>min-height：0(默认)：</h2>
          <p>CSS中的<i>min-height</i>属性用于设置元素的min-height。 它指定元素可以具有的min-height,确保它永远不会收缩到该值以下。</p>
    </div>
    <div class="a">
       <h2>min-height：200px,width：80%</h2>
          <p>CSS中的<i>min-height</i>属性用于设置元素的min-height。 它指定元素可以具有的min-height,确保它永远不会收缩到该值以下。</p>
    </div>
    <div class="b">
       <h2>min-height：40%</h2>
          <p>CSS中的<i>min-height</i>属性用于设置元素的min-height。 它指定元素可以具有的min-height,确保它永远不会收缩到该值以下。</p>
    </div>
    <div class="c">
       <h2>min-height：20px(小于内容)</h2>
          <p>min-height 小于内容,因此属性 <i>min-height</i> 无效。
             CSS 中的 <i>min-height</i> 属性用于设置元素的min-height。
             它指定元素可以具有的min-height,确保它永远不会缩小到低于该值。
          </p>
    </div
</body>
</html>

CSS 尺寸 - 混合宽度

max-width 属性允许您指定元素的最大宽度。 max-width 属性的值可以是:

none:不设置最大宽度值。默认值。
长度:以长度单位（px、pt、em、in 等）设置最大宽度。
percentage (%):设置包含块的最大宽度百分比。
initial:将 max-width 的值设置为默认值。
继承:从父元素继承 max-width 的值。

如果元素内的内容大于指定的max-width，会自动改变元素的高度。

如果元素内的内容小于指定的max-width，则max-width属性不起作用。

max-width 值会覆盖 width 属性的值。

示例

下面是一个示例:

<html>
<head>
<style>
   div.a {
      border: 2px solid red;
      max-width: 200px;
      width: 400px;
      overflow: auto;
      margin-bottom: 4px;
      }
   div.b {
      border: 2px solid blue;
      max-width: 40%;
      overflow: auto;
      margin-bottom: 4px;
      }
   div.c {
      border: 2px solid red;
      max-width: none;
      width: 400px;
      overflow: auto;
      margin-bottom: 4px;
      }
</style>
</head>
<body>
   <div class="a">
      <h2>max-width: 200px 和 width:400px</h2>
        <p><i>max-width</i> 属性允许您指定框的最大宽度。 这里最大宽度比宽度 400px 小 200px。</p>
   </div>
   <div class="b">
      <h2>max-width: 40%</h2>
      <p><i>max-width</i> 属性允许您指定框的最大宽度。 这里最大宽度是40%。</p>   
   </div>
   <div class="c">
      <h2>max-width: none (default):</h2>
      <p><i>max-width</i> 属性允许您指定框的最大宽度。 这里最大宽度是无。</p>
   </div>
</body>
</html>

CSS 尺寸 - 最小宽度

min-width属性允许您指定元素的最小宽度。 min-width 属性的值可以是:

length:以长度单位（px、pt、em、in 等）设置最小宽度.)。默认值为 0。
百分比 (%):设置包含块百分比的最小宽度。
初始:将 min-width 的值设置为其默认值。
inherit:从其父级继承 min-width 的值。

如果元素的内容小于指定的 min-width，则应用最小宽度。

如果元素的内容大于指定的 min-width，则应用最小宽度。 width 属性没有影响。这可以防止 width 属性的值变得小于 min-width。

示例

这里是一个示例 -

<html>
<head>
<style>
   .box1 {
      min-width: 300px;
      background-color: yellow;
      padding: 20px;
      margin-bottom: 5px;
   }
   .box2 {
      min-width: 30%;
      background-color: lightgrey;
      padding: 20px;
      display: inline-block;
      margin-bottom: 5px;
   }
</style>
</head>
<body>
   <div class="box1">此框的最小宽度为 300px</div>
   <div class="box2">此框的最小宽度为 30%。</div>
   <div class="box2">
           该框的最小宽度为 30%。 但内容大于最小宽度。
       因此 min-width 的值没有影响。 这是一个可以使用 CSS 设置样式的维度属性。
   </div>
</body>
</html>

CSS 尺寸: 相关属性

所有与维度相关的属性如下表所示:

属性	说明
height	设置元素的高度。
line-height	设置元素的行高
max- height	设置元素的最大高度
min-height	设置元素的最小高度。
max-width	设置元素的最大宽度。
min-width	设置元素的最小宽度。