阅读 483

一些开发中的CSS小技巧

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

前言

以下都是一些我积累的一些css技巧,有些在我工作中用的很多,有些相对较少。

同时,为了让大家更清楚什么情况下使用,我会贴出关于属性的兼容情况。

希望能帮助到大家。

一、文字两端对齐

在工作中,会有实现如下图中的效果需求。在规定/有限的尺寸,使文字实现两端对齐,看起来会比较美观。

image.png

以前傻傻的用空格( )填充过。

也用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>
复制代码

兼容如下

image.png

可以看到,部分浏览器兼容性不是很好。 所以加了一个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;
}
复制代码

兼容如下

image.png image.png

相对来说,处理还好和惨烈的边缘,所以酌情使用。

那么使用的时候,就有技巧了。

一般我会添加一个固定高度。 这样子的话,即时因为兼容问题导致不可用,也不会出现破版的情况。

再加一种基于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>
复制代码

image.png

四、css选择器:Don't repeat yourself

css3的发布,新增了许多新的选择器,部分如下图。

全部选择器,可点击链接查看

image.png

我在工作中,最喜欢用的就是选择以特定字符串结尾的选择器。

.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的发布,有很多暂时还很冷门, 但是很有趣,也挺使用的属性,等着你我去挖掘。

我也会继续收集并发布出来的。

文章分类
前端
文章标签