本文主要介紹了Css深刻理解width:auto的用法的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
前言
看了我上篇文章的人可能覺得我小題大做，css2有什麼好看的？那我就參考《css世界》這本書，與大家一同複習理解下具體的點，對我們程式碼的影響。
首先，我們要清楚width預設值就是auto，所以不用去人為寫程式控制其寬度自動哦。
常見的4種寬度表現
充分利用可用空間
##預設區塊元素都是100%父元素寬度，這點大家都知道，但很多人會針對塊元素寫多餘的寬度為100%。收縮與包裹
常見的是浮動，行內塊元素，絕對定位。我們稱這種特性為包裹性。縮到最小
這個最容易出現在table-layout為auto表格中，我們不控製表格單元格寬高的時候，當每一列都放不下的時候，會把文字截斷，然而手機號，英文單詞，數字等不能斷，就可能會導致某些只是文字的列，每個字都換行顯示，稱min-content。超出容器寬度
一般元素不會超出容器顯示，除非以下兩種情況,尤其第一種是初級前端在開發中經常遇到的問題。其他特性
外部尺寸與流體特性
正常流寬度塊元素預設有流體特性，繼承父元素寬度，不會超出父元素寬度。然而有些人還是這樣寫程式碼：
a{
display:block;
width:100%;
}.nav{
width:240px}
.nav-a{
display:block;
width:200px;
margin:0 10px;
padding:9px 10px ;}.par{
width:1000px;
position:relative;
}
//子元素宽度为700px
.son{
position:absolute;
left:100px;
right:200px;}內部尺寸與流體特性
#包裹性包括性是指當元素為非區塊元素的時候，其寬度由內容決定，自己只負責根據需要擴大，而由於外部肯定是塊元素，所以又不會超出容器特性。 實際作用有可以不用腳本實現文字較少水平居中，文字較多，靠左顯示。.container{
text-align:center;
}
.content{
display:inline-block;
text-align:left;
}.ao{
width:0;
display:inline-block;
}
.ao:before{
color:#fff;
content:'love你love';
outline:2px solid #000;
}html5中設定或回音影片是否在載入後開始播放的屬性autoplay
以上是Css深刻理解width:auto的用法實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
