一、盒子模型
用於設定邊框的：盒子的邊框(border)、
用於設定距離的：內容與邊框(padding)、盒子與盒子(margin)。
文字預設在盒子的左上方
padding、border、margin都是實體，會增加盒子的面積
盒子的width和height設定的是盒子內容的寬和高，不是盒子本身的寬和高，盒子的真實尺寸是三者的相加
盒子寬度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
二、border用於設定盒子邊框
常用簡寫 ：
border:10px solid red;
分開寫：
border-top-color:red; /* 設定頂部邊框顏色為紅色 */
border-top-width:10px; /* 設定頂部邊框粗細為10px */
border-top-style:solid; /* 設定頂部邊框的線性為實線，常用的有：solid(實線)
dashed(虛線) dotted(點線); */
上下用line-height(由字型大小+padding組成，且不佔盒子高度)
左右用text-indent,同樣不佔盒子寬度。居中用text-align:center
四個方向一起寫：
padding：20px 40px 50px 30px;
padding後面還可以跟3個值，2個值和1個值，它們分別設定的專案如下：
padding：20px 40px 50px; /* 設定頂部內邊距為20px，左右內邊距為40px，底部內邊距為50px */
padding：20px 40px; /* 設定上下內邊距為20px，左右內邊距為40px*/
padding：20px; /* 設定四邊內邊距為20px */
1、設定元素水平居中： margin:x auto;
2、margin負值讓元素位移及邊框合併
外邊距合併
合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。解決方法如下：
五、盒子的巢狀
問題1： margin-top 塌陷
在兩個盒子巢狀時候，內部的盒子設定的margin-top會加到外邊的盒子上，導致內部的盒子margin-top設定失敗，解決方法如下：
1、外部盒子設定乙個邊框
2、外部盒子設定 overflow:hidden
3、使用偽元素類：最常用的方式
.clearfix:beforeoverflow的設定項：
1、visible 預設值。內容不會被修剪，會呈現在元素框之外。
2、hidden 多餘的被修剪，此屬性還有清除浮動、清除margin-top塌陷的功能。
3、scroll 會加滾動條以便檢視其餘的內容。
4、auto 如果內盒子大於外盒子，自動加滾動條以便檢視其餘的內容。
5、inherit 規定應該從父元素繼承 overflow 屬性的值。
六、用些需注意的自帶樣式：
body的自帶樣式設定為margin（邊緣）：0px,預設為8px的邊框。
微軟雅黑的自帶樣式有行高大於20px
常用**樣式：
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css盒子模型布局詳解
盒子模型是css裡的乙個重點內容，一般來講主要是w3c的盒子模型，不過ie原先也有自己的盒子模型，但是隨著發展ie也調整了盒子模型同步w3c，因此這裡就不講ie盒子模型了。標準w3c盒子模型 以下用乙個div的盒子模型作為範例進行解讀 可以看出這個div裡面只有範例的文字，而它的盒模型分為四部分 c...
css盒子模型，div css布局
css盒子模型 border border width 邊框的寬度 border color 邊框的顏色 border style 邊框的線型 border top 上邊框 border bottom 下邊框 border left 左邊框 border right 右邊框 padding 代表邊框...