1. 使用 padding-bottom 解决图片加载等的抖动问题（及先占位）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>123</title> <style> body{ color:#000; } .root{ width:100%; height:0; overflow: hidden; padding-bottom: 69.7%; } .root img{ width: 100%; } </style> </head> <body> <div class="root"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586411532646&di=1db020c62c966558ba0b31b0d542fb53&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F21%2F09%2F01200000026352136359091694357.jpg" alt=""> </div> <div>test</div> </body> </html>
2. 在vue项目中的样式时有时候需要修改组件的样式但是 通常我们是scoped进行了限制 可以用>>> 进行穿透来修改样式
3.利用css 设置超出长度显示省略号
{
overflow:hidden;
white-space: nowrap;
text-overflow:ellipsis;
}