语法
width: auto | lenght | initial | inherit;
“%”中指定的宽度属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
width: 50%;
background-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Width 属性示例</h2>
<div>
经历过风雨，才懂得阳光的温暖。 今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
</div>
</body>
</html>
在给定的示例中，文本的宽度为 50%。
在以下示例中，第一个元素的宽度为 250px，第二个元素的宽度为 25em：
“px”和“em”中指定的宽度属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div.t1 {
width: 250px;
border: 1px solid black;
background-color: #1c87c9;
}
div.t2 {
width: 25em;
border: 1px solid black;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Width 属性示例</h2>
<h3>width: 250px</h3>
<div class="t1">
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</div>
<h3>width: 25em</h3>
<div class="t2">
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</div>
</body>
</html>
CSS width 属性值说明
| 值 | 描述 |
|---|---|
| auto | 浏览器将计算指定元素的宽度。这是默认值。 |
| length | 定义PX，PT，CM等中的宽度。 |
| % | 定义包含元素的百分比宽度。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
CSS width 属性设置元素的宽度。
宽度不包括边框、填充或者边距。
width 属性适用于除非替换元素或者内联元素、表格行和行组（即 <thead>、<tfoot> 和 <tbody>）之外的所有元素。
该属性采用 CSS 长度（px、pt、em 等）、百分比或者关键字 auto。
我们应该提到，用于此属性的百分比基于父元素（即包含块的宽度）。
对于具有基于块容器元素的包含块的绝对定位元素，百分比是根据元素的填充框的宽度计算的。
width 属性可以被 min-width 和 max-width 的属性覆盖。
负的长度值是无效的。
CSS3 规范中添加的许多 width 属性值仍处于试验阶段。
| 初始值 | auto |
|---|---|
| 应用于 | 所有元素。 |
| 继承 | 无效 |
| 可动画的 | 是的。元素的宽度是可动画的。 |
| 版本 | CSS1 |
| DOM 语法 | Object.Style.Width =“300px”; |
日期：2020-06-02 22:14:52 来源：oir作者：oir