十二．控制BOX的樣式
樣式表規(guī)定了一個(gè)容器BOX，它將要儲(chǔ)存一個(gè)對(duì)象的所有可操作的樣式。包括了對(duì)象本身、邊框空白、對(duì)象邊框、對(duì)象間隙四個(gè)方面。
為了大家更好地理解這些屬性的意義，以及互相之間的關(guān)系，請(qǐng)看下面這個(gè)圖示：
1．邊框空白（MARGIN）
如圖所示，位于BOX模型的最外層，包括四項(xiàng)屬性。
格式分別如下：
·margin-top：頂部空白距離
·margin-right：右邊空白距離
·margin-bottom：底部空白距離
·margin-left：左邊空白距離
空白的距離可以用帶長度單位的數(shù)字表示。
如果使用上述屬性的簡化方式margin，可以在其后連續(xù)加上四個(gè)帶長度單位的數(shù)字，來分別表示margin-top、margin-right、margin-bottom、margin-left，每個(gè)數(shù)字中間要用空格分隔。
2．對(duì)象邊框（BORDER）
如圖所示，位于邊框空白和對(duì)象空隙之間，包括了七項(xiàng)屬性。
格式分別如下：
·border-top：頂邊框?qū)挾?
·border-right：右邊框?qū)挾?
·border-bottom：底邊框?qū)挾?
·border-left：左邊框?qū)挾?
·border-width：所有邊框?qū)挾?
·border-color：邊框顏色
·border-style：邊框樣式參數(shù)
其中border-width可以一次性設(shè)置所有的邊框?qū)挾�，border-color同時(shí)設(shè)置四面邊框的顏色時(shí)，可以連續(xù)寫上四種顏色，并用空格分隔。上述連續(xù)設(shè)置的邊框都是按border-top、border-right、border-bottom、border-left的順序。
Border-style相對(duì)別的屬性而言稍稍復(fù)雜些，因?yàn)樗�包括了多個(gè)邊框樣式的參數(shù)：
·none：無邊框。
·dotted：邊框?yàn)辄c(diǎn)線。
·dashed：邊框?yàn)殚L短線。
·solid：邊框?yàn)閷?shí)線。
·double：邊框?yàn)殡p線。
·groove：根據(jù)color屬性顯示不同效果的3D邊框
·ridge：根據(jù)color屬性顯示不同效果的3D邊框
·inset：根據(jù)color屬性顯示不同效果的3D邊框
·outset：根據(jù)color屬性顯示不同效果的3D邊框
3．對(duì)象間隙（PADDING）
如圖所示，位于對(duì)象邊框和對(duì)象之間，包括了四項(xiàng)屬性。
基本格式如下：
·padding-top：頂部間隙
·padding-right：右邊間隙
·padding-bottom：底部間隙
·padding-left：左邊間隙
和MARGIN類似，PADDING也可以用padding一次性設(shè)置所有的對(duì)象間隙，格式也和MARGIN相似，不再一一列舉了。
十三．顯示控制樣式
基本格式如下：
display: 參數(shù)
參數(shù)取值范圍：
·block（默認(rèn)）：在對(duì)象前后都換行
·inline：在對(duì)象前后都不換行
·list-item：在對(duì)象前后都換行，增加了項(xiàng)目符號(hào)
·none：無顯示
十四．空白控制樣式
基本格式如下：
空白屬性決定如何處理元素內(nèi)的空格。
white-space: 參數(shù)
參數(shù)取值范圍：
normal：把多個(gè)空格替換為一個(gè)來顯示
pre：忠實(shí)地按輸入顯示空格
nowrap：禁止換行
但要注意的是，write-space也是一個(gè)塊級(jí)屬性。
.全文完.
樣式表規(guī)定了一個(gè)容器BOX，它將要儲(chǔ)存一個(gè)對(duì)象的所有可操作的樣式。包括了對(duì)象本身、邊框空白、對(duì)象邊框、對(duì)象間隙四個(gè)方面。
為了大家更好地理解這些屬性的意義，以及互相之間的關(guān)系，請(qǐng)看下面這個(gè)圖示：
1．邊框空白（MARGIN）
如圖所示，位于BOX模型的最外層，包括四項(xiàng)屬性。
格式分別如下：
·margin-top：頂部空白距離
·margin-right：右邊空白距離
·margin-bottom：底部空白距離
·margin-left：左邊空白距離
空白的距離可以用帶長度單位的數(shù)字表示。
如果使用上述屬性的簡化方式margin，可以在其后連續(xù)加上四個(gè)帶長度單位的數(shù)字，來分別表示margin-top、margin-right、margin-bottom、margin-left，每個(gè)數(shù)字中間要用空格分隔。
2．對(duì)象邊框（BORDER）
如圖所示，位于邊框空白和對(duì)象空隙之間，包括了七項(xiàng)屬性。
格式分別如下：
·border-top：頂邊框?qū)挾?
·border-right：右邊框?qū)挾?
·border-bottom：底邊框?qū)挾?
·border-left：左邊框?qū)挾?
·border-width：所有邊框?qū)挾?
·border-color：邊框顏色
·border-style：邊框樣式參數(shù)
其中border-width可以一次性設(shè)置所有的邊框?qū)挾�，border-color同時(shí)設(shè)置四面邊框的顏色時(shí)，可以連續(xù)寫上四種顏色，并用空格分隔。上述連續(xù)設(shè)置的邊框都是按border-top、border-right、border-bottom、border-left的順序。
Border-style相對(duì)別的屬性而言稍稍復(fù)雜些，因?yàn)樗�包括了多個(gè)邊框樣式的參數(shù)：
·none：無邊框。
·dotted：邊框?yàn)辄c(diǎn)線。
·dashed：邊框?yàn)殚L短線。
·solid：邊框?yàn)閷?shí)線。
·double：邊框?yàn)殡p線。
·groove：根據(jù)color屬性顯示不同效果的3D邊框
·ridge：根據(jù)color屬性顯示不同效果的3D邊框
·inset：根據(jù)color屬性顯示不同效果的3D邊框
·outset：根據(jù)color屬性顯示不同效果的3D邊框
3．對(duì)象間隙（PADDING）
如圖所示，位于對(duì)象邊框和對(duì)象之間，包括了四項(xiàng)屬性。
基本格式如下：
·padding-top：頂部間隙
·padding-right：右邊間隙
·padding-bottom：底部間隙
·padding-left：左邊間隙
和MARGIN類似，PADDING也可以用padding一次性設(shè)置所有的對(duì)象間隙，格式也和MARGIN相似，不再一一列舉了。
十三．顯示控制樣式
基本格式如下：
display: 參數(shù)
參數(shù)取值范圍：
·block（默認(rèn)）：在對(duì)象前后都換行
·inline：在對(duì)象前后都不換行
·list-item：在對(duì)象前后都換行，增加了項(xiàng)目符號(hào)
·none：無顯示
十四．空白控制樣式
基本格式如下：
空白屬性決定如何處理元素內(nèi)的空格。
white-space: 參數(shù)
參數(shù)取值范圍：
normal：把多個(gè)空格替換為一個(gè)來顯示
pre：忠實(shí)地按輸入顯示空格
nowrap：禁止換行
但要注意的是，write-space也是一個(gè)塊級(jí)屬性。
.全文完.
下一篇：
CSS實(shí)用教程（二）