一個家喻戶曉的屬性，我們都知道它的預設值是auto，但是我們該怎麼更好的使用width:auto呢？
我們首先來看一下這個屬性值的寬度表現：
- 充分利用可用空間 。如，<div>、<p>這些塊級元素的預設寬度就是100%充滿父容器的。
- 自适應性 。如，内聯元素、table元素、絕對定位元素和浮動元素，由内容決定，将寬度收縮到一個合适的值。
- 收縮到最小 。如，table-layout為auto的表格中，由内容決定，将寬度收縮到最小值。
- 溢出容器 。如，内容很長的連續的英文和數字、内聯元素被設定了white-space:nowrap。
充分利用可用空間
元素擁有了流動性才能夠充分利用父元素的空間，那麼什麼是流動性呢？所謂
流動性，不是看上去寬度100%那麼簡單，而是一種margin/border/padding/content自動配置設定水準空間的機制。
例如下面這段代碼：
.container{
width: 300px;
background-color: #c5c5c5;
}
.article{
margin: 0 10px;
padding: 10px 15px;
border-bottom: 1px solid #d5d5d5;
}
.width{
width: 100%;
}
不設定寬度，借助元素的流動性
設定width:100%，流動性消失
在我們寫代碼的時候，塊級元素就不用設定width:100%，設定以後反而會失去元素的流動性。
以上讨論的都是元素的普通流，下面我們一起來看一下可不可以通過某種方式将不具有流動性的元素擁有像普通流一樣的特性呢？
我們利用絕對定位就可以做到，當left、right對立方向的屬性值同時存在的時候，其寬度就會具有完全的流體特性。
代碼如下：
.relative{
position: relative;
width: 200px;
height: 210px;
background: #d8c7b9;
}
.absolute{
position: absolute;
left: 10px;
right: 10px;
margin: 0 10px;
padding: 0 9px;
}
用絕對定位實作流動性]
自适應性
自适應性是指，元素尺寸由内容決定，但永遠小于包含塊容器的尺寸（包含塊容器尺寸小于元素的“最小寬度”除外）。
這裡的
最小寬度是元素最适合的最小寬度。也是當寬度為0時，圖檔或文字的寬度。具體的表現規則如下：
- 東亞文字 。如中文，最小寬度是每個漢字的寬度。
- 西方文字 。最小寬度是由特定的連續的英文字元單元決定的。一般會止于空格、短橫線、問号及其他非英文字元。如果想要英文和中文一樣，每個字元作為最小寬度單元，可以使用word-break:break-all。
- 圖檔 。最小寬度就是該元素内容本身的寬度
具有自适應性的一個典型元素就是
按鈕，下面我們來看看我們常用的按鈕元素是怎麼展現這一特性的：
按鈕的自适應性
根據内容設定寬度，當文字足夠多時自動換行。
小技巧需求：頁面某個子產品的文字内容是動态的，應視覺要求，希望文字少的時候居中顯示，超過一行時居左顯示。
實作代碼：
.box{
text-align: center;
padding: 10px;
background-color: #c5c5c5;
}
.content{
display: inline-block;
text-align: left;
}
利用元素的自适應性