1. 解决图片5px间距

方案1：给父元素设置font-size: 0

// html
<div class="img-container">
	<img src="图片地址" />
</div>

// css
.img-container {
	font-size: 0;
}
img {
	width: 100%;
}

方案2：给img设置display：block

// css
img {
	width: 100%;
	display: block;
}

方案3：给img设置vertical-align：bottom

// css
img {
	width: 100%;
	vertical-align: bottom;
}

方案4：给父元素设置line-height：5px

// css
.img-container {
	line-height: 5px;
}

2. 元素高度跟随窗口

有时候希望某个元素的高度和窗口是一致的，如果用百分比设置，那html、body等元素也要跟着一顿设置height: 100%有没有更简单的方法呢？

// html
<div class="app">
	<div class="child"></div>
</div>

// css
.child {
	width: 100%;
	/* 关键css */
	height: 100vh;
}

3. 移除type="number"尾部的箭头

// html
<input type="number" />
<input type="number" class="no-arrow" />

// css
.no-arrow::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

4. 画小箭头

// html
<div class="box">
  <div class="box-inner">
    <div class="arrow bottom"></div>
    <div class="arrow right"></div>
    <div class="arrow top"></div>
    <div class="arrow left"></div>
  </div>
</div>

// css
.arrow {
	display: inline-block;
	margin-right: 10px;
	/* 基础样式 */
	width: 0;
	height: 0;
	/* 基础样式 */
	border: 16px solid;
	border-color: transparent #CDDC39 transparent transparent;
	position: relative;
}
.arrow::after {
	content: '';
	position: absolute;
	/* 通过位移覆盖背景 */
	right: -20px;
	top: -16px;
	border: 16px solid;
	border-color: transparent #fff transparent transparent;
}
/*下*/
  .arrow.bottom {
    transform: rotate(270deg);
  }
  /*上*/
  .arrow.top {
    transform: rotate(90deg);
  }
  /*左*/
  .arrow.left {
    transform: rotate(180deg);
  }
  /*右*/
  .arrow.right {
    transform: rotate(0deg);
  }