CSS盒子模型圖文詳解-css教學-PHP中文網

首頁

web前端

css教學

CSS盒子模型圖文詳解

高洛峰

Mar 20, 2017 pm 04:43 PM

剛開始接觸web的時候是在大學的時候，寫的第一個網頁就是登陸頁面，當時採用表格的佈局方式，中規中矩的。接觸到css之後，都是採用p+css的方式進行佈局，實現了表現與結構的分離，非常的靈活。雖然早已經接觸了css的佈局方式，但是不常使用，導致很多東西都已經忘記了。而最近又在搗鼓css的佈局，就想在這裡進行記錄一下，就當做自己的學習筆記了。

css盒子模型是css中一個比較核心的概念。在網頁中我們可以把所有的網頁元素都看成是一個盒子，一個盒子包括外邊距、邊框、內邊距，和內容四個部分組成的，如下圖。

CSS盒子模型圖文詳解

下面由外到內依序來解釋這四個部分的作用。

margin（外邊距）：代表這個元素與其他元素的邊距，需要說明的是，如果兩個相鄰的元素都設定了margin的值，那麼就以最大的值為準。 如兩個上下相鄰的p，上面的p設定margin:30px，下面的p設定margin:50px，那麼最後這兩個元素的間隔不會是30+20=50px，而會是30px。
border（邊框）：代表這個網頁元素的邊框，邊框可是設定大小、背景（顏色or圖片）、樣式（實現or虛線等）。
padding（內邊距）：代表元素內容和邊框之間的距離。可以把它稱作元素的留白。
content（內容）：代表元素的內容區，如文字的大小。

其中，外邊距、邊框、內邊距，都是可以套用元素的上下左右四個邊，也可以套用在每個單獨的邊。尤其是外邊距還可以設定為負值，在一些特殊的場合是需要用到外邊距為負值的。

一般我們設定一個元素寬和高，通常是padding+content這塊區域的寬和高，而不包括margin和border。

當我設定了元素的背景顏色，這個背景只會應用到元素的邊框以內的區域也就是padding+content，而margin和border區域的背景色是不會被改變的。

下面將示範一個實例。程式碼如下：

 <html>
     <head>
     <meta charset="utf-8">
        <style type="text/css">
            body{
                background:gray;
            }
            p{
                height: 240px;
                width: 360px;
                border: 5px solid yellow;
                background: blue;
                margin: 50px auto;
             }
             span{
                display:block;
                margin:60px auto;
                border:5px solid yellow;
                width:180px;
                height:100px;
                text-align:center;
                line-height:80px;
                vertical-align: middle;
                background-color:red;
             }
        </style>
    </head>
    <body>
        <p>
            <span>
                我是盒子的内容            </span>
        </p>
    </body>
 </html>

#效果如下：

CSS盒子模型圖文詳解