Css 简明教程
CSS - Dimension
在之前的章节中,我们学习了如何使用 CSS 将填充、边距、边框等添加到元素。现在我们将了解如何为元素设置尺寸。在这里,我们将研究如何设置条件以限制定位元素的高度或宽度,更不用说让浏览器继续自动计算宽度、高度或两者的情况。
In the earlier chapters we learnt how to add padding, margin, border, etc using CSS to an element. Now we will see how to set dimensions to an element. Here we will study how to set conditions to limit how high or wide a positioned element gets, not to mention cases where you want the browser to go ahead and automatically calculate the width, height, or both.
以下属性允许您控制元素的尺寸:
Following properties allow you to control the dimensions of an element:
-
height: Sets the height of an element.
-
width: Sets the width an element.
-
line-height: Sets the height of a line of text.
-
max-height: Sets a maximum height that an element can have.
-
min-height: Sets the minimum height that an element can have.
-
max-width: Sets the maximum width that an element can have.
-
min-width: Sets the minimum width that an element can have.
Height And Width
The height and width properties allow you to set specific height and width for your positioned element.
这些属性可以容纳以下值:
These properties can hold following values:
-
length: Any unit of length (px, pt, em, in, etc.)
-
percentage (%): A percentage value, which is in percent of the containing block.
-
auto: Browser calculates the height and width of the element. Default value.
-
initial: Sets the value of height and width to its default value.
-
inherit: Inherits the value of height and width from its parent value.
以下示例演示如何为 div 元素使用高度和宽度:
Following example demonstrates using height and width for a div element:
<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 的高度和宽度以及填充、边框或边距时有何差异:
Following example demonstrates the difference when using height and width for a div along with padding, a border, or a margin:
<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* 属性的值可以是:
The line-height property allows you to set the space between lines of text. The value of the line-height property can be:
-
length: Any unit length, used in the calculation of line box height (px, pt, em, in, etc.)
-
percentage (%): Value relative to the font size of the element.
-
number: A unitless number, that is multiplied by the element’s own font-size.
-
normal: A keyword. The default value is 1.2, but it depends on the element’s font-family.
Example
这是一个示例:
Here is an 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* 属性的值可以是:
An element’s height can be limited using max-height property. This allows you to specify maximum height of an element. The value of the max-height property can be:
-
none: No maximum height value is set. Default value.
-
length: Sets the maximum height in terms of length units (px, pt, em, in, etc.)
-
percentage (%): Value relative to the percent of containing block.
-
initial: Sets the value of max-height to its default value.
-
inherit: Inherits the value of max-height from its parent.
Example
这是一个示例:
Here is an 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* 属性用于设置元素的最小高度。它指定元素可以具有的最小高度,确保元素绝不会收缩到该值以下。
The min-height 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.
min-height 属性的值可以是:
The value of the min-height property can be:
-
length: Sets the minimum height in terms of length units (px, pt, em, in, etc.). Default value.
-
percentage (%): Value is relative to the percent of containing block.
-
initial: Sets the value of min-height to its default value.
-
inherit: Inherits the value of min-height from its parent.
Example
这是一个示例:
Here is an 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 属性的值可以是:
The max-width property allows you to specify maximum width of an element. The value of the max-width property can be:
-
none: No maximum width value is set. Default value.
-
length: Sets the maximum width in terms of length units (px, pt, em, in, etc.).
-
percentage (%): Sets the maximum width in the percent of containing block.
-
initial: Sets the value of max-width to its default value.
-
inherit: Inherits the value of max-width from its parent.
如果元素中的内容大于指定的 max-width ,则它会自动更改元素的高度。
If the content within the element is larger than the specified max-width, it will automatically change the height of the element.
如果元素中的内容小于指定的 max-width ,则 max-width 属性不起作用。
If the content within the element is smaller than the mspecified max-width, the max-width property has no effect.
Example
这是一个示例:
Here is an 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 属性的值可以是:
The min-width property allows you to specify minimum width of an element. The value of the min-width property can be:
-
length: Sets the minimum width in terms of length units (px, pt, em, in, etc.). Default value is 0.
-
percentage (%): Sets the minimum width in the percent of containing block.
-
initial: Sets the value of min-width to its default value.
-
inherit: Inherits the value of min-width from its parent.
如果元素中的内容小于指定的 min-width ,则会应用最小宽度。
If the content with the element is smaller than the specified min-width, the minimum width will be applied.
如果元素中的内容大于*最小宽度*,则 min-width 属性不起作用。这可以防止宽度属性的值变小,成为小于最小宽度。
If the content with the element is larger than the*min-width*, the min-width property has no effect. This prevents the value of the width property from becoming smaller than min-width.
Example
示例如下:
Here is an 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>
CSS Dimension - Related Properties
与 dimensions 相关的所有属性如下表所示:
All the properties related to dimensions are listed in the table below:
Property |
Description |
Sets the height of an element. |
|
Sets the width of an element |
|
Sets the line-height of an element |
|
Sets the maximum height of an element |
|
Sets the mimimum height of an element. |
|
Sets maximum width of an element. |
|
Sets minimum width an element. |