什麼是盒子模型？

什麼是盒子模型？

　　網頁中的任何一個標籤都相當於是一個盒子模型，而所有的盒子模型都存在五個必要的屬性：width,height,padding,border,margin.

#那麼在一個網頁中如何計算一個盒子模型實際所佔的寬度呢？ ？ ？ ？

　　例如：

　　　　　/lt;body>

　　　　　/gt;body&F;

　　/gt;

對於上面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中文網其他相關文章！