display:inline-block 當文字內容超過最大限制寬度時會換行
width:max-content 當文字內容超過最大限制寬度時不換行
display:inline-block具有收縮特性,但是,當(例如這里的)描述文字超過一行顯示的時候,其會這行,不會讓自身的寬度超過父級容器的可用空間的,但是,width:max-content就不是醬樣子哦咯!表現得好像設置了white-space:nowrap一樣,
min-content寬度表示的並不是內部那個寬度小就是那個寬度,而是,采用內部元素最小寬度值最大的那個元素的寬度作為最終容器的寬度。
首先,我們要明白這里的“最小寬度值”是什么意思。替換元素,例如圖片的最小寬度值就是圖片呈現的寬度,對於文本元素,如果全部是中文,則最小寬度值就是一個中文的寬度值;如果包含英文,因為默認英文單詞不換行,所以,最小寬度可能就是里面最長的英文單詞的寬度。
isplay:inline-block具有收縮特性,但這里寬度隨文字。而width:min-content隨圖片。
width:fit-content也是應該比較好理解的,“shrink-to-fit”表現,換句話說,和CSS2.1中的float, absolute, inline-block的尺寸收縮表現是一樣的。
display:inline-block居中要靠父元素,而width:fit-content直接margin:auto.
div { display:inline-block; width:fill-available; }
fill-available的意義——自動填滿剩余的空間
就是有個div沒有任何樣式的時候,瀏覽器是按照自動填充的樣式呈現的,就是100%width的樣式填充的。按照盒子模式,不僅元素在block中可以呈現自動填滿空間的樣式,在inline-block上也是可以這樣呈現的(包裹收縮的inline-block
元素上,這里說的inline-block是具有收縮特性)。