你所不知道的css

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

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

---

众所周知，随着css3的出现，css能够更加方便的书写样式层。今天咱们就来整理一些你所不知道的css！

注：IE已经被微软爸爸所抛弃，果断放弃，不作考虑。

一、截取多行文本，超出文本显示...

想必你们截取一行，都会书写，针对块级元素或行内块元素，代码以下：

.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内核的）浏览器
}
复制代码

实际应用中若是有处理浏览器兼容的需求，以上方法的兼容方案也有不少。

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

二、利用 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。

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

啥也不说了，直接上代码：

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

::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; 
}
复制代码

四、改变placeholder值的样式

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

五、盒子垂直水平居中

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

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

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

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

一点点内容都写了快两个小时，果真会写文章都是大神！若是对您有用，你也喜欢请点赞，若是不喜欢，甚至有错误内容（但愿能够指出来，以便纠正），还请见谅，多多指正，先这样吧，明天继续~ 🙏🙏🙏