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