【WEB基礎】HTML & CSS 基礎入門（9）CSS盒子

青衫煙雨客發表於2019-05-30
WebHTMLCSS

網頁上的元素辣麼多，我該用什麼辦法讓它們排列整齊、間距合理呢。常幹家務的朋友們就容易理解了，用收納盒呀！

所以用CSS做網頁佈局就涉及一個盒子的概念，簡單理解，我們可以把頁面上的所有HTML元素看作一個個的盒子，網頁上所展示出來的具體內容，如：文字、圖片等都可以理解為內容，是放在盒子裡面的東西。

這些裝著內容的盒子排列在網頁上，盒子與盒子存在著一定的間隙，我們稱為外邊距，

每個盒子都有邊框，每條邊框都可以設定自己的樣式，邊框與內容之間也可以存在一定的間隙，我們稱為內邊距。

外邊距、邊框、內邊距按順時針方向又都可以分為上、右、下、左四個部分，注意，這四個部分我們都是可以單獨設定其樣式的喲！

有圖有真相，下圖：

由上述可知，盒子由外到內可以列出以下四個屬性：

♐外邊距margin和內邊距padding

外邊距margin和內邊距padding以邊框為分界線，它們分四個方向可以分別設定四個不同的值，按順時針方向分別是上、右、下、左，如下：

? 外邊距：margin-top（上）、margin -right（右）、margin -bottom（下）、margin -left（左）

? 內邊距：padding-top（上）、padding-right（右）、padding-bottom（下）、padding-left（左）

具體寫法有三種，分別如下所示（margin和padding寫法類似，以padding為例）：

♐Border（邊框）

Border(邊框)有三個屬性值需要設定，分別為邊框的寬度（border-width）、邊框的樣式（border-style）、邊框的顏色（border-color）。

♐寬度width和高度height

元素的寬度width和高度height是針對內容而言的，不包括內邊距（padding），可參看上面的圖示。另外，只有塊元素能設定width和height，行內元素無法設定width和height。

示例程式碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
    #div1
    {
        display:inline-block;/*將DIV轉換為inline-block元素*/
        border:1px solid green;/*設定外層DIV的邊框樣式*/
    }
    #div2
    {
        display:inline-block; /*將DIV轉換為inline-block元素*/
        padding:40px 80px;/*設定內邊距上下為40px,左右為80px*/
        margin-top:40px;/*設定外邊距上為40px*/
        margin-right:60px;/*設定外邊距右為60px*/
        margin-bottom:80px;/*設定外邊距下為80px*/
        margin-left:100px;/*設定外邊距左為100px*/
        /*另一寫法：margin:40px 60px 80px 100px;順時針方向*/
        border:5px dotted red;/*DIV的邊框寬度為5px、樣式為點線、顏色為紅*/
        background-color:#FCE9B8;/*設定背景色*/
    }
    span{border:1px solid blue;background-color:#C5FCDF;}
</style>
</head>
<body>
    <div id="div1">
        <div id="div2"><span>CSS盒子模型</span></div>
    </div>
</body>
</html>

執行效果：

上圖是實際的執行效果，有點太單薄，加上點註釋說明，下圖：

-------------------------- END --------------------------

相關文章