CSS属性学习笔记

z-index:

设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面。

value:auto=>堆叠顺序与父元素相等[默认],number=>设置堆叠顺序值

Tip:

  1) 元素可拥有负的z-index属性值,

  2) z-index仅能在定位元素上起作用[position:absolute,relative,fixed]

Map:    

 单行/多行文本溢出显示省略号:

[1]单行实现:

overflow:hidden;//溢出元素不可见

text-overflow:ellipsis;//clip:修剪文本;ellipsis:显示省略符代表被修剪的文本;string:使用给定字符串代表被修剪的文本

white-space:nowrap;//文本不换行,直到遇到<br>标签为止

[2]多行实现:

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:3;

overflow:hidden;

[3]多行实现二:

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}

p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;   

  background: -webkit-linear-gradient(left, transparent, #fff 55%);   

  background: -o-linear-gradient(right, transparent, #fff 55%);   

  background: -moz-linear-gradient(right, transparent, #fff 55%);   

  background: linear-gradient(to right, transparent, #fff 55%);

}

原文地址:https://www.cnblogs.com/skye-blog/p/7887088.html