css高频使用片段,提高幸福感的小技巧

x33g5p2x  于11个月前 转载在 CSS3  
字(1.6k)|赞(0)|评价(0)|浏览(129)
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);
  }

相关文章