盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區、補白（填充）、邊框、邊界(外邊距)這就是盒模型。
怪異盒模型中的
width指的是內容、邊框、內邊距總的寬度（content + border + padding）；
height指的是內容、邊框、內邊距總的高度
怪異盒模型下盒子的大小=width（content + border + padding） + margin
1:padding是在盒子裡面，在盒子與內容之間。
2：padding的作用：控制子元素在父元素裡面的位置關係。
3：padding會把盒子撐大。
4：如果想讓盒子保持原有的大小：在寬高基礎上減掉。（ 如果乙個元素是被內容撐開的，沒有設定固定的寬高，padding直接撐開。不用減掉 ）
5:如果給單一方向新增padding
padding-top/bottom/left/right
6:padding的設定特點：
padding:30px; 四周
padding:10px 30px; 上下 左右
padding:10px 30px 50px 上 左右 下
padding:10px 30px 50px 100px 上右下左
7:padding不會對背景圖的位置造成影響。
margin用法 （外邊距、邊界）
1:margin在元素外圍，不會撐大元素的大小
2:作用:控制元素與元素之間的間距。
3：給單一方向新增margin
margin-left/right/top/bottom
4 :margin設定方法：
margin:30px; 四周
margin:10px 30px; 上下 左右
margin:10px 30px 50px 上 左右 下
margin:10px 30px 50px 100px 上右下左
5:margin:0 auto;
讓當前元素在父元素裡面左右居中。
6:margin常出現的bug
a:兩個相鄰元素上下的margin值 不會疊加 按照較大值設定。
b:如果父元素和第乙個子元素沒有浮動的情況下，給第乙個子元素新增margin-top,會錯誤放在父元素上面。
visible:預設值，內容不會被修剪，會呈現在元素框之外；
hidden：內容會被修剪，並且其餘內容是不可見的；
scroll：內容會被修剪，但是瀏覽器會顯示滾動條，以便檢視其餘的內容;不管內容是否超出一直顯示滾動條
auto：如果內容被修剪，則瀏覽器會顯示滾動條，以便檢視其他的內容;超出顯示滾動條，不超出則不顯示
inherit：規定應該從父元素繼承overflow屬性的值。
normal：預設值，多餘空白會被瀏覽器忽略只保留乙個；
pre：空白會被瀏覽器保留；
pre-wrap：保留一部分空白符序列，但是正常的進行換行；
pre-line:合併空白符序列，但是保留換行符；
nowrap:文字不會換行，文字會在同一行上繼續，直到遇到
標籤為止;
clip：不顯示省略號（...），而是簡單的裁切;
ellipsis：當物件內文字溢位時，顯示省略標記；
省略號設定：
text-overflow屬性僅是：當文字溢位時是否顯示省略標記，並不具備其它的樣式屬性定義，要實現溢位時產生省略號的效果還需定義：
1、容器寬度：width：value；（px、%，都可以）
2、強制文字在一行內顯示:white-space：nowrap;
3、溢位內容為隱藏：overflow：hidden；
4、溢位文字顯示省略號：
text-overflow：ellipsis;
注：必須是單行文字才能設定文字溢位！！！
行盒的盒模型
盒子沿著內容延伸 行盒不能設定寬高 用字型大小 行高字型型別間接調整行盒的寬高 內邊框 填充區 水平方向有效,垂直方向不會實際佔據空間 邊框 水平方向有效,垂直方向不會實際佔據空間 外邊距 水平方向有效,垂直方向不會實際佔據空間 display inline block 的盒子 不獨佔一行 盒模型中...
行盒的盒模型
常見的行盒 包含具體內容的元素 span strong em i img video audio 盒子沿著內容延伸 行盒不能設定寬高 調整行盒的寬高，應該使用字型大小 行高 字型型別 間接調整。內邊距 填充區 水平方向有效，垂直方向不會實際佔據空間。邊框 水平方向有效，垂直方向不會實際佔據空間。外邊...
標準盒模型與怪異盒模型的區別
在了解這兩種盒模型的區別之前首先我們要先了解什麼是盒模型 box mold 盒模型顧名思義就是在css中的盒子，把html的元素封裝成盒子用來設計和布局時使用，盒模型中又包含了以下幾個元素 1 內容 content 2 填充 padding 3 邊框 border 4 邊距 margin 詳細說明 ...