width一個(gè)家喻戶曉的屬性询件，我們都知道它的默認(rèn)值是auto缚忧，但是我們該怎么更好的使用width:auto呢僵控？
我們首先來看一下這個(gè)屬性值的寬度表現(xiàn)：
-
充分利用可用空間痕钢。如图柏，
<div>、<p>這些塊級元素的默認(rèn)寬度就是100%充滿父容器的任连。 -
自適應(yīng)性蚤吹。如，內(nèi)聯(lián)元素随抠、
table元素裁着、絕對定位元素和浮動(dòng)元素，由內(nèi)容決定拱她，將寬度收縮到一個(gè)合適的值二驰。 -
收縮到最小。如秉沼，
table-layout為auto的表格中桶雀，由內(nèi)容決定，將寬度收縮到最小值唬复。 -
溢出容器矗积。如，內(nèi)容很長的連續(xù)的英文和數(shù)字敞咧、內(nèi)聯(lián)元素被設(shè)置了
white-space:nowrap棘捣。
充分利用可用空間
元素?fù)碛辛肆鲃?dòng)性才能夠充分利用父元素的空間，那么什么是流動(dòng)性呢休建？所謂流動(dòng)性乍恐，不是看上去寬度100%那么簡單，而是一種margin/border/padding/content自動(dòng)分配水平空間的機(jī)制丰包。
例如下面這段代碼：
.container{
width: 300px;
background-color: #c5c5c5;
}
.article{
margin: 0 10px;
padding: 10px 15px;
border-bottom: 1px solid #d5d5d5;
}
.width{
width: 100%;
}
在我們寫代碼的時(shí)候邑彪，塊級元素就不用設(shè)置width:100%，設(shè)置以后反而會(huì)失去元素的流動(dòng)性胧华。
以上討論的都是元素的普通流寄症，下面我們一起來看一下可不可以通過某種方式將不具有流動(dòng)性的元素?fù)碛邢衿胀饕粯拥奶匦阅兀?/p>
我們利用絕對定位就可以做到宙彪，當(dāng)left、right對立方向的屬性值同時(shí)存在的時(shí)候有巧，其寬度就會(huì)具有完全的流體特性释漆。
代碼如下：
.relative{
position: relative;
width: 200px;
height: 210px;
background: #d8c7b9;
}
.absolute{
position: absolute;
left: 10px;
right: 10px;
margin: 0 10px;
padding: 0 9px;
}
自適應(yīng)性
自適應(yīng)性是指，元素尺寸由內(nèi)容決定篮迎，但永遠(yuǎn)小于包含塊容器的尺寸（包含塊容器尺寸小于元素的“最小寬度”除外）男图。
這里的最小寬度是元素最適合的最小寬度。也是當(dāng)寬度為0時(shí)甜橱，圖片或文字的寬度逊笆。具體的表現(xiàn)規(guī)則如下：
- 東亞文字。如中文岂傲，最小寬度是每個(gè)漢字的寬度难裆。
-
西方文字。最小寬度是由特定的連續(xù)的英文字符單元決定的镊掖。一般會(huì)止于空格乃戈、短橫線、問號及其他非英文字符亩进。如果想要英文和中文一樣症虑，每個(gè)字符作為最小寬度單元，可以使用
word-break:break-all镐侯。 - 圖片侦讨。最小寬度就是該元素內(nèi)容本身的寬度。
具有自適應(yīng)性的一個(gè)典型元素就是按鈕苟翻，下面我們來看看我們常用的按鈕元素是怎么體現(xiàn)這一特性的：
根據(jù)內(nèi)容設(shè)定寬度韵卤，當(dāng)文字足夠多時(shí)自動(dòng)換行。
??小技巧
需求：頁面某個(gè)模塊的文字內(nèi)容是動(dòng)態(tài)的崇猫，應(yīng)視覺要求沈条，希望文字少的時(shí)候居中顯示，超過一行時(shí)居左顯示诅炉。
實(shí)現(xiàn)代碼：
.box{
text-align: center;
padding: 10px;
background-color: #c5c5c5;
}
.content{
display: inline-block;
text-align: left;
}
