css一些常用技巧代码

 

• 　　图片等比例自动缩放

img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;    
}

 

 

•  多行省略  最后line-clamp设置的是几行

 

ellipsis() 
overflow : hidden 
text-overflow : ellipsis 
display : -webkit-box 
-webkit-box-orient : vertical 
-webkit-line-clamp 3

 

 

• css实现宽高比例一致的图形  (可防止图片抖动)

    width: 100%
    height: 0
    overflow: hidden
    padding-bottom: 26.7%

 

•  vue中样式穿透 样式穿透用>>>   在组件中scoped只能用自己的样式 不能用子组件的样式  使用>>>可以从父组件中穿透  改变其子组件的样式

.wrapper >>> .swiper-pagination-bullet-active

 

转载于:https://www.cnblogs.com/JankinLiu/p/10460378.html