1. 宽度和高度 (width 和 height):
div {
width: 200px; /* 设置元素的宽度 */
height: 100px; /* 设置元素的高度 */
}
2. 最大宽度和最大高度 (max-width 和 max-height):
div {
max-width: 500px; /* 设置元素的最大宽度 */
max-height: 300px; /* 设置元素的最大高度 */
}
3. 最小宽度和最小高度 (min-width 和 min-height):
div {
min-width: 100px; /* 设置元素的最小宽度 */
min-height: 50px; /* 设置元素的最小高度 */
}
4. 百分比尺寸:
div {
width: 50%; /* 相对于父元素宽度的百分比 */
height: 75vh; /* 相对于视口高度的百分比 */
}
5. 相对尺寸 (em 和 rem):
div {
font-size: 16px; /* 1em 等于当前字体大小（16px） */
width: 2em; /* 相对于字体大小的宽度 */
height: 3rem; /* 相对于根元素字体大小的高度 */
}
6. 视口单位 (vw 和 vh):
div {
width: 50vw; /* 相对于视口宽度的百分比 */
height: 25vh; /* 相对于视口高度的百分比 */
}
7. 响应性尺寸:
img {
max-width: 100%; /* 图片最大宽度不超过父元素宽度 */
height: auto; /* 保持图片宽高比例，防止变形 */
}
这些尺寸属性可以根据具体的布局需求和设计目标进行组合使用。请注意，在响应式设计中，使用百分比、视口单位和相对尺寸是常见的做法，以确保页面在不同设备上有良好的适应性。
转载请注明出处：http://www.zyzy.cn/article/detail/12533/CSS