前言
在 CSS 中,宽度(width)和高度(height)属性用于设置元素的尺寸,控制元素在页面中所占的水平和垂直空间。我们在之前的文中,已多次用到,今天来细致聊一下它的更多用法。
宽/高度属性值类型
CSS 中的宽度和高度属性值可以设置的类型包括:
1. 像素(px):指定具体的像素值作为宽度或高度。
2. 百分比(%):相对于父元素的百分比来设置宽度或高度。
3. inherit(继承):表示元素将继承父元素的宽度或高度值。这个用的不多。
4. auto(自动):表示元素的宽度或高度将根据内容自动调整。对于宽度属性,大多用在自适应布局中,特别是对于一些动态内容或者需要根据内容自动调整大小的元素。
5. 视窗单位(vw、vh):这是 CSS3 里面的属性也稍微提一下,这个是相对于视口大小的单位,vw 表示视口宽度的百分比,vh 表示视口高度的百分比。例如,50vh,就代表可视窗口 50% 的高度。
以下代码,展示了一个元素的宽度使用百分比(50%)和高度使用像素(200px)的情况:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Width and Height Example</title>
<style>
.box {
width: 50%;
height: 200px;
background-color: #98b1f1;
}
</style>
</head>
<body>
<div class="box">这是一个示例文本框,宽度为父元素宽度的 50%,高度为固定的 200px。


