0. 查看css属性兼容性
Can I Use: caniuse.com/
浏览器整体变灰色
掘金
知乎
可以看出，都是在最外层HTMl中加入新的类，并在这个类中添加了新的属性
//值0.95在多平台使用（推荐值） filter: grayscale(0.95)
有滚动效果，但不显示滚动条
1.这里是让显示滚动条
.test{
height: 50px; //固定高度
overflow:auto / scroll; //前提条件是固定height，overflow的属性二选一即可
}
2.不显示滚动条
//主要样式代码
::-webkit-scrollbar {
display: none;
}
这样就可以不显示滚动条，又有滚动效果
但一个问题，当设计非常刁钻，我们有些地方需要看到滚动条，而有些不需要滚动条，这样该怎么办呢？
解：可尝试将不需要滚动条的部分看成一块（在vue中，可以当作是将这一部分当成一个一个组件），在style标签中添加scoped（让css样式仅在当前组件中生效），再添加上方不显示滚动条中内容。反之则不添加即可
（单行、多行）显示省略号
单行
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
多行
多行思路： 固定盒子（div）宽高，允许自动换行,在div中加入下方样式
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp: 2; //省略号在第二行显示
保持元素宽高比
问题：当设置元素，宽为百分比，高固定时，会发生将浏览器缩小时，只会改变宽度，高度不会发生变化
.text {
width: 50%;
height: 300px;
background-color: blue;
}
解决：去掉height，添加css属性：aspect-ratio: 16 / 9;
.text {
width: 50%;
//主要代码
aspect-ratio: 16 / 9; //此时元素显示16/9，也可4 / 3 ，可根据需求来定
background-color: blue;
}
瀑布流布局
成果图
简介：
实现该布局中使用了css中新添加的样式属性，grid-template-rows: masonry;（属性于2023-09只针对火狐浏览器做了适配，其他浏览器还不能正常使用）
可能出现的问题：
样式若没变化，则需要在火狐浏览器上方地址栏输入about:config,搜索首选项名称处输入 layout.css.grid-template-masonry-value.enabled,将false改为true即可
去除空格的七种方法
1、trim() : 删除字符串开头和结尾的空格。
2、strip() : 删除字符串开头和结尾的空格。
3、stripLeading() : 只删除字符串开头的空格
4、stripTrailing() : 只删除字符串的结尾的空格
5、replace() : 用新字符替换所有目标字符
6、replaceAll() : 将所有匹配的字符替换为新字符。此方法将正则表达式作为输入，以标识需要替换的目标子字符串
7、replaceFirst() : 仅将目标子字符串的第一次出现的字符替换为新的字符串
