上查看所有课程
CSS width 和 height 属性用于指定元素的尺寸（宽度和高度）。例如，
h1 {
width: 200px;
height: 100px;
background-color: orange;
}浏览器输出
在此，h1 元素的 width 和 height 分别为 200px 和 100px。
CSS 宽度/高度 语法
width 和 height 属性的语法如下：
width/height: auto | length | percentage | initial | inherit;这里，
auto：浏览器计算高度和宽度（默认值）length：以 px、cm 等为单位定义高度/宽度percentage：使用百分比 (%) 值定义宽度和高度initial：将高度/宽度设置为其默认值inherit：继承其父元素的值
元素的 width 和 height 可以用绝对单位和相对单位设置。
绝对单位是固定的度量，不会随其他元素的大小而改变，而相对单位则基于父元素的大小。
示例：CSS auto 值
让我们看一个使用 auto 值的示例，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS width/height</title>
</head>
<body>
<div>This div element has the width and height set to auto.</div>
<span>This span element has the width and height set to auto.</span>
</body>
</html>div {
width: auto;
height: auto;
background-color: skyblue;
margin-bottom: 12px;
}
span {
width: auto;
height: auto;
background-color: gold;
}浏览器输出
在上面的例子中：
- 块级元素
div将宽度扩展到填满直到角落的整个水平空间 - 行内级元素
span根据内容长度调整宽度
CSS 绝对宽度和高度示例
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS width/height</title>
</head>
<body>
<div class="first">
This div element has a width of 600px and a height of 40px.
</div>
<div class="second">
This div element has a width of 300px and a height of 80px.
</div>
</body>
</html>div.first {
width: 600px;
height: 40px;
background-color: skyblue;
}
div.second {
width: 300px;
height: 80px;
background-color: gold;
}浏览器输出
在上面的示例中，绝对单位像素 (px) 导致 div 元素具有相同的 width 和 height，而不管屏幕尺寸或分辨率如何。
CSS 相对宽度和高度示例
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS width/height</title>
</head>
<body>
<p>This outer paragraph has both a width and a height of 50%.</p>
<div>
<p>This inner paragraph has both a width and a height of 50%.</p>
</div>
</body>
</html>/* specifying the width and height of the body */
body {
width: 100%;
height: 300px;
}
/* adds 50% width and height to both p elements */
p {
width: 50%;
height: 50%;
background-color: skyblue;
}
div {
width: 50%;
height: 50%;
background-color: gold;
}浏览器输出
在上面的示例中，p 元素具有不同的输出，即使两个元素具有相同的样式。
这是因为 width 和 height 是相对于元素父元素的大小计算的。
第一个段落的 width 和 height 是相对于父级（即 body 元素）的大小计算的，而第二个段落的 width 和 height 是相对于 div 元素计算的。
使用行内元素设置宽度和高度
我们不能为行内元素添加 width 和 height。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS width/height</title>
</head>
<body>
<span>This is a span element.</span>
</body>
</html>span {
width: 300px;
height: 100px;
background-color: skyblue;
}浏览器输出
在上面的示例中，width 和 height 属性被浏览器忽略了。
这是因为行内元素被设计为与文本一起流动，并且它们的大小由元素的内容决定。
但是，我们可以通过将行内元素的 display 属性设置为 block 或 inline-block 来添加 width 和 height。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS width/height</title>
</head>
<body>
<span>This is a span element.</span>
</body>
</html>span {
display: inline-block;
width: 300px;
height: 100px;
background-color: skyblue;
}浏览器输出
在上面的示例中，width 和 height 值已应用于 span 元素。
注意：height 和 width 属性仅应用于元素的内容，不包括元素的 border、padding 和 margin。此行为可以使用 box-sizing 属性进行更改。
绝对宽度的弊端
绝对 width 值会导致元素的宽度固定，而不管用于查看网页的屏幕尺寸或设备如何。
这可能导致元素溢出、内容被截断或布局无法很好地适应不同屏幕尺寸等问题。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS width</title>
</head>
<body>
<p>
In the world of computer science, the path of discovery is paved
with lines of code, each representing a stroke of genius, a eureka
moment captured in a digital form.
</p>
</body>
</html>p {
width: 1020px;
}浏览器输出
在上面的示例中，p 元素的 width 是 1020px。当浏览器尺寸减小到 760px 时，内容被截断，导致信息不完整。
max-width 属性通常用于解决此问题。
max-width 属性定义了元素可以拥有的最大 width，使其在较小的宽度下更具灵活性和响应性。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS max-width</title>
</head>
<body>
<p>
In the world of computer science, the path of discovery is paved
with lines of code, each representing a stroke of genius, a eureka
moment captured in a digital form.
</p>
</body>
</html>p {
max-width: 1020px;
}浏览器输出
在这里，max-width 属性使 p 元素能够适应较小的浏览器尺寸，从而使内容属性可见。