你应该知道的这十个 CSS 小技巧

2021年08月20日 09:44 · 阅读 262

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

前言

作为一个专业的切图仔，为了能够提高切图效率，收藏一下 CSS 常用的方法不可少，话不多说直接开始😁。

justify-content对齐问题

看到下面原型图，立马我们先想到 CSS flex 布局，父元素在设置 justify-content: space-between前后元素两边对齐，自适应距离产生 margin-right 效果。

可是如果最后一个元素只剩两个，就会导致最后一列前后两个元素靠边，中间空洞，并不是我们想要得效果。

如果子元素宽度固定我们可以使用 margin-right 代替

<ul class="list">
    <li v-for="item in 7" class="item">{{ item }}</li>
</ul>
复制代码

.list {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 30%;
  height: 80px;
  background-color: bisque;
  margin-top: 20px;
}
.item:not(:nth-child(3n)) {
  margin-right: calc(10% / 2);
    
  // or 
  margin-rigth: calc(100% - (计算好的宽度)px)
}
复制代码

也可以使用 grid 布局实现

.list {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 10px;
}
.item {
  width: 100px;
  height: 80px;
  background-color: bisque;
  margin-top: 20px;
}
复制代码

如果子元素宽度不固定，更多方案可以戳这里让CSS flex布局最后一行列表左对齐的N种方法。

中间间隙，两端对齐

遇到有些情况，没一行中间间隙有 20px的宽度，于是所有子元素设置 margin-top：20px

可是由于第一项也有 margin-top 的效果，通常我们会将第一项子元素设置 margin-top：0px，还有一种简单的方式就是给子元素的父元素设置一个负的margin：

// 柠檬色容器父元素
.container {
  width: 300px;
  min-height: auto;
  background-color: yellow;
  margin-top: -20px; // 容器负 20px
}

// 子容器元素
.item {
  width: 40px;
  height: 100px;
  background-color: #00c6b8;
  margin-top: 20px;
}
复制代码

文字居中，换行的文字靠左

在盒子居中显示的时候，盒子宽固定，文字超过长度换行，这时候会发生换行的文字也会居中。

  <div class="container">
    <div>
      在盒子居中显示的时候，盒子宽固定，文字超过长度换行，这时候会发生换行的文字也会居中
    </div>
  </div>
复制代码

.container {
  padding: 30px;
  text-align: center;
}
复制代码

我们想要的效果是最后一行的文字应该靠右才对，对子元素添加 text-align: left;样式属性即可

.container > div {
  text-align: left;
}
复制代码

设置价格￥样式简单做法

一般在电商项目中，通常都会有 ￥符号，一般我们会单独写一个 span 标签包裹再单独设置样式，下面说说更简单的做法：

<div class="price">￥169.00元</div>
复制代码

.price:first-letter {
  margin-right: 4px;
  font-size: 14px;
  vertical-align: -2px;
  color: red;
  font-weight: bold;
}
复制代码

熟悉的三角形

三角形的场景也是常见之一，比如：

<div class="triangle"></div>
复制代码

.triangle {
  width: 0;
  border: 10px solid;
  border-color: transparent transparent #00C6B8;
}
复制代码

设置自定义滚动条效果

<p class="item">
    这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css
</p>
复制代码

::-webkit-scrollbar {
  /* 血槽宽度 */
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  /* 拖动条 */
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}
::-webkit-scrollbar-track {
  /* 背景槽 */
  background-color: #ddd;
  border-radius: 6px;
}
复制代码

隐藏元素方法

有时候比如上传文件，我们需要隐藏 <input type="file"/>，点击按钮，触发input点击事件。

有7隐藏元素的方式：

display: none;
visibility: hidden;
text-indent: -9999px;
color: transparent（只适用于文字）;
position: relative; z-index: -1;
position: absolute; opacity: 0;
position:absolute; clip:rect(0 0 0 0);

背景模糊虚化

.background {
    filter: blur(20px);
}
复制代码

选中元素添加边框抖动问题

比如在做多个选项选中的时候，需要添加一个选中边框显示，这时候边框添加上去，元素比之前的高度多了1px所以出现抖动问题

拿开头上面的图做：

抖动.gif

可以看到点击添加边框会出现抖动问题，下面来解决它，可以初始给元素设置一个透明边框：

.item {
    color: #333;
    width: 108px;
    line-height: 30px;
    background: #f8f8f8;
    border-radius: 100px;
    text-align: center;
    border: 1px solid transparent; // 默认添加一个透明边框
}

// 选中添加边框
.active {
    border: 1px solid #00c6b8;
}
复制代码

再看看效果：

对比上面效果图，已经没有抖动情况~

优雅增加点击区域大小

上面 border 透明边框可以帮助解决样式抖动问题，我们还可以用来，增加点击区域的大小。

.icon-close{
  width: 20px;
  height: 20px;
  border: 12px solid transparent;
}
复制代码

可以看到区域 icon 被放大了

结个尾

上面介绍了几个 CSS 使用的小技巧，如果你有更多css小技巧，欢迎评论留言感谢😀🍻！