阅读 544

你所不知道的css

作为一名长期潜水的前端er、切图仔,在木易杨老师的鼓励下,开始尝试去写一写文章,来整理、分享自己的一些学习所得,与掘金的大佬们共同进步。

刚开始写文章,表达欠妥,还请多多指正,如果觉得本文不错,欢迎点赞、评论、转发,您的支持就是我坚持的最大动力。


众所周知,随着css3的出现,css可以更加方便的书写样式层。今天我们就来整理一些你所不知道的css!

注:IE已经被微软爸爸所抛弃,果断放弃,不做考虑。

1、截取多行文本,超出文本显示...

想必大家截取一行,都会书写,针对块级元素或行内块元素,代码如下:

.textOneLine{
    overflow:hidden;  // 超出的长度的内容截掉,不产生滚动条
    text-overflow: ellipsis;  // 该属性有三个值clip 、ellipsis 、string,代表怎么表示被截掉的文本
    white-space: nowrap; // 文本不会换行
}
复制代码

如果需求是截取多行文本呢,又将怎么书写代码呢? 举个🌰,截取3行:

.textMoreLine{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;  //属性规定框的子元素应该被水平或垂直排列
    -webkit-line-clamp: 3;  //这个属性适合WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器
}
复制代码

实际应用中如果有处理浏览器兼容的需求,以上方法的兼容方案也有很多。

比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号...的元素(可借助伪元素)模拟实现。这里提到伪元素,我认为伪元素是个好东西,有时候可以很好的帮助我们。

2、利用 javascript 获取并修改 ::before 和 ::after 的值

使用 javascript 操作,当然不能绕过 jQuery(后端开发前端的最爱,往往JQ一把梭!),然后遇到操作伪元素这个问题,他也只能彻底认栽了!为什么呢?

要知道JQ选择器是用来操作DOM的,都是基于DOM元素,而伪元素本身并不是DOM元素,这个 ‘伪’ 字就很妙了。那么我们接下来,来看看如何使用js来操作伪元素呢?

获取伪元素的属性值

刚才说了,伪元素不是DOM,那么任何基于选取DOM的样式而操作伪元素是行不通的,但是js为我们提供了一个直接获取CSS属性的方法getComputedStyle(),然后配合getPropertyValue()获取对应属性。

window.getComputedStyle(element, [pseudoElt]) 该方法MDN文档

getPropertyValue()

我们使用该方法来获取微元素的属性值,代码如下:

//获取before伪元素的字号大小
var div=document.querySelector('div');
var fontSize=window.getComputedStyle(div,'::before').getPropertyValue('font-size');
复制代码

更改伪元素的属性值

getComputedStyle()只能获取不能更改,通过js来更改伪元素有一下几种方法:

  • js更改data-*属性值来更改伪元素的content值 (推荐)

    实现原理:W3C 给伪元素的content属性值提供了一个attr()方法来获取。attr()支持多个连写,而且attr()内可以是DOM元素的任意属性。

    代码实现如下:

    <div class="wrap" data-text="我是伪元素" data-class="new-wrap"></div>
    复制代码
    .wrap::before{
        content: '我的类是' attr(class) '想要变成' attr(data-class);
    }
    复制代码
  • 创建多个class,通过切换class来达到改变样式的目的;

  • 利用内部css样式的高优先级来覆盖外部css。

3、改变选中内容颜色、禁止选中内容

啥也不说了,直接上代码:

改变选中内容颜色(只能使用以下四个属性):

::selection{
    color:red;
    background:blue;
    cursor:auto;
    outline:none;
}
复制代码

禁止选中内容:

.disabled-select {  
    -webkit-touch-callout: none;  
    -webkit-user-select: none;  
    -khtml-user-select: none;  
    -moz-user-select: none;  
    -ms-user-select: none;  
    user-select: none;  
}  
复制代码

css禁用鼠标点击事件:

.disabled { 
    pointer-events:none; 
}
复制代码

4、改变placeholder值的样式

input::-webkit-input-placeholder{
    text-align: right;
    //... 其他样式代码
}
复制代码

5、盒子垂直水平居中

推荐一篇文章,总结的很到位,直通车

6、利用CSS改变图片颜色的多种方法

“说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色。或者是hover的时候,对图片的对比度,阴影进行处理。”

这个内容也推荐一篇文章,总结很到位,不做更多介绍。直通车

一点点内容都写了快两个小时,果然会写文章都是大神!如果对您有用,你也喜欢请点赞,如果不喜欢,甚至有错误内容(希望可以指出来,以便纠正),还请见谅,多多指正,先这样吧,明天继续~ 🙏🙏🙏

关注下面的标签,发现更多相似文章
评论