DIV CSS寬度width樣式屬性

CSS 寬度是指通過CSS 樣式設(shè)置對(duì)應(yīng)div寬度，以下我們了解傳統(tǒng)html寬度、寬度自適應(yīng)百分比、固定寬度等寬度知識(shí)。

傳統(tǒng)Html 寬度屬性單詞：width 如width="300";
CSS 寬度屬性單詞：width 如width:300px;

width寬度目錄

1. Width語法結(jié)構(gòu)
2. 寬度用法說明
3. html標(biāo)簽內(nèi)寬度width元素
4. 固定寬度用法案例
5. 自適應(yīng)百分比寬度案例
6. css width總結(jié)

一、Width語法結(jié)構(gòu)知識(shí)：   -   TOP

.divcss5{Width:200px}
設(shè)置divcss5類寬度為200px（像素）

.divcss5{width:20%}
設(shè)置divcss5類寬度為20%(相對(duì)與父級(jí)百分比寬度)

DIV CSS寬度(CSS width)屬性關(guān)系圖解

CSS width寬度結(jié)構(gòu)分析圖

二、寬度用法   -   TOP

1、Width:100%(以百分比計(jì)算寬度)
2、width:200px;（寬度為200像素(px)）
3、Width:20em(寬度為20相對(duì)長度單位)

三、原始html標(biāo)簽內(nèi)寬度width元素屬性   -   TOP

1）、設(shè)置html表格寬度：<td width="200">內(nèi)容</td>或<td width="20%">內(nèi)容</td>
2）、設(shè)置img圖片寬度：<img src="圖片地址" width="200" />

以上寬度都是直接設(shè)置標(biāo)簽對(duì)象寬度，并且注意“等號(hào)”后跟具體數(shù)字寬度值（或百分比），具體寬度值不用跟長度單位，默認(rèn)以像素(px)為單位，在TABLE表格標(biāo)簽或圖片img標(biāo)簽內(nèi)設(shè)置寬度時(shí)候其值不跟html單位，默認(rèn)以像素為單位。

四、div+css固定寬度應(yīng)用案例   -   TOP

案例描述：
我們對(duì)一個(gè)命名為“divcss5”的類對(duì)象設(shè)置寬度為200px寬度，為了能看出效果，我們對(duì)對(duì)象加一個(gè)紅色css邊框(css border)

1、案例CSS代碼：
.divcss5{width:200px;border:1px solid #F00}

2、案例Html代碼片段：
<div class="divcss5">我的寬度為200px</div>

3、寬度用法案例截圖

CSS寬度width應(yīng)用案例

說明，灰色部分為css注釋，擴(kuò)展知識(shí)（html注釋）。

五、DIV CSS百分比寬度 自適應(yīng)寬度案例   -   TOP

常常我們看見一個(gè)網(wǎng)頁寬度隨瀏覽器寬度改變而自動(dòng)改變，如www.一樣，寬度是自適應(yīng)寬度。這里運(yùn)用了百分比即可實(shí)現(xiàn)自適應(yīng)寬度。
如果網(wǎng)頁總寬度為80%即width:80%;，將使此寬度知道自適應(yīng)寬度為瀏覽器80%。當(dāng)然前提是設(shè)置最外層沒有寬度限制條件下。

DIV CSS 自適應(yīng)寬度例子：
CSS樣式代碼：

<style type="text/css"> 
body{ margin:0 auto; text-align:center;} 
.yangshi{ width:80%; border:1px solid #003; margin:0 auto;} 
</style> 

Html中body div代碼：

這樣即設(shè)置內(nèi)容居中，為了方便測(cè)試加上1px黑色邊框。大家可以測(cè)試觀察其內(nèi)容是隨瀏覽器拉大而寬度變寬而自適應(yīng)寬度80%，而左右兩邊始終有10%寬度留著，因?yàn)樵O(shè)置此box寬度為80%。

以上為CSS 寬度（width）演示圖解。

六、css 寬度width總結(jié)   -   TOP

一般對(duì)象設(shè)置寬度，我們只需到CSS選擇器中設(shè)置寬度屬性單詞加具體長度數(shù)字單位值加單位即可，有時(shí)我們需要設(shè)置寬度為百分比，記得百分比值是由數(shù)字+“%”百分號(hào)。通過圖例和基礎(chǔ)知識(shí)DIVCSS5給大家講解了關(guān)于css寬度知識(shí)，希望大家能掌握其寬度運(yùn)用。

擴(kuò)展閱讀：
1、css min-width最小寬度
2、css max-width最大寬度
3、css height高度