Css 简明教程

CSS - Dimension

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

以下属性允许您控制元素的尺寸：

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

Height And Width

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

这些属性可以容纳以下值：

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

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

<html>
<head>
<style>
   div {
      height: 100px;
      width: 80%;
      background-color: rgb(206, 211, 225);
   }
</style>
</head>
<body>
   <h2>Height and Width Property without layout properties</h2>
   <div>This div element has a height of 100px and a width of 80%.</div>
</body>
</html>

以下示例演示使用 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>Height and Width Property with padding, margin, border</h2>
   <div>This div element has a height of 100px and a width of 80%.</div>
</body>
</html>

CSS Dimension - Line Height

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

length ：任何单位长度，用于计算行框高度（px、pt、em、in 等）
percentage (%) ：相对于元素字体大小的值。
number ：一个无单位数字，它会乘以元素自身的字体大小。
normal ：一个关键字。默认值为 1.2，但它取决于元素的字体系列。

Example

这是一个示例：

<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>line-height Property</h2>
   <div class="a">This div element has a line-height of 2 inches.</div>
   <div class="b">This div element has a line-height of 100px.</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>

CSS Dimension - Maximum Height

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

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

Example

这是一个示例：

<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>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is 100px.</p>
   </div>
   <div class="b">
      <h2>max-height: 70% and width:80%</h2>
         <p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is 70%.</p>
   </div>
   <div class="c">
      <h2>max-height: inherit and width:80%</h2>
         <p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is inherit.</p>
   </div>
   <div class="d">
      <h2>max-height: none and width:80%</h2>
         <p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is none.</p>
   </div>
</body>
</html>

CSS Dimension - Minimum Height

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

min-height 属性的值可以是：

length ：设置长度单位（px、pt、em、in 等）的最小高度。默认值。
percentage (%) ：相对于包含块的百分比的值。
initial ：将 min-height 的值设置为其默认值。
inherit ：从其父元素继承 min-height 的值。

Example

这是一个示例：

<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 dashed black; margin-bottom:4px;">
      <h2>min-height: 0 (default):</h2>
         <p>The <i>min-height</i> property in CSS is used to set the minimum height of an element. It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.</p>
   </div>
   <div class="a">
      <h2>min-height: 200px and width:80%</h2>
         <p>The <i>min-height</i> property in CSS is used to set the minimum height of an element. It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.</p>
   </div>
   <div class="b">
      <h2>min-height: 40%</h2>
         <p>The <i>min-height</i> property in CSS is used to set the minimum height of an element. It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.</p>
   </div>
   <div class="c">
      <h2>min-height: 20px (smaller than content)</h2>
         <p>The min-height is smaller than the content, hence the property <i>min-height</i> has no effect.
            The <i>min-height</i> property in CSS is used to set the minimum height of an element.
            It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.
         </p>
   </div>
</body>
</html>

CSS Dimension - Miximum Width

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

none ：没有设置最大宽度值。默认值。
length ：设定一个长度单位（px、pt、em、in 等）的最大宽度。
percentage (%) ：设定一个包含块百分比的最大宽度。
initial ：设定 max-width 的值为其默认值。
inherit ：从父代元素继承 max-width 的值。

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

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

Example

这是一个示例：

<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 and width:400px</h2>
         <p>The <i>max-width</i> property allows you to specify maximum width of a box. Here the max-width is 200px less than the width which is 400px.</p>
   </div>
   <div class="b">
      <h2>max-width: 40%</h2>
         <p>The <i>max-width</i> property allows you to specify maximum width of a box. Here the max-width is 40%.</p>
   </div>
   <div class="c">
      <h2>max-width: none (default):</h2>
         <p>The <i>max-width</i> property allows you to specify maximum width of a box. Here the max-width is none.</p>
   </div>
</body>
</html>

CSS Dimension - Minimum Width

min-width* 属性让你可以指定一个元素的最小宽度。 min-width 属性的值可以是：

length ：设定一个长度单位（px、pt、em、in 等）的最小宽度。默认值为 0。
percentage (%) ：设定一个包含块百分比的最小宽度。
initial ：设定 min-width 的值为其默认值。
inherit ：从父代元素继承 min-width 的值。

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

如果元素中的内容大于*最小宽度*，则 min-width 属性不起作用。这可以防止宽度属性的值变小，成为小于最小宽度。

Example

示例如下：

<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">This box has a minimum width of 300px</div>
   <div class="box2">This box has a minimum width of 30%.</div>
   <div class="box2">
      This box has a minimum width of 30%. But the content is larger than the min-width.
      Hence the value of min-width has no effect. This is a dimensional property which can styled using CSS.
   </div>
</body>
</html>