自適應內部元素
在css3中width的新的屬性max/min-content和fit-content、fill-availablea屬性，作用是什么？
兼容性如圖,在移動端已經使用，目前都有是有前綴：
例如：
.min-content { width: -webkit-min-content; width: -moz-min-content; width: min-content; }
分別介紹一下這三個屬性的意義：
1.fill-available的意義——自動填滿剩余的空間
就是有個div沒有任何樣式的時候，瀏覽器是按照自動填充的樣式呈現的，就是100%width的樣式填充的。按照盒子模式，不僅元素在block中可以呈現自動填滿空間的樣式，在inline-block上也是可以這樣呈現的（包裹收縮的inline-block元素上，這里說的inline-block是具有收縮特性）。
div { display:inline-block; width:fill-available; }
2.max-content和min-content是會個跟隨有定寬的的最大最小寬度，不會進行收縮。
min-content的例子：
將圖片同級文字顯示根據圖片的大小一樣
3.fit-content的屬性
width:fit-content可以實現元素收縮效果的同時，保持原本的block水平狀態，於是，就可以直接使用margin:auto實現元素向內自適應同時的居中效果了。就是div的自適應寬度不是100%而是內容的大小。很好的實現了，block元素的水平居中
對於三種屬性，2,3分別對1屬性進行比較說明：
如下：
1與2中的min-content屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <style> .box { background-color: #f0f3f9; padding: 10px; margin: 10px 0 20px; overflow: hidden; } .inline-block { display: inline-block; } .min-content { width: -webkit-min-content; width: -moz-min-content; width: min-content; } </style> <body> <strong>display:inline-block;</strong> <div class="box inline-block"> <img src="flower.jpg"> <p>display:inline-block具有收縮特性，但這里寬度隨文字。而width:min-content隨圖片。</p> </div> <strong>width: min-content;</strong> <div class="box min-content"> <img src="flower.jpg"> <p>display:inline-block具有收縮特性，但這里寬度隨文字。而width:min-content隨圖片。</p> </div> </body> </html>
1與max-content屬性的比較
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <style> .box { background-color: #f0f3f9; padding: 10px; margin: 10px 0 20px; overflow: hidden; } .inline-block { display: inline-block; } .max-content { width: -webkit-max-content; width: -moz-max-content; width: max-content; } </style> <body> <strong>display:inline-block;</strong> <div class="box inline-block"> <img src="flower.jpg"> <p>display:inline-block具有收縮特性，但是，當（例如這里的）描述文字超過一行顯示的時候，其會這行，不會讓自身的寬度超過父級容器的可用空間的，但是，width:max-content就不是醬樣子哦咯！表現得好像設置了white-space:nowrap一樣，</p> </div> <strong>width: max-content;</strong> <div class="box max-content"> <img src="flower.jpg"> <p>display:inline-block具有收縮特性，但是，當（例如這里的）描述文字超過一行顯示的時候，其會這行，不會讓自身的寬度超過父級容器的可用空間的，但是，width:max-content就不是醬樣子哦咯！表現得好像設置了white-space:nowrap一樣，</p> </div> </body> </html>
1 屬性與3書性的比較
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <style> .box { background-color: #f0f3f9; padding: 10px; /* 這里左右方向是auto */ margin: 10px auto 20px; overflow: hidden; } .inline-block { display: inline-block; } .fit-content { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } </style> <body> <strong>display:inline-block;</strong> <div class="box inline-block"> <img src="flower.jpg"> <p>display:inline-block居中要靠父元素，而width:fit-content直接margin:auto.</p> </div> <strong>width: fit-content;</strong> <div class="box fit-content"> <img src="flower.jpg"> <p>display:inline-block居中要靠父元素，而width:fit-content直接margin:auto.</p> </div> </body> </html>
