width 是网页设计中用于设置元素宽度的HTML属性或CSS属性。在HTML中，width属性可以直接应用于某些元素（如<img>、<table>、<td>等），用于指定元素的宽度。在CSS中，width属性可以应用于几乎所有元素，通过内联样式、内部样式表或外部样式表来设置。
HTML中的width属性
在HTML中，width属性通常用于设置图像、表格等元素的宽度。例如：
<img src="example.jpg" width="300" alt="示例图片">
在这个例子中，width="300"表示图像的宽度为300像素。
CSS中的width属性
在CSS中，width属性可以应用于任何元素，并且可以使用不同的单位（如像素px、百分比%、em、rem等）来设置宽度。例如：
div {
width: 50%; /* 设置div元素的宽度为父元素宽度的50% */
}
在这个例子中，width: 50%;表示div元素的宽度为其父元素宽度的50%。
案例
假设我们有一个网页布局，其中包含一个导航栏和一个内容区域。我们希望导航栏的宽度固定为200像素，而内容区域的宽度则根据浏览器窗口的大小自动调整。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页布局示例</title>
<style>
.navbar {
width: 200px; /* 导航栏宽度固定为200像素 */
background-color: #f4f4f4;
float: left;
}
.content {
width: calc(100% - 200px); /* 内容区域宽度为剩余宽度 */
background-color: #e0e0e0;
float: left;
}
</style>
</head>
<body>
<div class="navbar">导航栏</div>
<div class="content">内容区域</div>
</body>
</html>
在这个案例中，导航栏的宽度被固定为200像素，而内容区域的宽度则通过calc(100% - 200px)计算得出，确保内容区域始终占据剩余的宽度。