CSS排版程式(5)-模組方塊設計

在CSS裡非常強調「模組」的概念,每一對HTML標籤都是模組化的物件,並且透過

(參考HTML進階格式篇)將數個物件群組化,透過群組化的動作,可以一起移動群組物件。

本節介紹的是模組方塊語法,但是在此之前我們必需要了解它所代表的含意。

  • margin:框線外側與外面物件的距離。
  • border:模組方塊的框線,可以指定粗細、顏色、樣式。
  • padding:框線內側與內容之間的距離。

CSS Box Model

圖片來源:W3School

至於 width(寬度)和 height(高度)則表示「內容(content)」的寬度或高度,因此如果將內容的寬度設成 200px,border 設為 5px,margin 和 padding 都是 0px,則實際顯示出來的寬度會是 210px(左右框線合為 10px)。但是 IE 瀏覽器的寬度卻是 border+padding+content=width,如果要避免造成不同瀏覽器顯示結果不一致,則必需要加入 DOCTYPE 宣告,詳情請參考HTML架構與準則支援不同瀏覽器

屬性名稱

width(寬度)、height(高度)、max-width(最大寬度)、max-height(最大高度)、min-width(最小寬度)、min-height(最小高度)

margin(外邊界):margin-top、margin-right、margin-bottom、margin-left

border(框線):border-width(框線寬度)、border-style(框線樣式)、border-color(框線顏色)、border-collapse(框線折疊)、border-spacing(儲存格間距)

border-top:border-top-width、border-top-style、border-top-color

border-right:border-right-width、border-right-style、border-right-color

border-bottom:border-bottom-width、border-bottom-style、border-bottom-color

border-left:border-left-width、border-left-style、border-left-color

padding(內邊界):padding-top、padding-right、padding-bottom、padding-left

outline(輪廓):outline-color(輪廓顏色)、outline-style(輪廓樣式)、outline-width(輪廓寬度)

border

說明:設定框線的綜合屬性。是border-width、border-style、border-color的集合體。屬性值必須按照順序排列,允許缺少的值。此語法不提供範例結果。

屬性值:(border-width) (border-style) (border-color)、inherit(繼承父元素設定)

【範例】

.box { border:solid red; }

border-collapse

說明:原始表格有一個框線,儲存格四邊也有各自的線,border-collapse 屬性指示是否折疊,將相鄰的線合併。表格語法請參考「通用HTML(6)-【表格篇】」。

屬性值:collapse(折疊框線)、separate(邊框獨立,預設值)、inherit(繼承父元素設定)

【範例】

.table1 {
    border-collapse:collapse;
}
.table2 {
    border-collapse:separate;
}

【結果】

   
   

border-color

說明:設定框線的顏色。顏色的表示方法可參考「網路色彩的表示法」。

屬性值:(顏色)、transparent(透明,預設值)、inherit(繼承父元素設定)

【範例】

.box {
    border-color:red;

    border-width:1px;
    border-style:solid;
}

【結果】

框線可套用於段落

border-spacing

說明:當 border-collapse 屬性值為 separate 時,可指定儲存格間距。表格語法請參考「通用HTML(6)-【表格篇】」。

屬性值:(水平長度) (垂直長度)、inherit(繼承父元素設定)

【範例】

.table {
    border-spacing:1px 5px;
}

【結果】

   

border-style

說明:設定框線的樣式。不同瀏覽器顯示出來的樣式會有些微差異。

屬性值:none(無)、hidden(隱藏)、dotted(點)、dashed(虛線)、solid(實線)、double(雙實線)、groove(3D凹線)、ridge(3D凸線)、inset(3D凹槽)、outset(3D平台)、inherit(繼承父元素設定)

【範例】

.box1 { border-style:solid; }               /* 四邊實線 */
.box2 { border-style:dotted solid; }            /* 上下點線,左右實線 */
.box3 { border-style:dotted solid double; }     /* 上點線,左右實線,下雙實線 */
.box4 { border-style:dotted solid double dashed; }  /* 上點線,右實線,下雙實線,左虛線 */

【結果】

box1
box2
box3
box4

border-width

說明:設定框線的粗細。

屬性值:thin(細)、medium(中,預設值)、thick(粗)、(長度)、inherit(繼承父元素設定)

【範例】

.box {
    border-width:5px;

    border-style:solid;
    border-color:black;
}

【結果】

height

說明:設定物件內容的高度。

屬性值:(長度)、(百分比)、auto(自動,預設值)、inherit(繼承父元素設定)

【範例】

.box {
    height:100px;
    width:20px;
    border:1px solid black;
}

【結果】

margin

說明:框線外側與外面物件的距離。auto屬性視不同瀏覽器有不同結果。

屬性值:(長度)、(百分比)、auto(自動,預設值)、inherit(繼承父元素設定)

【範例】

.box1 { margin:5px; }           /* 四邊距離 */
.box2 { margin:5px 15px; }      /* 上下距離,左右距離 */
.box3 { margin:0px 15px 5px; }      /* 上距離0px,左右距離15px,下距離5px */
.box4 { margin:0px 15px 5px 10px; } /* 上距離0px,右距離15px,下距離5px,左距離10px; */

【結果】

box1
box2
box3
box4

max-height (2011.01.16新增)

說明:設定元素的最大高度。當元素內容超出最大高度時,會以Overflow屬性所設定的方式顯示。未指定max-height時,最大高度即為height的值。範例請參考「溢出與最小高度」。

屬性值:none(無,預設值)、(長度)、(百分比)、inherit(繼承父元素設定)

max-width (2011.01.16新增)

說明:設定元素的最大寬度。當元素內容超出最大寬度時,會以Overflow屬性所設定的方式顯示。未指定max-width時,最大寬度即為width的值。範例請參考「溢出與最小高度」。

屬性值:none(無,預設值)、(長度)、(百分比)、inherit(繼承父元素設定)

min-height (2011.01.16新增)

說明:設定元素的最小高度。當元素設定height時會取代min-height的值。範例請參考「溢出與最小高度」。

屬性值:(長度)、(百分比)、inherit(繼承父元素設定)

min-width (2011.01.16新增)

說明:設定元素的最小寬度。當元素設定width時會取代min-width的值。範例請參考「溢出與最小高度」。

屬性值:(長度)、(百分比)、inherit(繼承父元素設定)

outline

說明:設定輪廓的綜合屬性。是outline-color、outline-style、outline-width的集合體。屬性值必須按照順序排列,允許缺少的值。此語法為CSS 2,需IE8以上版本才可顯示。本語法不提供範例結果。

屬性值:(outline-color) (outline-style) (outline-width)、inherit(繼承父元素設定)

【範例】

.box { outline:green dotted thick; }

outline-color

說明:設定輪廓的顏色。顏色的表示方法可參考「網路色彩的表示法」。

屬性值:(顏色)、invert(對比色,預設值)、inherit(繼承父元素設定)

【範例】

.special {
    outline-color:green;

    outline-style:dotted;
    border:1px solid red;
}

【結果】

輪廓可套用於段落

outline-style

說明:設定輪廓的樣式。

屬性值:none(無,預設值)、dotted(點)、dashed(虛線)、solid(實線)、double(雙實線)、groove(3D凹線)、ridge(3D凸線)、inset(3D凹槽)、outset(3D平台)、inherit(繼承父元素設定)

【範例】

.special {
    outline-style:dotted;
    border:1px solid red;
}

【結果】

預設顏色為背景的對比色

outline-width

說明:設定輪廓的粗細。

屬性值:thin(細)、medium(中,預設值)、thick(粗)、(長度)、inherit(繼承父元素設定)

【範例】

.special {
    outline-width:5px;

    outline-style:dashed;
    border:1px solid red;
}

【結果】

輪廓可使內容變得醒目

padding

說明:框線內側與內容之間的距離。

屬性值:(長度)、(百分比)、inherit(繼承父元素設定)

【範例】

.box1 { padding:5px; }          /* 四邊距離 */
.box2 { padding:5px 15px; }     /* 上下距離,左右距離 */
.box3 { padding:0px 15px 5px; }     /* 上距離0px,左右距離15px,下距離5px */
.box4 { padding:0px 15px 5px 10px; }    /* 上距離0px,右距離15px,下距離5px,左距離10px; */

【結果】

box1
box2
box3
box4

width

說明:設定物件內容的寬度。

屬性值:(長度)、(百分比)、auto(自動,預設值)、inherit(繼承父元素設定)

【範例】

.box {
    width:100px;
    height:20px;
    border:1px solid black;
}

【結果】