Skip to main content

CSS UI实现中的一些小技巧

2021年8月 · 预计阅读时间： 2 分钟

CSS

前言#

作为一个专业的切图仔，为了能够提高切图效率，收藏一下 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 小技巧，欢迎评论留言~感谢~😀🍻！