DIV 寬度設定方法技巧 width

CSS 中設定 DIV 的寬度是非常常用的一種手法,寬度通常搭配著高度(height)一起使用,可以用來設定一個 div 元素的大小,幾乎所有主流的瀏覽器都支援 width 的設定方法,讓我們先來看看基本語法怎麼寫:

width:寬度値;

寬度値可以設定為數字加單位或百分比,直接來看範例吧!

範例一、直接給 div 寬度一個固定數值


開啟程式碼頁面

範例中我們將 div 的寬度 width 設為 200px,順便設定了背景顏色為淺紫色,這樣呈現結果會比較清楚一點

呈現結果



範例二、給 div 寬度一個百分比


開啟程式碼頁面

呈現結果


此範例我們特地用了兩個 div 來表示,如果要用 % 來設定寬度,必須有個重要觀念:百分比是相對的。我們先將一個 div 的寬度設為 250px 寬,裡面包著一個寬度設為 80% 的 div,所以藍色的區塊僅佔紅色區塊的 80%,所以呈現結果就如圖所示那樣,藍色的寬度比紅色的短。

延伸閱讀
© Copyright webtech.tw Since 2010