CSS - 维度_CSS 菜鸟教程

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

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

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

高度和宽度

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

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

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

以下示例演示了如何使用 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>

此示例中的 height 和 width 属性不会对元素的布局添加任何内容，即它不包括填充、边距或边框。

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

<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 尺寸 - 行高

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

length：任何单位长度，用于计算行框高度（px、pt、em、in 等）
percentage (%):：相对于元素字体大小的值。
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>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 尺寸 - 最大高度

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

none：未设置最大高度值。默认值。
length：以长度单位（px、pt、em、in 等）设置最大高度
percentage (%)：相对于包含块百分比的值。
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>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 尺寸 - 最小高度

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

min-height 属性的值可以是：

length：以长度单位（px、pt、em、in 等）设置最小高度。默认值。
percentage (%)：值相对于包含块的百分比。
initial：将 min-height 的值设置为默认值。
inherit：从其父级继承 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 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 尺寸 - 混合宽度

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

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

如果元素中的内容大于指定的最大宽度，它将自动更改元素的高度。

如果元素中的内容小于 mspecified 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 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 尺寸 - 最小宽度

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

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

如果包含元素的内容小于指定的最小宽度，则将应用最小宽度。

如果元素的内容大于min-width，则 min-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">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>

CSS 维度 - 相关属性

下表列出了与维度相关的所有属性：

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

<< CSS - 轮廓 CSS - 滚动条 >>