在html5页面开发过程中，合理设置元素宽度是保障页面布局符合设计需求的基础操作，开发者可以通过html原生的width属性或者CSS样式两种方式来调整元素的宽度，还能实现固定宽度和自适应宽度两种效果。
一、使用html5的width属性设置宽度
部分html元素本身支持width属性，可以直接在标签内定义宽度值，这种方式通常用于设置替换元素（如img、video、input等）的宽度。
1. 固定宽度设置
直接给width属性赋值具体的像素值，元素宽度就会固定为对应数值，不会随页面尺寸变化而改变。
<!-- 设置图片固定宽度为200px --> <img src="test.jpg" width="200" alt="固定宽度图片"> <!-- 设置输入框固定宽度为300px --> <input type="text" width="300" placeholder="请输入内容">
2. 自适应宽度设置
部分元素的width属性支持百分比取值，此时元素宽度会相对于父容器的宽度进行计算，随父容器宽度变化而自适应调整。
<!-- 设置视频宽度为父容器的80%，随父容器自适应 --> <video src="test.mp4" width="80%" controls></video>
二、使用CSS设置元素宽度
通过CSS设置宽度是更灵活通用的方式，适用于所有html元素，还能结合更多布局规则实现复杂效果。
1. 固定宽度设置
使用CSS的width属性，赋值像素值即可实现固定宽度，这种方式优先级高于元素自带的width属性。
/* 类名为box的元素固定宽度为400px */
.box {
width: 400px;
}
<div class="box">我是固定宽度400px的容器</div>
2. 自适应宽度设置
CSS中width属性同样支持百分比取值，还可以结合max-width、min-width属性限制自适应宽度的范围，避免元素过宽或过窄。
/* 容器宽度自适应父容器，最小宽度300px，最大宽度1200px */
.container {
width: 100%;
min-width: 300px;
max-width: 1200px;
margin: 0 auto; /* 居中显示 */
}
<div class="container">我是自适应宽度的容器，会在300px到1200px之间变化</div>
三、两种设置方式的区别与选择
下面通过表格对比两种设置方式的特点，帮助开发者根据场景选择：
| 设置方式 | 适用元素 | 灵活性 | 优先级 |
|---|---|---|---|
| html的width属性 | 仅部分替换元素支持 | 较低，仅支持固定值和百分比 | 低于CSS设置的width |
| CSS的width属性 | 所有html元素 | 较高，可结合其他CSS属性实现复杂效果 | 高于html的width属性 |
如果只需要给img、input等替换元素设置简单宽度，两种方式都可以选择；如果需要给普通div、p等元素设置宽度，或者需要结合布局规则实现自适应效果，优先选择CSS设置宽度的方式。
四、注意事项
- html的width属性取值如果是数字，默认单位是像素，不需要额外加px；CSS的width属性如果是像素值必须加px单位，否则样式无效。
- 设置元素宽度时如果需要考虑内边距和边框的影响，可以搭配
box-sizing: border-box;属性，让宽度包含内边距和边框，避免元素实际宽度超出预期。 - 自适应宽度设置时，要确保父容器有明确的宽度，否则百分比宽度可能无法正常计算。
注意：html5中已经不推荐在非替换元素上使用width属性，普通布局场景建议统一使用CSS设置宽度，更符合标准规范。