●、常见问题

○、CSS上下元素外边距margin重叠

详细文档
防止外边距重叠解决方案：

  1. 外层元素padding代替
  2. 内层元素透明边框 border:1px solid transparent;
  3. 内层元素绝对定位 postion:absolute:
  4. 外层元素 overflow:hidden;
  5. 内层元素 加float:left;或display:inline-block;
  6. 内层元素padding:1px;

○、子级margin-top给父级所带来的影响

方法一：给父元素设置高度（不推荐）
方法二：子元素外边距溢出的问题，使用table布局

  1. #d2:before{
  2.     content:"";
  3.     display:table;
  4. }

○、浮动给父级带来的影响

工作原理：
浮动原理：浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

引起的问题：

  1. 父元素的高度无法被撑开，影响与父元素同级的元素
  2. 与浮动元素同级的非浮动元素会跟随其后
  3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法：
1. 在浮动结尾处添加空div标签clear:both
弊端就是增加了无意义标签。

  1. div {
  2.   clear: both;
  3. }

2. 父级div定义伪类：after和zoom

  1. .clearfix:after {
  2.   content: "";
  3.   display: block;
  4.   clear: both;
  5. }

3. 父级div定义display:table

  1. .clearfix {
  2.    display: table;
  3. }

4. 父级div也一起浮动
5. 给父级div设置高度
6. 给父级div设置 overflow 为 hidden 或者 auto

○、CSS实现垂直居中

如需了解更多方法：请参照文档
html

  1. <div class="box box1">
  2.         <span>垂直居中</span>
  3. </div>

css

  1. /* 方法1：table 布局 */ 
  2. .box1{
  3.     display: table-cell;
  4.     vertical-align: middle;
  5.     text-align: center;        
  6. }
  8. /* 方法2：flex 布局 */ 
  9. .box1{
  10.     display: flex;
  11.     justify-content:center;
  12.     align-items:Center;
  13. }
  15. /* 方法3：transform 布局 */ 
  16. .box1 {
  17.     position: relative;
  18. }
  19. .box1 span {
  20.     position: absolute;
  21.     top: 50%;
  22.     left: 50%;
  23.     width: 100%;
  24.     transform: translate(-50%, -50%);
  25.     text-align: center;
  26. }
  27. //...

●、flex布局