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

·  阅读 262
你应该知道的这 十个 CSS 小技巧

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

前言

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

justify-content对齐问题

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

image-20210819143449753.png

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

如果子元素宽度固定我们可以使用 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)
}
复制代码

image-20210819144847087.png

也可以使用 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

image-20210819155036542.png

可是由于第一项也有 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;
}
复制代码

image-20210819155700751.png

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

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

  <div class="container">
    <div>
      在盒子居中显示的时候,盒子宽固定,文字超过长度换行,这时候会发生换行的文字也会居中
    </div>
  </div>
复制代码
.container {
  padding: 30px;
  text-align: center;
}
复制代码

image-20210819150812760.png

我们想要的效果是最后一行的文字应该靠右才对,对子元素添加 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;
}
复制代码

熟悉的三角形

三角形的场景也是常见之一,比如:

image-20210819151424735.png

<div class="triangle"></div>
复制代码
.triangle {
  width: 0;
  border: 10px solid;
  border-color: transparent transparent #00C6B8;
}
复制代码

image-20210819152747336.png

设置自定义滚动条效果

<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;
}
复制代码

image-20210819160105141.png

隐藏元素方法

有时候比如上传文件,我们需要隐藏 <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);

背景模糊虚化

image-20210819164427334.png

.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;
}
复制代码

再看看效果:

1232123218.gif

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

优雅增加点击区域大小

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

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

image-20210819174802674.png

可以看到区域 icon 被放大了

结个尾

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

分类:
前端
标签:
分类:
前端
标签: