前端css技巧

前端css技巧

1. 解决图片5px间距

• 方案1：给父元素设置font-size: 0;
• 方案2：给img设置display: block;
• 方案3：给img设置vertical-align: bottom;
• 方案4：给父元素设置line-height: 5px;

2.元素高度跟随窗口

<div class="box">
  <div class="child"></div>
</div>

*{
  margin: 0;
  padding: 0;
}

.child{
  width: 100%;
  height: 100vh;*
}

3. 巧用not选择器

• 有些情况下所有的元素都需要某些样式，唯独最后一个不需要，这时候使用not选择器将会特别方便

例子如下:

<ul>
    <li>
      <span>单元格</span>
      <span>内容</span>
    </li>
    <li>
      <span>单元格</span>
      <span>内容</span>
    </li>
    <li>
      <span>单元格</span>
      <span>内容</span>
    </li>
    <li>
      <span>单元格</span>
      <span>内容</span>
    </li>
</ul>

li:not(:last-child){
  border-bottom: 1px solid #ebedf0;
}

4. 使用caret-color改变数据框(input)光标颜色

.color {
  caret-color: #ccc;
}

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

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

6.禁止用户选择文本

.box:last-child{
  user-select: none;
}

7.使用filter:grayscale(1)使网页呈现哀悼模式

body{
  filter: grayscale(1);
}

希望此文章你能帮助到你