十二．控制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：底邊框寬度 ·border-left：左邊框寬度 ·border-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邊框 ·outset：根據color屬性顯示不同效果的3D邊框 3．對象間隙（PADDING） 如圖所示，位于對象邊框和對象之間，包括了四項屬性。 基本格式如下： ·padding-top：頂部間隙 ·padding-right：右邊間隙 ·padding-bottom：底部間隙 ·padding-left：左邊間隙 和MARGIN類似，PADDING也可以用padding一次性設置所有的對象間隙，格式也和MARGIN相似，不再一一列舉了。 ? 十三．顯示控制樣式 基本格式如下： display: 參數 參數取值范圍： ·block（默認）：在對象前后都換行 ·inline：在對象前后都不換行 ·list-item：在對象前后都換行，增加了項目符號 ·none：無顯示 十四．空白控制樣式 基本格式如下： 空白屬性決定如何處理元素內的空格。 white-space: 參數 參數取值范圍： normal：把多個空格替換為一個來顯示 pre：忠實地按輸入顯示空格 nowrap：禁止換行 但要注意的是，write-space也是一個塊級屬性。








本文轉自 牛海彬 51CTO博客，原文鏈接：http://blog.51cto.com/newhappy/76817，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的css入门教程资料（5）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。