这是我参与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
所以出现抖动问题
拿开头上面的图做:
可以看到点击添加边框会出现抖动问题,下面来解决它,可以初始给元素设置一个透明边框:
.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小技巧,欢迎评论留言感谢😀🍻!