一、margin合併
css經典bug 兩個塊級元素 分別設定 margin-bottom 和 margin-top 並不能達到預期效果
上面**的最終效果 中間的距離 並不是margin-top + margin-bottom 而是 兩者 中取大的那個 的值 就像 合併到了一
解決方法
給 up 和 down 都加上父級 並給父級設定 overflow：hidden
margin塌陷
}.box
解決方法
1.利用給父級新增border 來觸發 bfc效果
類似子集看不見父級的邊界 新增乙個 border 來解決 但改變 父級的樣式 (捨去)
2.利用給父級新增 overflow 屬性觸發 bfc
bfc
block format context 塊級格式化上下文
觸發bfc 的方法
postion: absolute;
display: inline-block;
overflow: hidden;
float:left/right
標準盒模型與怪異盒模型
1 盒子模型 box model 在html中，可以把元素看做盒子，盒子包括 實際內容 content 內邊距 padding 邊框 border 外邊距 margin 2 標準盒模型與怪異盒模型 對比兩種模型的區別 1.標準盒模型 標準盒模型 w3c盒子模型 設定的width或height是對 實...
盒模型與box sizing
盒模型這個詞我們經常聽到過，不過沒有細細的了解。其實我們平常都有常用盒模型就是w3c標準的盒模型，標準盒模型的是height width pading border margin,這樣就組成乙個盒模型。盒模型分為2種 他們不同之處就是計算內容的寬高不同，ie盒模型寬度是包括width pading ...
標準盒模型與怪異盒模型的區別
在了解這兩種盒模型的區別之前首先我們要先了解什麼是盒模型 box mold 盒模型顧名思義就是在css中的盒子，把html的元素封裝成盒子用來設計和布局時使用，盒模型中又包含了以下幾個元素 1 內容 content 2 填充 padding 3 邊框 border 4 邊距 margin 詳細說明 ...