width 属性

Html5知典

发布于 2019-11-26 16:56:45

5290

发布于 2019-11-26 16:56:45

文章被收录于专栏：Html5知典Html5知典

用途

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

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2018-09-04，如有侵权请联系 cloudcommunity@tencent.com 删除

border