對於上面div所佔寬度應該是：width+2*padding+2border=300+2*20+2*1=342px;
#padding:內邊距：內容與邊框之間的距離。
padding的四個屬性：padding-top,padding-bottom,padding-left,padding-right.
width:寬.
height:高.
border:邊框.
常見的邊框寫入：border:1px solid #ccc;分別表示邊框的寬度，線型，顏色。
共同線型有：solid(實線)，dashed(虛線),dotted(點線)。
邊框的三個基本屬性:border-width(邊框的寬度),border-style(邊框的線型),border-color(邊框的顏色);
maigin:外側距.
margin的四個基本屬性：margin-top,margin-bottom,margin-left,margin-right.
在使用margin時需要注意的點:
# 1.塌陷:margin塌陷存在於區塊級元素之間。如果元素變成了行內元素或行內塊元素，則不會塌陷。如果元素脫離了標準文件流程也不會塌陷。
2.透過margin讓盒子居中：margin:0 auto;
使用margin:0 auto 讓盒子居中需注意：盒子必須要有明確的width。盒子必須處於標準文檔流中。 margin:0 auto是讓盒子居中，而不是讓盒子裡面的內容居中。
讓盒子裡面的文字居中可以使用：text-align:center;(向左向右：text-align:left/right;)
Tips:如果想要移動子元素的位置，非必要情況下建議使用父元素的padding，而不是子元素的margin，如果必須使用margin，父元素就必須要有border
使用準則：在使用CSS的時候，盡可能的簡寫。
padding:10px 20px; 表示上下的padding為10px，左右的padding為20px。
padding:10px 20px 30px; 表示上的padding為10，下的padding為30px，左右的padding為20px.
###padding：10px 20px 30px 40px;###上，右，下，左的padding。 ###### ###以上是什麼是盒子模型？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
