使用width属性结合不同单位可灵活设置元素宽度。固定单位如px、cm、in用于精确控制；相对单位如%、vw、em、rem适应响应式布局；auto、fit-content等值实现自动调整；配合box-sizing可控制宽包含范围，提升布局精度。
在CSS3中，设置元素宽度有多种方式，可以根据布局需求灵活选择。最核心的方法是使用 width 属性，配合不同的单位和值类型来控制元素的宽。
使用固定单位设置宽度
通过像素（px）、厘米（cm）、英寸（in）等固定单位设定宽度，适用于需要精确控制尺寸的场景。
• width: 200px; —— 设置元素宽为200像素• width: 5cm; —— 设置宽度为5厘米
• width: 2in; —— 设置宽度为2英寸
使用相对单位设置宽度
相对单位让元素宽度更具适应性，适合响应式设计。
• width: 50%; —— 宽度为父容器宽度的一半• width: 30vw; —— 视口宽度的30%
• width: 20em; —— 相对于当前字体大小的倍数
• width: 40rem; —— 相对于根元素字体大小的倍数
使用自动与弹性宽度
让浏览器自动计算宽度，或根据内容动态调整。
Yes!SUN企业网站系统 3.5 Build 20100303
下载
Yes!Sun基于PHP+MYSQL技术，体积小巧、应用灵活、功能强大，是一款为企业网站量身打造的WEB系统。其创新的设计理念，为企业网的开发设计及使用带来了全新的体验：支持前沿技术：动态缓存、伪静态、静态生成、友好URL、SEO设置等提升网站性能、用户体验、搜索引擎友好度的技术均为Yes!Sun所支持。易于二次开发：采用独创的平台化理念，按需定制项目中的各种元素，如：产品属性、产品相册、新闻列表
立即学习“前端免费学习笔记（深入）”；
• width: auto; —— 默认值，由浏览器决定宽度（常用于块级元素填满父级）• width: fit-content; —— 宽度由内容决定，最大不超过容器
• width: max-content; —— 宽度等于内容最大所需空间（可能溢出）
• width: min-content; —— 宽度等于内容最小可压缩宽度
结合box-sizing控制盒模型
width 设置的是内容区宽度，但通过 box-sizing 可改变宽度包含范围。
• box-sizing: content-box; —— width 仅包括内容（默认）• box-sizing: border-box; —— width 包括内容、内边距和边框，更易控制整体尺寸
基本上就这些方法，合理搭配单位和属性能让布局更精准、更灵活。注意在响应式设计中优先使用相对单位和弹性值。不复杂但容易忽略细节。
