一、深藏不露的width:auto
本节内容选自《CSS世界》第3.2.1的引言部分。
我们应该都知道,width
的默认值是'auto'
,'auto'
由于是默认值,出镜率不高,但是,却是个深藏不露的家伙,包含了至少下面4种不同的宽度表现:
- 充分利用可用空间
比方说,
<div>
,<p>
这些元素的宽度默认是100%于父级容器的。这种充分利用可用空间的行为还有个专有名字,叫做"fill-available"
。实际上,对于inline-block
水平的元素,也会存在充分利用可用空间的场景,就是里面元素内容已经超过一行,宽度表现大于容器宽度的时候。 - 收缩与包裹
典型代表就是浮动,绝对定位,
inline-block
水平元素或table
表格,英文称为“shrink-to-fit”,直译为“收缩到合适”,有那么点意思,但不够形象,我自己一直把这种现象称为“包裹性”。CSS3中的"fit-content"
指的就是这种宽度表现。 - 收缩到最小
这个最容易出现在
table-layout
为auto
的表格中,想必有经验的小伙伴一定见过下面这样一柱擎天的盛况的吧!大家空间都不够的时候,文字能断的就断,中文是随便断的,英文单词不能断。于是乎,第一列被无情地每个字都断掉,形成一柱擎天。这种行为称之为“preferred minimum width”“或者“minimum content width”。后来还有了一个更加规范好听的名字
"min-content"
。 - 超出容器限制
上面1~3情况,除非有明确的
width
相关设置,否则尺寸都不会主动超过父级容器宽度的,但是,存在一些特殊情况,例如,连续的英文数字,好长好长;或者内联元素被设置了white-space:nowrap
,则表现为“恰如一江春水向东流,流到断崖也不回头”。例如下面的CSS代码:
.father { width: 150px; background-color: #cd0000; white-space: nowrap; } .child { display: inline-block; background-color: #f0f3f9; }
结果:
子元素即保持了inline-block元素的收缩特性,同时最大内容宽度,直接无视了父级容器的宽度限制。这种现象后来就有了专门的属性值描述,叫做
"max-content"
,了解即可。
上面就是width:auto
在不同场景下的宽度表现……的简介。
没错,上面说了这么多都是简介,更多知识点篇幅原因就不展开,有兴趣可以去书里寻找。
二、CSS3中的width:auto
在CSS3中,width:auto
多种尺寸表现有了专门的属性值进行对应。
包括fill-available
, max-content
, min-content
, 以及fit-content
。语法如下:
.example1 { width: fill-available; } .example2 { width: max-content; } .example3 { width: min-content; } .example4 { width: fit-content; }
目前有些属性生效还需要webkit私有前缀。
在移动端目前是可以使用的,我自己用下来还不错。保留元素原始的display
计算值,又能有其他不一样的宽度表现。
以上CSS3新的width
属性值我之前有专门写过文章介绍,“理解CSS3 max/min-content及fit-content等width值”,年代久远,估计已经湮没了,今天借此机会再唤醒下。
三、结束语
端午节站点全面https升级后,不知道是因为服务器IP变了,还是其他什么原因,搜索引擎的收录断崖式下跌,[捂脸],所以,难免有些焦虑,比方说这篇文章,写到最后才发现尼玛原来之前写过类似的文章,有些水,罪过罪过。
https升级还是要升的,以前的收录丢了就丢了吧,就当重新开始,从零出发,再开始慢慢积累。
(本篇完)