【WEB基礎】HTML & CSS 基礎入門(9)CSS盒子

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

因此用CSS作網頁佈局就涉及一個盒子的概念,簡單理解,咱們能夠把頁面上的全部HTML元素看做一個個的盒子,網頁上所展現出來的具體內容,如:文字、圖片等均可以理解爲內容,是放在盒子裏面的東西。html

這些裝着內容的盒子排列在網頁上,盒子與盒子存在着必定的間隙,咱們稱爲外邊距佈局

每一個盒子都有邊框,每條邊框均可以設置本身的樣式,邊框與內容之間也能夠存在必定的間隙,咱們稱爲內邊距ui

外邊距、邊框、內邊距按順時針方向又均可以分爲上、右、下、左四個部分,注意,這四個部分咱們都是能夠單獨設置其樣式的喲!spa

有圖有真相,下圖:code

由上述可知,盒子由外到內能夠列出如下四個屬性:xml

♐外邊距margin和內邊距paddinghtm

外邊距margin和內邊距padding以邊框爲分界線,它們分四個方向能夠分別設置四個不一樣的值,按順時針方向分別是上、右、下、左,以下:blog

🅰 外邊距: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 --------------------------

相關文章
相關標籤/搜索