用途
<width> 规定标签内容区的宽度。内容区域在标签 padding,border 和 margin 内。
min-width 和 max-width 属性都可覆盖 width。
语法
代码语言:javascript复制/* <length> value */
width: 25em;
/* <percentage> value */
width: 95%;
/* Keyword values */
width: border-box
width: content-box
width: max-content
width: min-content
width: available
width: fit-content
width: auto
值
值 | 描述 |
---|---|
<length> | 此关键词表示可能的长度单位。 |
<percentage> | 此关键词表示相当于包含该元素的块的款度(即相当于该块的百分比)。 |
border-box | 此关键词表示之前的 length 和 percentage 应用到元素的边框盒子。 |
content-box | 此关键词表示之前的 length 和 percentage 应用到元素的内容盒子。 |
auto | 此关键词表示浏览器将会为指定的元素计算并选择一个宽度。 |
fill | 此关键词表示使用 fill-available 行内尺寸或者 fill-available 块级尺寸其中一种来作为合适的书写模式。 |
max-content | 此关键词表示内在的首选宽度。 |
min-content | 此关键词表示内在的最小高度。 |
available | 此关键词表示包含块的宽度减去水平 margin , border 和 padding。 |
fit-content | 此关键词表示内在的最小宽度或首选宽度和可用宽度的较小值。 |
例子
代码语言:javascript复制/* HTML*/
<div id="gray"> Hudaokeji. </div>
/* CSS*/
#gray {
width: 200px;
margin: auto;
background: gray;
text-align: center;
}