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);
}