width 属性

2019-11-26 16:56:45 浏览数 (2)

用途

<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;
 }

0 人点赞