自动 | auto (Basic Box Model) - CSS 中文开发手册 - Break易站
2021-01-26 02:14
自动 | auto (Basic Box Model) - CSS 中文开发手册
width 属性指定了元素内容区的宽度。默认情况下，该属性定义了内容区域的宽度。如果box-sizing设置为border-box，则确定边框区域的宽度。
/*values */ width: 300px; width: 25em; /* value */ width: 75%; /* Keyword values */ width: 25em border-box; width: 75% content-box; width: max-content; width: min-content; width: available; width: fit-content; width: auto; /* Global values */ width: inherit; width: initial; width: unset;
在min-width和max-width属性覆盖width。
| 初始值 | auto |
|---|---|
| 适用元素 | all elements but non-replaced inline elements, table rows, and row groups |
| 是否是继承属性 | no |
| Percentages | refer to the width of the containing block |
| 适用媒体 | visual |
| 计算值 | a percentage or auto or the absolute length |
| Animation type | a length, percentage or calc(); |
| 正规顺序 | the length or percentage before the keyword, if both are present |
语法
width属性被指定为：
以下关键字值之一：available，min-content，max-content，fit-content，auto。
值
border-box如出现, 之前的
content-box如出现, 之前的
auto浏览器将会为指定的元素计算并选择一个宽度.
fill使用?fill-available?行内尺寸或者?fill-available?块级尺寸其中一种来作为合适的书写模式。max-content固有的首选宽度.
min-content固有的最小宽度.
available包含块的宽度减去水平 margin, border 和 padding.
fit-content以下两种情况下的较大值:
固有的最小宽度
固有首选宽度（max-content）和可用宽度（available）的较小值
正式语法
[| ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto
示例
默认宽度
p.goldie {
background: gold;
} The Mozilla community produces a lot of great software.
px 和 em
文章标题：自动 | auto (Basic Box Model) - CSS 中文开发手册 - Break易站
文章链接：http://soscw.com/index.php/essay/47068.html