未必知道的css技巧

知识点篇

1、滚动条样式美化
：：-webkit-scrollbar-track{}
：：-webkit-scrollbar-thumb{}
2.grid-template设置网络模板，实现三列二行布局
display:grid;
grid-template-columns:100px 100px 100px;
grid-template-rows:70px 100px;
grid-template:70px 100px/100px 100px 100px;
3. grid-gap设置网格间隙，包括行和列
比如：grid-gap:10px;
4.grid布局，使用fr单位实现等比例分配空间
display:grid;
gird-template-columns:1fr 2fr 1fr;
grid-gap:10px;
5.grid布局使用repeat函数，可以少写些代码
比如：gird-template-columns:repeat(6，70)
6.利用box-shadow,clip-path实现彩虹

7.禁止浏览器的默认行为
禁止长按图片保存
img {
-webkit-touch-callout:none;
pointer-events:none;
}
//禁止长按选择文字
div {
-webkit-user-select:none;
}
//禁止长按呼出菜单
div{
-webkit-touch-callout:none;
}
8.屏幕旋转为横屏时，字体大小会变
*{
-webkit-text-size-adjust:100%;
}
10.文本缩进，块级用text-indent，内联用margin-left