什麼是盒子模型？ 網頁中的任何一個標簽都相當於是一個盒子模型，而所有的盒子模型都存在五個必要的屬性：width,height,padding,border,margin. 那麼在一個網頁中如何計算一個盒子模型實際所占的寬度呢？？？？ 例如：<style>div {width:300px;paddin ...
什麼是盒子模型？
網頁中的任何一個標簽都相當於是一個盒子模型，而所有的盒子模型都存在五個必要的屬性：width,height,padding,border,margin.
那麼在一個網頁中如何計算一個盒子模型實際所占的寬度呢？？？？
例如：<style>div {width:300px;padding:20px;border:1px}</style>
<body><div></div></body>
對於上面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。
