CSS 尺寸 (Dimension)
# CSS 尺寸 (Dimension)
CSS 尺寸属性用于设置 HTML 元素的宽度、高度、最大宽度、最大高度、最小宽度和最小高度。这些属性对于控制网页布局和元素大小非常重要。
# 1. 所有 CSS 尺寸 (Dimension) 属性
以下是所有 CSS 尺寸属性的列表：
width：设置元素的宽度。height：设置元素的高度。max-width：设置元素的最大宽度。max-height：设置元素的最大高度。min-width：设置元素的最小宽度。min-height：设置元素的最小高度。
# 2. 示例代码
# 设置宽度和高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 尺寸属性示例</title>
<style>
/* 设置元素的宽度和高度 */
div {
width: 200px; /* 设置宽度为200px */
height: 100px; /* 设置高度为100px */
background-color: lightblue; /* 设置背景颜色 */
margin-bottom: 10px; /* 设置下外边距 */
}
</style>
</head>
<body>
<h2>CSS 尺寸属性示例</h2>
<div>宽度: 200px, 高度: 100px</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
在这个示例中，div 元素的宽度被设置为 200px，高度为 100px，并且背景颜色为淡蓝色。
# 设置最大宽度和最大高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 尺寸属性示例</title>
<style>
/* 设置元素的最大宽度和最大高度 */
div {
max-width: 300px; /* 设置最大宽度为300px */
max-height: 150px; /* 设置最大高度为150px */
background-color: lightgreen; /* 设置背景颜色 */
overflow: auto; /* 如果内容超过最大尺寸，添加滚动条 */
margin-bottom: 10px; /* 设置下外边距 */
}
</style>
</head>
<body>
<h2>CSS 尺寸属性示例</h2>
<div>这个 div 元素的最大宽度是 300px，最大高度是 150px。如果内容超过这些尺寸，将会出现滚动条。</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
在这个示例中，div 元素的最大宽度被设置为 300px，最大高度为 150px，并且背景颜色为淡绿色。如果内容超过这些尺寸，将会出现滚动条。
# 设置最小宽度和最小高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 尺寸属性示例</title>
<style>
/* 设置元素的最小宽度和最小高度 */
div {
min-width: 150px; /* 设置最小宽度为150px */
min-height: 80px; /* 设置最小高度为80px */
background-color: lightcoral; /* 设置背景颜色 */
margin-bottom: 10px; /* 设置下外边距 */
}
</style>
</head>
<body>
<h2>CSS 尺寸属性示例</h2>
<div>这个 div 元素的最小宽度是 150px，最小高度是 80px。</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
在这个示例中，div 元素的最小宽度被设置为 150px，最小高度为 80px，并且背景颜色为淡珊瑚色。
# 3. 示例图片
以下是 CSS 尺寸属性的示例图：
# 总结
通过使用 CSS 尺寸属性，可以轻松地控制 HTML 元素的尺寸，使网页布局更加灵活和美观。这些属性的合理使用可以帮助我们创建响应式和用户友好的网页。
编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08