css盒子模型

今天談談我對盒子模型的理解。剛接觸到盒子模型的時候那是一年前了，那時候在網上看視頻學習，視頻中的老師一講到盒子模型的時候聲音顯得特別大，說明了盒子模型的重要性，今天就簡單的談談盒子模型吧！

若是把上圖看做是HTML裏的一個標籤div,<div>content</div>.咱們就從這一句簡單的代碼來分析盒子模型。首先div裏面的content就是圖片中紅色區域,content到border之間的區域稱爲padding，也就是內邊距，border就是一個盒子的邊框，邊框外面還有個外邊距margin。

圖1-1

.div1{
    width:80px;
    height:80px;
    border:5px solid red;
    padding:20px;
}
.div2{
    width:80px;
    height:80px;
    border:7px solid yellow;
    padding:0px;
}

圖1-1:第一個紅色div標籤我給了它padding:20px;第二個黃色div標籤給了它padding:0px;從圖中明顯能夠看出2個div邊框離文本的距離大小不一樣，也發現了2個div大小也不同（padding撐開了容器），這就是padding，簡稱內邊距。

圖1-2

.div1{
    width:80px;
    height:80px;
    border:5px solid red;
    margin:20px;
}
.div2{
    width:80px;
    height:80px;
    border:7px solid yellow;
    margin:0px;
}

圖1-2:圖上面那條綠色做爲基點，第一個紅色div給了margin:20px;你們能夠看到紅色div到綠色的線有了必定的距離，紅色div離黃色div也有必定的距離，這個距離就是margin:20px，簡稱外邊距。

圖1-3

.div1{
    width:80px;
    height:80px;
    border:3px solid red;
}
.div2{
    width:80px;
    height:80px;
    border:10px solid yellow;
}

圖1-3:第一個紅色div邊框的寬度爲3px，第二個黃色div邊框爲10px，邊框寬度一樣也會撐開容器大小。

最後來說下margin,padding,border參數。

margin:

margin: 10px;（上、下、左、右各10px。）
margin: 10px 20px;（上、下10px；左、右20px。）
margin: 10px 20px 30px;（上10px；左、右20px；下30px。）
margin: 10px 20px 30px 40px;（上10px；右20px；下30px；左40px。）
margin-top:10px;(上:10px;)
margin-right:10px;(右:10px;)
margin-bottom:10px;(下:10px;)
margin-left:10px;(左:10px;)

padding:

padding: 10px;（上、下、左、右各10px。）
padding: 10px 20px;（上、下10px；左、右20px。）
padding: 10px 20px 30px;（上10px；左、右20px；下30px。）
padding: 10px 20px 30px 40px;（上10px；右20px；下30px；左40px。）
padding-top:10px;(上:10px;)
padding-right:10px;(右:10px;)
padding-bottom:10px;(下:10px;)
padding-left:10px;(左:10px;)

border:

border:1px solid red;(第一個參數邊框寬度，第二個邊框類型，第三個邊框顏色)border-topborder-rightborder-bottomborder-left(上，右，下，左依次控制單邊邊框)