这是我参与更文挑战的第9天,活动详情查看: 更文挑战
前言
以下都是一些我积累的一些css技巧,有些在我工作中用的很多,有些相对较少。
同时,为了让大家更清楚什么情况下使用,我会贴出关于属性的兼容情况。
希望能帮助到大家。
一、文字两端对齐
在工作中,会有实现如下图中的效果需求。在规定/有限的尺寸,使文字实现两端对齐,看起来会比较美观。
以前傻傻的用空格( )填充过。
也用span标签包括,然后计算距离,但是都不好用。
今天,他来了(哈哈哈,抄一下台词。)
<ul class="justify-text">
<li>账号</li>
<li>密码</li>
<li>电子邮件</li>
<li>通讯地址</li>
</ul>
<style>
.justify-text li{
padding: 0 20px;
width: 50px;
height: 40px;
color: #fff;
line-height: 40px;
text-align: center; /* 不兼容text-align-last属性时,居中显示 */
background-color: #f66;
text-align-last: justify; /* 核心属性 */
}
li + li { margin-top: 5px; }
</style>
复制代码
兼容如下
可以看到,部分浏览器兼容性不是很好。 所以加了一个text-align居中属性,在不兼容的情况下,文字居中显示。
需要使用到的小伙伴,注意考虑下用户浏览器哦。
二、文本溢出隐藏
这个需求肯定是看腻了的。
但是以防还有小伙伴不清楚,所以写一写。
/* 在css中的话, 为了方便调用,会简历一个通用类名来存储 */
.c-line-1{
overflow: hidden;
white-space: nowrap; /* 禁止换行 */
text-overflow: ellipsis; /* 超出部分替换为省略号 */
}
.c-line-2{
display: -webkit-box;
-webkit-line-clamp: 2; /* 显示为两行 */
-webkit-box-orient: vertical;
overflow: hidden;
}
复制代码
兼容如下
相对来说,处理还好和惨烈的边缘,所以酌情使用。
那么使用的时候,就有技巧了。
一般我会添加一个固定高度。 这样子的话,即时因为兼容问题导致不可用,也不会出现破版的情况。
再加一种基于scss预处理器的写法,会更灵活一些。
@mixin textOverflow($num: 1){
@if $num == 1{
// 处理单行情况
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} else {
// 处理多行
display: -webkit-box;
-webkit-line-clamp: $num; /* 显示为两行 */
-webkit-box-orient: vertical;
overflow: hidden;
}
}
复制代码
三、纯css实现计数器。
这个是我在张鑫旭大佬的文章中学来的。
理性来讲,实际开发中来讲,以为过于冷门,感觉会不如用js实现,而且js不是很需要考虑兼容的问题。
但是既然能实现,还是写出来,提供更多思考的可能性。
<p>choice tag</p>
<input hidden type="checkbox" id="topic1"> <label for="topic1" class="topic">Vue</label>
<input hidden type="checkbox" id="topic2"> <label for="topic2" class="topic">React</label>
<input hidden type="checkbox" id="topic3"> <label for="topic3" class="topic">TS</label>
<p>Choised <span class="topic-counter"></span> tag</p>
<style type="text/css">
[type="checkbox"]{
position: absolute;
clip: rect(0,0,0,);
}
label{
padding: 4px 16px;
border: 1px solid #78b9f7;
}
body{
counter-reset: topicCounter; // 创建一个计数器
}
:checked + .topic{ // 每个别选中的input都会触发计数器+1
counter-increment: topicCounter;
background-color: #78b9f730; // #78b9f7 是颜色 30是透明度
}
.topic-counter::before{
color: red;
content: counter(topicCounter); // 输出计数器数字
}
</style>
复制代码
四、css选择器:Don't repeat yourself
css3的发布,新增了许多新的选择器,部分如下图。
全部选择器,可点击链接查看
我在工作中,最喜欢用的就是选择以特定字符串结尾的选择器。
.ele[$="__btn"]{}
复制代码
这个选择器让我可以节省许多重复属性的书写。
但凡我的按钮需要用到这些公共的属性,我就加上"__btn"后缀,轻松加愉快。
五、css3选择器:刨根问底,划分界限。
前面提到的css3选择器中,还有一个根节点选择器 :root,这个选择器,可以选择当前文档的根元素,并添加属性。
我常用来修改全局盒模型,尽管看起来和直接使用通配符"*" 没啥区别,但事实并非如此。
:root{
box-sizing: border-box;
}
*,
::before,
::after{
box-sizing: inherit;
}
.frame-root{
box-sizing: content-box;
}
复制代码
可以看到,首先通过根节点设置了文档的盒模型属性
之后的frame-root并不是具体的类型,而是指代引入的UI库的根节点。
在这样设置之后, 犹豫使用通配符设置素有的元素,盒模型都采用继承。
UI库中的元素会继承父级也就是UI库根节点的内容盒模型, 其他元素会向上查到根节点,继承自定义盒模型。
这个用法,是因为我有一次,显示自己写样式,之后还是觉得用框架比较好, 但是中途引入框架,势必因为自己修改了盒模型而导致样式崩塌,于是有了这个写法。
希望你用不上。
六、css3选择器:提升优先级。
相信不少前端的小伙伴,都有过被css的优先级折磨的精力吧?
无论如何,我是很讨厌写行内样式, 对于 !important我也用的少(强迫症)
所以我一般会使用如下方式来提升优先级。
.bar.bar{ css } /* 重复选择自己,也不算很美观,但是class的权重double */
.bar[class]{ css } /* 通过css3的选择器来选择class属性, 提升优先级 */
#bar[id]{ css }
复制代码
但是这里有一点要注意,优先级提升的程度,只够用于同级别的类名,避免被后面覆盖的。
也就是说 .bar[class] 只能避免被后面的.bar覆盖, 但仍然无法覆盖前面的#bar
总结
这篇文章是一些技巧,并非是css属性指南,所以暂时就这么多了。希望对各位小伙伴有所帮助。
另外,css,尤其是随着css3的发布,有很多暂时还很冷门, 但是很有趣,也挺使用的属性,等着你我去挖掘。
我也会继续收集并发布出来的。