常用css相关笔记

最后一个css不加样式

.nav-sort li:not(:last-child) {
    border-bottom:#3e3e3e 1px solid;
}

垂直居中

vertical-align: middle;

超出部分省略号第一种方法，crome不兼容

p{
/**
white-space：nowrap;表示文本不会换行，在同一行继续，知道遇到
标签为止；
overflow：hidden;不显示超过对象尺寸的内容，就是把超出的部分隐藏了；
text-overflow：ellipsis;当文本对象溢出是显示...，当然也可是设置属性为clip不显示点点点；
-o-text-overflow:为了兼容opera浏览器;
*/
width:200px;
overflow:hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
white-space:nowrap;
}
div{
/*文字超出高度不显示*/
overflow:hidden;
display:block;
height:60px;
width:100px;
}

　　第二种方法

@-moz-documentc url-prefix(){
  p{
    position: relative; 
    line-height: 20px;
    max-height: 40px;//设置最大高度，加上overflowhidden，正好是两行，使超出部分隐藏
    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://blog.csdn.net/weixin_42453802/article/details/85166114

　　a标签无decoration 手势

 .integral  ul li a{
text-decoration: none;
cursor:pointer;
  }

　　图片transform

div img{  
    cursor: pointer;  
    transition: all 0.6s;  
      }  
div img:hover{  
    transform: scale(1.4);  
    }
　　

transition: all 0.6s;　　表示所有的属性变化在0.6s的时间段内完成。
transform: scale(1.4);　　表示在鼠标放到图片上的时候图片按比例放大1.4倍。

常用css相关笔记

推荐阅读