呀~我不会写CSS之width:auto!

  1. 云栖社区>
  2. 袋鼠云技术团队>
  3. 博客>
  4. 正文

呀~我不会写CSS之width:auto!

袋鼠云 2018-12-14 15:16:25 浏览685
展开阅读全文
b6c997c22c7fef601cfc1a1f8b4b1df2da72b501
19b238a95e0fe37190ee40b38a68b61bbf925148

auto是width的默认属性,

会CSS的同学都知道,

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

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

c6d0e3714136c250e687a9561af90c65f08b48ee

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

1.充分利用空间,比如<div>/<p>/<h1>~<h6>宽度默认为父级元素的100%,fill-available。(见下文备注1:不仅仅是简单的100%)

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

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

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

<div style="width: 0;">
<p>中文中文中文中文中文English中文中文</p> //<p>元素的width为0
</div>
<div style="width: 0;">
<a>中文中文中文中文中文English中文中文</a> //<a>元素的width为English占据的宽度
</div>

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

此处可阅读

2c645dfff8148c96b26be1330a2e96eaf489b639

备注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请参考

61e8a0071c55135f20c4b1be418c9383378dc37b

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

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

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

//这是一个会换行的button
//<input type="button">不会换行,它默认white-space:pre,设置为white-space:normal即可
<div style="width:30px">
<button>欢迎关注袋鼠云技术团队微信公众号<button>
</div>

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

//我会居中
<div style="width:200px; text-align:center;">
<button style="text-align:left;">数据智能,让未来变成现在<button>
</div>
//我会左对齐
<div style="width:200px; text-align:center;">
<button style="text-align:left;">欢迎关注袋鼠云技术团队微信公众号</button>
</div>
72bccdf8656e32e198050114e5692d5789c5c899

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

5df70ccb56ddb8400aea255e8d68c9e03ca56987

宽度分离原则

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

<div style="width:100%;">
<div style="border:1px solid #ccc; padding:5px;">content...</div>
</div>

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

//假如父级元素是100px
<div style="width:88px; padding:5px; border:1px solid #ccc;">
content...
</div>
//假如我不知道父元素的宽度,那么我也没辙啦~

网友评论

登录后评论
0/500
评论
袋鼠云
+ 关注
所属云栖号: 袋鼠云技术团队