Css深刻理解width:auto的用法實例分享

本文主要介紹了Css深刻理解width:auto的用法的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

前言

看了我上篇文章的人可能覺得我小題大做，css2有什麼好看的？那我就參考《css世界》這本書，與大家一同複習理解下具體的點，對我們程式碼的影響。

首先，我們要清楚width預設值就是auto，所以不用去人為寫程式控制其寬度自動哦。

常見的4種寬度表現

充分利用可用空間

##預設區塊元素都是100%父元素寬度，這點大家都知道，但很多人會針對塊元素寫多餘的寬度為100%。

收縮與包裹

常見的是浮動，行內塊元素，絕對定位。我們稱這種特性為包裹性。

縮到最小

這個最容易出現在table-layout為auto表格中，我們不控製表格單元格寬高的時候，當每一列都放不下的時候，會把文字截斷，然而手機號，英文單詞，數字等不能斷，就可能會導致某些只是文字的列，每個字都換行顯示，稱min-content。

超出容器寬度

一般元素不會超出容器顯示，除非以下兩種情況,尤其第一種是初級前端在開發中經常遇到的問題。

1. 內容出現了英文或數字，不換行顯示

2. #設定了樣式white-space:nowrap，不換行。

針對上面兩個問題，可以分別做如下修正。

1. word-break:break-all

2. #white-space:normal

其他特性

外部尺寸與流體特性

正常流寬度

塊元素預設有流體特性，繼承父元素寬度，不會超出父元素寬度。然而有些人還是這樣寫程式碼：

a{
display:block;
width:100%;
}

又或者這樣的程式碼，你給導航中的a標籤設定間距寬度什麼的，其實標籤變成區塊層級之後，會自動根據計算拿到屬於自己的寬度，多此一舉。

.nav{
width:240px}
.nav-a{
display:block;
width:200px;
margin:0 10px;
padding:9px 10px ;}

格式化寬度

格式化寬度指出現在絕對定位模型中，包括絕對定位以及固定位置，只是兩者參考點不同而已。預設其特性為包含性，由內容寬度決定盒子寬度，但是當（非替換元素）left/right同時設定的時候，其寬度為相對於最近的定位特性不是static的祖先元素計算。其寬度會是父元素寬度-left-right,而其他特性仍不變。這點在我們實際的佈局中有很大的用途，例如我分享的css實用技術中的變寬與固寬結合的佈局。

.par{
   width:1000px;
   position:relative;
   }
   //子元素宽度为700px
   .son{
   position:absolute;
   left:100px;
   right:200px;}

內部尺寸與流體特性

#包裹性

包括性是指當元素為非區塊元素的時候，其寬度由內容決定，自己只負責根據需要擴大，而由於外部肯定是塊元素，所以又不會超出容器特性。

實際作用有可以不用腳本實現文字較少水平居中，文字較多，靠左顯示。

.container{
text-align:center;
}
.content{
display:inline-block;
text-align:left;
}

首選最小寬度

這個簡單的理解就是元素的實際寬度取決於內容的最小單元，這個優先權比width:0高。例如你設定了寬度是0，但是內容有一個漢字，就會有一個漢字的大小；為一個單字就會顯示一個單字的大小。

這種實際的用途可以做各種簡單的圖形，例如凹凸形狀的，然後內容設定為白色就可以。

.ao{
width:0;
display:inline-block;
}
.ao:before{
color:#fff;
content:'love你love';
outline:2px solid #000;
}

最大寬度

最大寬度就是元素可以有的最大寬度，一般情況下我們用來限製文字或內容特別多的情況。這樣的實際場景並不多。

在這裡我們只延伸兩種滾動效果，一種是原生的頁面或dom滾動，另一種就是iscroll那樣的設定內部元素與容器的位置關係來展現，效果更好。

相關推薦;

HTML裡怎麼使用margin 0 auto

html5中設定或回音影片是否在載入後開始播放的屬性autoplay

Laravel中autoload方法實作的用法詳解

以上是Css深刻理解width:auto的用法實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！