css学习之-width:auto

2019-08-21  本文已影响0人  灵魂旅者s

1: auto 默认值 至少包含4中不同的宽度表示

(1):充分利用可用空间

(2):收缩与包裹

(3):收缩到最小

(4):超出容器限制

解释:

(1):如果<div> <p>等这些元素设置的宽度是100%,则auto可以充分利用可用空间

(2):典型代表就是浮动和绝对定位、inline-block元素或者bable元素。CSS3 中的 fit-content 指的就是这种宽度表现。

(3):这个最容易出现在batble-layout 为auto 的表格中,

中文每个字都断掉。后来还有了一个更加好听的名字 min-content

(4):除非有明确的width相关设置,否则上面三种情况都不会主动出现超过父级容器宽度,但是存在一些特殊情况。列如内容很长的连续的英文和数字,或者内联元素被设置了white-space:nowrap

代码如下:

坚持在一行内显示文本内容,则会出现上述情况

这个属性值叫作 max-content。

学习自                 -----------------------------------------------------《css世界》

上一篇下一篇

猜你喜欢

热点阅读