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:在除非包含的內容有明確的換行符號(比如有
標籤時)，否則就不換行的情況下，容納其包含的內容所需的寬度。

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

[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影片教學

以上是css中關於寬度屬性width的使用方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！