一些开发中的CSS小技巧

这是我参与更文挑战的第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的发布，有很多暂时还很冷门， 但是很有趣，也挺使用的属性，等着你我去挖掘。

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