css中關於寬度屬性width的使用方法總結

CSS 寬度是指通過CSS 樣式設定對應div寬度，CSS寬度屬性為單詞width，寬度width可以設定為以百分比計算寬度、以像素值設定寬度、以相對長度單位設定寬度等等。該屬性得到所有主流瀏覽器的支援。下面將對width屬性的使用方法進行總結。

width屬性的使用

1. 解析width:100%;與width:auto;的區別

如果是p的width:100%，則說明p的width會得到980px就已經充滿p地區，然後自己又有padding，所以會超出p。而當width:auto時它是總體寬度（包括width，margin,padding,border）等於父級寬度（width，不包含父級的margin,padding,border），所以如果padding已經左右佔去10px的空間，那麼width給的值就是960px。但無論是width:100%還是auto，其計算的參照都是父級內容區width值，而非總寬度值.

2. CSS調節圖片的大小，要知道width、height

如何用css調整圖片的大小，使用width和height這兩個屬性，這兩個屬性分別是用來設定元素的寬度和高度的。在CSS初學階段，全部都是使用像素作單位。

3. css 寬度 width

寬度都是直接設定標籤對象寬度，並且注意“等號”後跟具體數字寬度值（或百分比），具體寬度值不用跟長度單位，預設以像素(px)為單位，在TABLE表格標籤或圖片img標籤內設定寬度時候其值不跟html單位，預設以像素為單位。

4. CSS2.1SPEC：視覺格式化模型之width屬性詳解(上)

width屬性有幾種不同的取值方式，有幾下幾種：

(1)寬度值：也就是用CSS長度值來明確地規定一個盒子的寬度，取值單位可以用CSS中支援的長度單位，比如px,em等。

(2)百分比：百分比是根據 包含塊的寬度來計算的。但是如果包含塊的寬度需要根據包含的內容來決定，那麼最終的布局是未定義的，也就是標準中沒有明確規定如何計算寬度值。另外，如果盒子是絕對位置的，那麼它的百分比長度在計算時是根據包含塊的 padding edge的寬度來計算的。

(3)auto：根據CSS標準中規定的寬度計算方法來計算，具體的演算法下文中將詳細介紹

(4)inherit：事實上width屬性是不可繼承的，很奇怪為什麼會有inherit這個選項，實際情況中width屬性一般也很少用到inherit值

5. CSS2.1SPEC：視覺格式化模型之width屬性詳解(下)

"shrink-to-fit"演算法的計算過程：

[1]計算preferred-width:在 除非包含的內容有明確的分行符號(比如有<br/>標籤時)，否則就不換行的情況下，容納其包含的內容所需要的寬度。

[2]計算preferred-min-width:在 能換行時(英文碰到空格或標點符號，出現了區塊層級元素，當然也包含出現了<br/>標籤時)就換行的情況下，容納所包含的內容需要的寬度。

[3]計算available-width:即利用2.2.3節中的公式：

available-width =width of containing block - 'margin-left' - 'border-left-width' - 'padding-left' - 'padding-right' - 'border-right-width' - 'margin-right，這裡也包括所有滾動出去的寬度。

最終的width則為：min(preferred-width, max(preferred-min-width, available-width))。最終的公式可以總結為：最終的寬度以available-width為基準，同時保證不能大於preferred-width以及不能小於preferred-min-width

寬度屬性width使用的相關問答

1. width設定為100%之後列表無法置中

2. php 編輯器添加文章中的圖片 怎麼用正則修改style中width：100%；height：auto；

3. 為何我看到很多人寫的自適應網頁外容器都沒有設定width,只有類似section {display: block; }？

【相關推薦】

1. php中文網詞條： width

2. php中文網免費視頻教程：CSS視頻教程