一、css外邊距重疊的解決方法
兩個或多個塊級盒子的垂直相鄰邊界會重合。
1）兄弟級
當乙個元素出現在另乙個元素上面，也就是兩個垂直外邊距相遇時(只有垂直的才會發生)
1.調高margin
2.padding
父子級元素 當乙個元素包含在另乙個元素中時，如果外面大的那個元素沒有內邊距或者邊框，那麼這兩個元素的上外邊距或下外邊距也會發生合併
解決方法：
1.給父級加邊框屬性
2.給父級加padding代替margin
3.給父級加overflow:hidden
4.給子級或父級一方新增浮動float:left;
5.給子級或父級一方新增絕對定位position: absolute;
6.給子級或父級一方新增display:inline-block;
二、高度塌陷
子div float，父級容易高度塌陷。
overflow:hidden
或者偽元素 :after
萬能法：
:after
三、高度上下左右居中
從布局的發展開始，table,position,float,flex,grid
1.table,1種
父元素設定display:table-cell，並設定vertical-align:middle
然後設定子元素的margin:auto
2.position布局3種 (2-4)
父級relative 子級absolute
son
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
flex margin:auto
.father
.son
6.parent
7.grid(7-8)
margin:auto
.father
.son
8.parent
1父級flex5個屬性
1.1 flex-direction:row | row-reverse | column | column-reverse;
1.2 flex-wrap:nowrap | wrap | wrap-reverse;// 超出長度是否換行
nowrap（預設）：不換行。
（2）wrap：換行，第一行在上方。
（3）wrap-reverse：換行，第一行在下方。
1.3 flex-flow: flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
flex-flow: ;
1.4 justify-content:center;
justify-content: flex-start | flex-end | center | space-between | space-around;
1.5 align-items:center;
align-items: flex-start | flex-end | center | baseline | stretch;
2子級6個屬性：
2.1 flex
flex: none | [ ? || ]
2.2 flex-grow
2.3 flex-shrink
2.4 flex-basis
固定寬度後，不可壓縮
2.5 align-self
2.6 order
order: 排序編號
CSS 浮動，高度塌陷和BFC，清除浮動
通過浮動，可以使乙個元素向其父元素的左側或右側移動，使用 float 屬性來設定元素的浮動 可選值 注意 未設定浮動 設定浮動 浮動的特點 浮動元素會完全脫離文件流，不再佔據文件流中的位置 設定浮動以後元素會向父元素的左側或右側移動 浮動元素預設不會從父元素中移出 浮動元素向左或向右移動時，不會超過...
高度塌陷與 BFC
在浮動布局中，父元素的高度預設是被子元素撐開的 當子元素浮動後，其會完全脫離文件流，子元素從文件流中脫離將會無法撐起父元素的高度，導致父元素的高度丟失 父元素高度丟失以後，其下的元素會自動上移，導致頁面的布局混亂 clear作用 清除浮動元素對當前元素所產生的影響 本質是為元素新增乙個margin ...
CSS中解決高度塌陷（開啟BFC）的問題
在div中使用float時，經常會碰到父級標籤高度塌陷的問題，這個時候我們就需要開啟父級標籤的bfc模式來解決高度塌陷的問題。解決高度塌陷有以下三種方法 第一 在父級標籤的css中加入以下 overflow hidden 第二 在父級標籤中加入乙個div標籤，類名為clear，給標籤設定以下css ...