呀 我不会写CSS之width:auto!

作者:三省

袋鼠云产品技术部

前端开发工程师

auto是width的默认属性,

会CSS的同学都知道,

那么当width是auto的时候具有哪些表现呢?

于我,完全不知道,捂脸逃走~

深藏不露的width:auto至少包含下面这4种表现:

1.充分利用空间,比如

/

/~宽度默认为父级元素的100%,fill-available。(见下文备注1:不仅仅是简单的100%)

2.收缩和包裹,比如浮动,绝对定位,还有inline-block的元素是由内容把宽度撑开,宽度收缩到合适,fit-content。(见下文备注2:不仅仅是合适)

3.收缩到最小,这个我还真不知道怎么解释,如果父元素的宽度有限,当前元素内容换行的原则是中文每一个字都可以换行,英文不可以随意换行,根据前面两条规则来换行使得内容能够完全填充,这种行为即收缩到最小,min-content。换行的目的是为了不超过父级元素。

如果父元素的宽度是0,那么又存在下面两种情况(跑偏了~跑偏了~)

4.超出容器限制,上面三种情况的元素都不会主动超过父级元素的宽度(备注:特别是第三点收缩到最小,目的也是为了不超过父级元素的宽度),除非是很长的英文,或者设置了样式white-space:nowrap的元素。

链接:

https://www.zhangxinxu.com/wordpress/2018/07/css-width-auto/

备注1:fill-available,不简单的完全填充

前面有提到fill-available的宽度是100%填充父级元素,但不仅仅是100%,因为这里涉及到margin/border/padding/content自动分配机制。

每个元素都有四层结构,margin/border/padding/content,如果在元素上设置100%,默认情况下(不设置box-sizing)这个100%作用在content层面上,那么如果在这个元素上也同时设置margin/border/padding的话,绝对超出父级元素,微笑脸。

所以说width:auto使得元素的宽度100%填充父级元素不简单,毕竟这个完全填充帮你把margin/border/padding/content都规划得好好的,你只需要关注内容就可以了。

不过CSS3中有个优秀的属性也是来帮我们解决完全填充问题的,box-sizing,说到box-sizing又不得不提标准盒模型和怪异盒模型,事实上box-sizing的各个值对应了元素的四层结构,margin-box/border-box/padding-box/content-box,这四个值指元素宽度设置100%时的作用域。不过margin-box没有应用场景,padding-box的应用场景渐弱,只有Firefox 50之前支持,后面的版本不再支持,现在可以设置的属性值是unset/initial/inherit/content-box/border-box。

content-box对应的是标准盒模型,width:100%作用在content层,也就是我们在开发时采用的默认模式。

border-box对应的是怪异盒模型,也叫做IE盒模型,width:100%作用在border层。

box-sizing请参考

链接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

备注2:fit-content,内容再怎么多,

宽度也不能比父元素大,体现包裹性

又是前面提到的,对于inline-block的元素,宽度由内容撑开,但总是比父元素的宽度小,小于等于父元素的宽度。

这种特性很有意思,在《CSS世界》一书中有介绍。比如这种场景,元素的内容不定,内容少的时候居中显示,内容多的时候左对齐。

//我会居中

数据智能,让未来变成现在

//我会左对齐

欢迎关注袋鼠云技术团队微信公众号

来自《CSS世界》的一个彩蛋

box-sizing可以改变width:100%的作用域,那在没有box-sizing属性的那个时代,设置了width:100%同时又需要设置border和padding,怎么破?!怎么破?!

宽度分离原则

width独占一层标签,margin/border/padding占一层标签。在标准盒模型下,遵循这样的原则同样可以让元素流动起来。

说起来,下面这种真是邪恶的操作

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181212G0MUXS00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券