知识点篇

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实现彩虹
未必知道的css技巧
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

相关文章: