CSS width 属性 - 绿叶网

CSS width 语法

在 CSS 中，width 属性用于定义元素的宽度。从下图所示的 CSS 盒子模型中可以看出，width 是针对内容区而言的。

CSS 盒子模型2

语法：

width: 取值;

说明：

width 的取值主要有以下 2 种：

关键字：auto（默认值）、fit-content 等。
数值：px、%、rem、vw 等。

对于 width 属性，小伙伴们要清楚以下几点。

如果 width 的值小于 min-width 的值，那么 min-width 的值会覆盖 width 的值（即此时 width 的值为 min-width 的值）。
如果 width 的值大于 max-width 的值，那么 max-width 的值会覆盖 width 的值（即此时 width 的值为 max-width 的值）。
inline 元素（如 span、strong 等）设置 width 和 height 是无效的，需要使用 display 属性将其转换为 block 或 inline-block 才会生效。

CSS width 摘要

属于	CSS 盒子模型
使用频率	高
是否继承	否
默认值	auto
兼容性	查看
官方文档	查看
MDN	查看

CSS width 示例

接下来，我们通过几个简单的例子来讲解一下 CSS width 属性是如何使用的。

示例 1：width 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            height: 100px;
            margin-bottom: 10px;
            background-color: skyblue;
        }
        div:nth-of-type(1) { width: 100px; }
        div:nth-of-type(2) { width: 10rem; }
        div:nth-of-type(3) { width: 20%; }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

页面效果如下图所示。

width 基本用法

示例 2：无法为 inline 元素设置 width

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        span {
            height: 100px;
            margin-bottom: 10px;
            background-color: skyblue;
        }
        span:nth-of-type(1) { width: 100px; }
        span:nth-of-type(2) { width: 10rem; }
        span:nth-of-type(3) { width: 20%; }
    </style>
</head>
<body>
    <span>绿叶网</span>
    <span>绿叶网</span>
    <span>绿叶网</span>
</body>
</html>

页面效果如下图所示。

无法为inline元素设置width

分析：

对于 inline 元素（如 span、strong、em 等）来说，我们是无法为其设置 width 和 height 的。

CSS 与尺寸相关的属性

在 CSS 中，与尺寸相关的属性有很多，常用的如下表所示。

CSS 与尺寸相关的属性
属性	说明
width	定义元素的宽度
height	定义元素的高度
max-width	定义元素的最大宽度，防止其超过此值
max-height	定义元素的最大高度，防止其超过此值
min-width	定义元素的最小宽度，确保其不小于此值
min-height	定义元素的最小高度，确保其不小于此值