1. 表格邊框重疊導致變粗問題
border-collapse:collapse;
可89=================以使相鄰邊框合并在一
2.padding問題
- 盒子的寬=width+padding+border
- padding的設置會使盒子被撐大
解決：通過給設置了寬高的盒子，減去相應的內邊距的值，維持盒子原有的大小 - padding不影響盒子大小的情況
若果沒有給一個盒子指定寬度，此時，如果給這個盒子指定padding，則不會撐開盒子。
3.塊級盒子水平居中
條件
- 盒子必須指定了寬度
- 左右外邊距都設置為auto
常用的三種寫法
- margin-left:auto;margin-right:auto;
- margin:auto;
- margin:0 auto;
4. 相鄰元素垂直外邊距的合并
當上下相鄰的兩個塊元素相遇 時，如果上面的元素有下邊距margin-bottom，下面的元素有上外邊距margin-top,則他們之間的垂直間距不是margin-bottom與margin-top之和，而是取兩個值中的較大者
微信截圖_20200916172325.png
解決方法：盡量只給一個盒子添加margin值
5. 嵌套塊元素垂直外邊距合并（塌陷）
對于兩個嵌套關系的塊元素，若果父元素沒有上內邊距及邊框
父元素的上外邊距會與子元素的上外邊距發(fā)生合并
合并后的外邊距為兩者中的較大者
微信截圖_20200916172629.png
解決方法：
- 可以為父元素定義上邊框
- 可以為父元素定義上內邊距
- 可以為父元素添加overflow:hidden.
等等
6. css布局的三種機制
-
普通流（標準流）
-
塊級元素會獨占一行，從上向下順序排列；
- 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
-
行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行；
- 常用元素：span、a、i、em等
-
塊級元素會獨占一行，從上向下順序排列；
-
浮動
- 讓盒子從普通流中浮起來,主要作用讓多個塊級盒子一行顯示。
-
定位
- 將盒子定在瀏覽器的某一個位置——CSS 離不開定位，特別是后面的 js 特效。
7. 浮動（float）
概念：元素的浮動是指設置了浮動屬性的元素會
- 脫離標準普通流的控制
- 移動到指定位置。
作用
- 讓多個盒子(div)水平排列成一行，使得浮動成為布局的重要手段。
- 可以實現(xiàn)盒子的左右對齊等等..
- 浮動最早是用來控制圖片，實現(xiàn)文字環(huán)繞圖片的效果。
浮動后 塊級元素默認相當于轉換為了inline-block
注意： 浮動的元素互相貼靠一起的，但是如果父級寬度裝不下這些浮動的盒子， 多出的盒子會另起一行對齊
8. 清除浮動
清除浮動本質：
? 清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。清除浮動之后， 父級就會根據(jù)浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了
清除浮動的方法
-
clear:both;
是W3C推薦的做法是通過在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>，或則其他標簽br等亦可。
- 優(yōu)點： 通俗易懂，書寫方便
- 缺點： 添加許多無意義的標簽，結構化較差。
- 父級添加overflow屬性方法
可以給父級添加： overflow為 hidden| auto| scroll 都可以實現(xiàn)。
優(yōu)點： 代碼簡潔
缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。 - 使用after偽元素清除浮動
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
} /* IE6、7 專有 */
- 優(yōu)點： 符合閉合浮動思想 結構語義化正確
- 缺點： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
- 使用雙偽元素清除浮動
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
優(yōu)點： 代碼更簡潔
缺點： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
