width

width 规定元素内容区的宽度。内容区域在元素 padding，border 和 margin 内。

min-width 和 max-width 属性都可覆盖 width。

 

语法

/* <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 此关键词表示内在的最小宽度或首选宽度和可用宽度的较小值。

例子

HTML 

<div id="gray">
    Hudaokeji.
</div>

CSS 

#gray {
     width: 200px;
     margin: auto;
     background: gray;
     text-align: center;
}

执行结果

Hudaokeji.

参考

相关页面

外部链接


跳至内容顶部