CSS實用教學（三）

十二．控制BOX的樣式 

樣式表規定了一個容器BOX，它將要儲存一個物件的所有可操作的樣式。包括了物件本身、邊框空白、物件邊框、物件間隙四個面向。 



為了大家更能理解這些屬性的意義，以及彼此之間的關係，請看下面這個圖示：

1．邊框空白（MARGIN） 

如圖所示，位於BOX模型的最外層，包括四個屬性。

格式分別如下： 

·margin-top：頂部空白距離 

·margin-right：右邊空白距離 

·margin-bottom：底部空白距離 

·margin-left：左邊空白距離距離可以用長度單位的數字表示。

如果使用上述屬性的簡化方式margin，可以在其後連續加上四個帶長度單位的數字，來分別表示margin-top、margin-right、margin-bottom、margin-left，每個數字中間要用空格分隔。

2．物件邊框（BORDER） 

如圖所示，位於邊框空白與物件空隙之間，包含了七項屬性。

格式分別如下： 

·border-top：頂邊框寬度 

·border-right：右框寬度 

·border-bottom/左框架寬度 -width：所有邊框寬度 

·border-color：邊框顏色 

·border-style：邊框樣式參數 

其中border-width可以一次設定所有的邊框寬度，當border-color同時設定四面邊框的顏色時，可以連續寫上四種顏色，並用空格分隔。以上連續設定的邊框都是依border-top、border-right、border-bottom、border-left的順序。 

Border-style相對別的屬性而言稍微複雜些，因為它也包含了多個邊框樣式的參數： 

·none：無邊框。 

·dotted：邊框為點線。 

·dashed：邊框為長短線。 

·solid：邊框為實線。 

·double：邊框為雙線。

·groove：根據color屬性顯示不同效果的3D邊框 

·ridge：根據color屬性顯示不同效果的3D邊框 

·inset：根據color屬性顯示不同效果的3D邊框 

·顯示不同效果的3D邊框 

3．物件間隙（PADDING） 

如圖所示，位於物件邊框和物件之間，包含了四個屬性。

基本格式如下： 

·padding-top：頂部間隙 

·padding-right：右間隙 

·padding-bottom：底部間隙 

·pad-left：左邊可以用padding一次設定所有的物件間隙，格式也和MARGIN相似，不再一一列舉了。
十三．顯示控制樣式 

基本格式如下： 

display: 參數 

參數取值範圍： 

·block（預設）：在物件前後都換行 
·蟜·蜎item：在物件前後都換行，增加了項目符號 

·none：無顯示 

十四．空白控制樣式 

基本格式如下： 

空白屬性決定如何處理元素內的空格。

white-space: 參數 

參數取值範圍： 

normal：將多個空格替換為一個來顯示 

PRe：忠實地按入顯示空格 

now ，write-space也是區塊級屬性。 

.全文完.

 以上就是CSS實用教學（三）的內容，更多相關文章請關注PHP中文網（www.php.cn）！