在css设置可改变大小的div滚动条样式方法：
1.首先新建html文档，进入代码书写界面。
2.在</head>和<body>的里面写入代码，在<div>里面写入想要输入的内容</div>。
3.书写外层轨道css代码。body::-webkit-scrollbar { width:20pxheight:2pxbackground:#cccborder-radius:10px/*外层轨道*/}
这里主要是设置外层轨道的形状和颜色。
4.书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:blockwidth:6pxmargin:0 autoborder-radius: 10pxbackground:red/*内层轨道*/}
这里主要是设置内层轨道的形状和颜色。
5.代码工作做完后，就可以查看效果，效果如下红框所示，滚动条设置完成。
关键词：隐式轨道 / 隐式网格 / 自动布局算法
隐式网格是指当网格项目确认在显式网格之外时所创建的网格，简单来说，当没有足够空间或显式网格轨道来分配网格项目时，此时剩下网格会自动创建隐式网格。
当设置网格容器的网格模板 grid-template 属性并指定固定数量轨道时创建出来的就是典型的显式网格，而在实际的HTML中存在网格项目多余既定数量，此时这些多余的网格是之前未声明定义的，因此网格容器会通过添加隐式网格线来生成网格轨道，在将这些多余的网格分配到其中，这些多余的就是所谓“隐式网格”。
隐式网格轨道的尺寸由 grid-auto-rows 和 grid-auto-columns 属性来确定，使用 grid-auto-flow 属性来控制隐式网格自身主动定位（auto-placement），这三个属性都需要在网格容器上设置。
如何产生隐式网格呢？
例如：定义一个网格容器，网格间距为1px，默认存放两列等宽网格项目，创建具有隐式网格的布局。
问题是虽然在网格容器中设置了2列等宽的位置用来容器网格项目，也就是说只定义了1行轨道，但实际上网格容器中具有4个网格项目，问题来了，第3和第4个网格容器是如何处理的呢？
第3和第4会自动创建下一个轨道，即隐藏网格。创建出来的隐式网格的方向若没有设置则默认为 row 即 grid-auto-flow:row 。
这里我们首先将这4个网格分成两种类型显式网格和隐式网格，其中可以发现第1和第2个为显式网格，第3和第4网格为隐式网格。换句话说第1行为显式行轨道，第2行为隐式行轨道。
grid-auto-flow 属性用来设置自动布局算法，用于精确指定在网格中被自动布局的网格项是如何排列的，也就是说指定自动放置的网格项是如何流入网格中的，因此也被称之为“网格自动流”。
稠密堆积算法 VS 稀疏算法
dense 使用稠密堆积算法，若【后面】出现小元素则算法会尝试填充网格中【前面】留下的空白，如此这样会填补上稍大元素所留下的空白，但同时可能导致原有出现次序被打乱。
若省略 dense 则会使用稀疏算法，即在网格中布局元素时，布局算法只会向前移动，永远不会倒回来去填补空白，这样做以保证所有自动布局元素是[按照次序]出现的，即使可能会留下被后面元素填充的空白。
例如：改变隐式网格默认方向 row 为 column ，此时隐式网格行高 grid-auto-rows 将会失效。
网格容器的 grid-auto-rows 属性可以用来定义隐式网格中行轨道的大小
这里 grid-template-rows:70px 设置的是显式轨道的行高， grid-auto-rows:140px 则设置的是隐式轨道的行高。
设置隐式网格列宽，首先需使用 grid-auto-flow:column 自动创建隐式网格流方向为列，然后在使用 grid-auto-columns:1fr 设置隐式网格的列宽，这里使用 1fr 做等分处理。
例如：排序与布局
第1个网格项横跨左2格，后4格按 grid-auto-flow:column 的流向排列。
1.目前台式电脑与笔记本适配测试数据以下为参考数值：
台式机和笔记本电脑的分辨率：2560x1440 1920x1200 1680x1050 1600x1200 1440x900 1366x768 1280x1024 1280x800 1280x768 1152x864 1024x768 800x600
平板电脑分辨率：iPad（ 768x1024 ）iPad Pro（1024x1366）Nexus 10（800x1280） Nexus 7（600x960）---显示都是不完整的
智能手机分辨率：Nexus 5（360x598） Nexus 5x（412x684） iPhone 6 Plus（414x736） iPhone 6（375x667） iPhone 5（320x568） iPhone 4（320x480）------显示都是不完整的
2.突然出现滚动条禁止屏幕抖动：
body {
padding-right: calc(100vw - 100%)
}
3.更改（美化）滚动条样式：
//滚动条整体部分
::-webkit-scrollbar {
width: 6px
height: 6px
background-color: transparent
}
//滚动条轨道部分
::-webkit-scrollbar-track {
background-color: transparent
}
//滚动条滑块部分
::-webkit-scrollbar-thumb {
border-radius: 3px
background-image: linear-gradient(135deg, #09f, #3c9)
}
4.自动识别文本换行
7.页面暗黑模式：
html{
filter: invert(1) hue-rotate(180deg)
}
8.页面悼念(全灰)模式：
html{
filter: grayscale(1)
}
9.两端文本对齐 ：
text-align-last:justify
10.禁用效果 ：
pointer-events:none
11.aspect-ratio维持图片长宽比 ：
aspect-ratio：1/1
12.clamp() 实现页面的响应式 ：
clamp() 的工作原理是“夹紧”或限制一个灵活的值，使其处于最小和最大范围之间
img {
width: clamp(15vw, 800%, 100%)
}
h1 {
font-size: clamp(20px, 5vw, 35px)
}
