前端常见问题及技巧

1.margin-top失效

代码如下：

								//html
 <div class="wrapper">
      <div class="outer">
        <div class="main"></div>
      </div>
    </div>
  </div>
								//css
.wrapper {
  width: 400px;
  height: 400px;
  border: 1px solid black;
}
.outer {
  width: 300px;
  height: 200px;
  background: red;
}
.main {
  width: 100px;
  height: 100px;
  background: blue;
  margin-top: 10px;
}

结果：

	原因：有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top
或者margin-bottom的值会“转移”给外层div

解决方法：

	1、在父层div加上：overflow:hidden；
	2.给父元素添加border。如果不想要border显示的话，可以设置border:1px solid transprent;
这样边框就是隐藏起来。
	3、把margin-top外边距改成padding-top内边距 (如果条件不允许，可以用第二种方法，更容易实现，
要考虑的因素更少)

2.img下边3像素问题

代码如下：

<div class="wrapper">
   <div><img src="../assets/image/company/scan.png" alt="logo">
        <img src="../assets/image/company/scan2.png" alt="logo">
   </div>
</div>

.wrapper {
  width: 400px;
  height: 400px;
  border: 1px solid black;
  div{
    img{
      width: 50px;
      height: 50px;
    }
  }
}

运行效果：

	可以看得见，设置图像宽高为50px，但是父div被撑大为53px，如果进行垂直剧中布局忽略这3像素，
那产生的效果就不理想

解决方法：

1.设置父元素font-size：0(不推荐)
2.改变图片的display:block
3.给img图片标签添加属性vertical-align:top;（不是baseline即可)

图片居中办法：line-height和vertical-align: middle, text-align: center;

方法1.
 div{
    height: 100px;
    line-height: 100px;
    text-align: center;
    img{
      width: 50px;
      height: 50px;
      vertical-align: middle;
    }
  }
方法2.不过只能是一个图片，否则只能第一个图片居中(也可以换成 margin -25px 0px 0px -25px)不过要计算偏移距离，不如translate方便
img{
	position: relative;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

3.UI库的样式穿透

	平时开发用到的UI库组件，但是有时候它们给定的样式是不能满足我们的需要，所以就要用到样式穿透改变
UI组件的默认样式

用法：

外层容器 >>> 组件 { }
外层容器 /deep/ 组件 { }
外层容器 ::v-deep 组件 { }

目前前两个都有失效的体验，最后一个推荐使用，用过多个组件库都没翻车

4.flex布局，元素缩放

有时看到父元素宽度不够时，子元素回进行等比例缩放，解决方法：

1.不对父元素设置宽度，随子元素撑开
2.给所有的子元素设置flex-shrink：0；

5.各个地方引入图片和样式

HTML中：<img src="../../assets/image/company/delte.png">
JS:{image: require("../../assets/image/company/account.png")}
CSS:@import "../../assets/css/service.scss";
也有@写法，@是指src路径，可在webpack设定，css要"~@"这样写。

6.判断对象相似

因为对象是引用类型，除非是指针指向同一地址，否则是不会相等的，我们可以利用JSON格式化对象，再进行对比
JSON.stringify(e) !== JSON.stringify(val);