绝对路径 通常是从盘符开始的,比如 D:\Eclipse\img.jpg 或 一个完整的网址 http://www.itcast.cn/images/log.gif
,并且给其设置 clear:both
2 父级盒子设置 overflow:hidden
书写简单,但是会隐藏溢出部分。
做法是 给父盒子添加 overflow 属性,并将其设置为 hidden 、auto 或 scroll。
3 父级盒子使用after伪元素
结构语义化正确,需要考虑兼容。
做法是 给父盒子添加这段样式:
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /*兼容IE6、7*/
*zoom: 1;
}
4 父级盒子使用after、befor伪元素
结构语义化正确,需要考虑兼容.
做法是 给父盒子添加这段样式:
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
定位
为什么?
实现标准流和浮动无法实现的效果
定位的组成
定位 = 定位模式 + 边偏移
定位模式
定位模式决定元素的定位方式,通过css的 position 属性来设置,其值主要分为四个:
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
边偏移
边偏移就是定位的盒子移动到最终位置,有 top、bottom、left、right 4个属性,分别指顶端偏移量、底部偏移量、左侧偏移量、右侧偏移量。
静态定位
静态定位是元素的默认定位方式,即无定位。它按照标准流特性摆放位置,没有边偏移,较少 使用。
相对定位
相对定位是指 元素在移动位置的时候,是相对它原来的位置 来说的,俗称自恋型定位。
注意:不脱离 标准流,即元素原本在标准流中的位置会继续保留 ,后面的盒子仍然以标准流的方式对待它。
绝对定位
绝对定位是元素在移动位置的时候,是相对于它的祖先元素来说的,俗称拼爹型。
注意:
1 如果没有祖先元素或者祖先元素没有定位,则以浏览器 为准定位(Document文档)
2 如果祖先元素有定位( relative / absolute / fixed),则会相对最近一级 的有定位祖先元素来移动位置,即可能会相对于父亲元素或爷爷元素等。
3 绝对定位不再占有原先的位置,即 绝对定位会脱标
4 在定位中最常用的是 “子绝父相”,即子级用绝对定位,父级用相对定位;
父盒子需要有定位,才能限制子盒子在父盒子内显示;
因为子级用绝对定位不会占有位置,可以放在父级内的任何一个地方,不会影响其他兄弟元素;
如果父盒子不是相对定位,就没有占有位置,会被后方同级元素占掉位置;
5 有些情况父元素不需要占有位置,就会用到“子绝父绝”
技巧:
固定定位
固定定位是元素固定于浏览器可视区 的位置。主要使用场景:可以在浏览器页面滚动时元素的位置不会改变。
注意:
1 固定定位以浏览器的可视窗口 为参照点移动元素
2 跟父元素没有 任何关系,固定定位不占有原先的位置,即脱标 。实际上,固定定位可以看做一种特殊的绝对定位。
3 固定定位的元素因为与父元素没有关系,所以一定 要设定宽高。
4 不 随滚动条滚动
技巧:
粘性定位(了解)
目前存在兼容问题,所以相关效果可以用js实现
定位拓展内容
绝对定位 / 固定定位和浮动类似。
1 如果行内元素添加绝对或者固定定位,可以直接设置高度和宽度
2 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。
3 脱标的元素(包含浮动元素 / 绝对或固定定位元素)不会产生外边距合并的问题
4 不同之处 绝对 / 固定定位会完全 压住其下方的盒子,而浮动元素虽然也会压住下方的盒子但是不会压住盒子里面的文字与图片。原因是,浮动最初的用处是做文字环绕 效果的,使文字围绕浮动元素排布。
定位叠放次序
在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用 z-index 来控制盒子的前后次序( z轴 ),z轴从屏幕内指向电脑外。
注意:
1 属性值可以是正整数、负整数 或 0,默认为auto,数值越大,盒子越靠上。
2 如果属性值相同,则按照代码书写顺序,后来居上。
3 属性值后不带单位。
4 只有定位的盒子才有 z-index属性
常见图片格式
1 JPG(JPEG),对色彩信息保留较好,高清且颜色多。
2 GIF ,最多只能存储256色,通常用来显示简单图形及字体,但可以保存透明背景和动画效果,实际经常用于一些图片小动画效果。
3 PNG ,结合了 GIF 和 JPG 的优点,存储形式丰富,可以保持透明背景。
4 PSD ,PS的专用格式,里面可以放图层、通道、遮罩层等。方便前端人员获取文字、图片、长度等。
2020.4.8
css书写顺序
2020.4.10
const变量可以修改吗?
const定义的基本类型不能改变,但是定义的对象是可以通过修改对象属性等方法来改变的。
2020.4.11
元素的显示与隐藏
主要有 display 、visibility 和 overflow 三种方式。
display 设置显隐
使用 display 隐藏元素后,元素不占有 原来的位置。
display:none; 隐藏对象
display:block; 转换为块元素且显示元素
visibility 设置显隐
使用 visibility 隐藏元素后,元素依然占有 原来的位置。
visibility:visible; 元素可视
visibility:hidden;元素隐藏
注意:
虽然元素依然占有原来的位置,但不代表它隐藏时还会响应hover:伪类。比如下图效果必须把hover:设置给底部盒子,而不能设置给遮罩层。
overflow 设置显隐
overflow 是设置元素中的内容溢出时的表现效果。
overflow:visible;不剪切内容也不添加滚动条
overflow:hidden;超出部分隐藏
overflow:scroll;不管内容是否有溢出,都会显示滚动条
overflow:auto;内容溢出自动显示滚动条,否则不显示
精灵图
目的
有效减少服务器接受和发送请求的次数,提高页面加载速度
特点
1 精灵图主要针对小背景图片的使用
2 借助 background-position 实现,一般情况下属性值都是负的,因为移动的是图片而不是盒子(向左向上移动)
3 注意 background-position 先写x偏移量,再写y偏移量
div {
width: 50px;
height: 50px;
background: url(../images/icons.png) no-repeat;
/*这里写的两个值分别为x和y的偏移量*/
background-position: -253px -3px;
}
字体图标
可以去 iconfont 下载字体图标,相关用法可以下载图标的代码之后查看到,按照相关步骤即可使用图标,具体有 unicode 和 symbol等方式,前者只能是单色的,类似于用css画图标,后者相当于是一张svg图片。
2020.4.12
css画三角形
因为在盒子宽高不为0的时候,盒子边框各边为梯形;盒子宽高为0的时候,盒子边框各边为三角形。所以可以通过设置透明色,来让盒子只显示其中的几条边,来达到画三角形画梯形的目的。
注意: 画三角形时,盒子宽高必须为0
应用:价格样式及其代码
Document
$1600
$5580
鼠标样式
取消表单文本输入框的轮廓
给 input 和 textarea 设置样式 outline:none ,就可以去掉输入聚焦时的蓝色轮廓。
取消textarea的输入框拖拽
给 textarea 设置样式 resize:none 即可去掉文本框右下角的拖拽标记。
使用textarea标签时注意
如果textarea标签换行写的话,会默认在文本框内有一两行多余空格。
所以一般是把textarea的始末标签写在同一行,然后通过padding设置内边距。
vertical-align属性
使用 vertical-align 来让图片与文本对齐,同时因为图片这类行内块元素 是默认与父盒子基线对齐的,所以也可以用 vertical-align 来去除行内块与父盒子底部的空白。此外,把行内块元素转换为块元素 也可以去除。
文本显示省略号
单行文本
给文本设置样式
input {
white-space: nowrap;/*默认为normal自动换行,nowrap可以强制一行内显示文本*/
overflow: hidden;/*溢出内容隐藏*/
text-overflow: ellipsis;/*溢出部分用省略号表示*/
}
多行文本
给文本设置样式
textarea {
overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient: vertical;
}
margin负值的应用
当盒子紧密排布,紧挨着的盒子的边框会叠在一起,会变得更粗,可以使用 margin-left: -1px; 来解决这个问题,数值是边框厚度。
但是如果还要给盒子添加 hover 样式,使得鼠标放在盒子上会改变边框颜色,则会出现如下情况,被遮盖的一边会没有变化 ,如下左图。解决的办法 就是通过 hover 给盒子改变颜色的同时,让它变为相对定位 ,这样就可以在标准流盒子的上方了。但是如果同类的所有盒子都有相对定位,那就提升它的层级 ,设置 z-index:1;即可,如下右图。
布局技巧
利用文字围绕浮动元素的特性,可以完成一些布局。类似下面的布局,既可以用两个内部盒子分别设置左右浮动,也可以只设置左边图片左浮动,右边文字不用设置,因为浮动元素虽然会压住标准流的盒子,但是不会 压住盒子里面文字。
2020.4.13
css初始化
为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容,需要对css初始化,即重设浏览器的样式。
HTML5新增语义化标签
实际上这些标签相当于是
标签加上一些基本样式,但是这些标签更加有语义,这种语义化标准主要是针对搜索引擎的。另外,这些标签可以使用多次
导航标签
内容标签
HTML5新增多媒体标签
HTML5不是用插件的情况下,也可以原生地支持视频格式文件的播放,但是支持格式有限。 视频标签 ,主流浏览器一般都会支持MP4格式
音频标签 ,主流浏览器一般都会支持MP3格式
HTML5新增input类型
HTML5新增表单属性
CSS3新特性
原来的选择器配合使用这些新的选择器使用会让修改样式更方便,另外属性选择器 、伪类选择器 的权重跟类选取择器 一样都为10 。比如:section div:nth-of-type(1) {} 的权重为12。
属性选择器
如果省略了E,则不限制元素的类型。下图为选择 .loacal-nav li 内符合条件的元素。
属性选择器的应用
对于这些非兄弟关系且样式较为统一,但各自又略有不同的元素,可以给它们的 class 设置相同的前缀,然后用属性选择器进行统一的样式的书写,后面再单独用各自的 class 进行特别的描述。
如下图,给各个图标的 class 命名为 local-nav-icon-iconx(x为1/2/3/4...),这样可以通过 class^="loacal-nav-icon"对它们进行统一样式的编写。后面再单独对各自样式进行编写,.loacal-nav-icon-icon1{} .loacal-nav-icon-icon2{} ....
结构伪类选择器
/*把 ul 父元素的第一个子元素的背景颜色改为粉红色*/
ul :first-child {
background-color:pink;
}
/*把 ul 父元素的第一个li子元素的背景颜色改为粉红色*/
ul li:first-child {
background-color:pink;
}
其中的 E:nth-child(n) 选择器强大,其中 n 如果是公式的话,会随特定子元素数量递增而递增。E:nth-of-type(n) 也是可以的,但要注意两者区别。
伪元素选择器
伪元素选择器可以帮助我们利用CSS新建标签元素而不需要HTML标签,从而简化HTML结构。
注意:
1 伪元素是插入父盒子内部 的,before是插入到父盒子内部的前面,after是后面。
2 伪元素是行内元素,设置宽高需要转换模式。
3 样式div::before { } 的权重为2。
伪类和伪元素的区别
伪类用单冒号 (:)表示,伪元素用双冒号 (::)表示。
1 伪元素用于将特殊的效果添加到某些选择器,代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不 实际存在于文档树中。
2 伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。
盒子模型优化
css3中可以通过 box-sizing 来指定盒模型,有两个值:content-box 和 border-box 。
1 box-sizing:content-box 默认方式 ,盒子实际大小为 width + padding + border,所以盒子有可能会 paddng 和 border 被撑大。盒子向外 “扩展”。
2 box-sizing:border-box 盒子的大小为width。在 padding 和 border 不超过width的前提下用这种方式,padding和border 不会撑大盒子,盒子向内 “扩展”。
CSS3滤镜filter
filter 属性将模糊或颜色偏移等图形效果应用于元素
例如:filter: blur(5px); blur将图像模糊处理,数值越大越模糊。
CSS3 calc函数
calc() 此CSS函数让你在声明CSS属性值时执行一些计算。
例如:width: calc(100%-80px); 可以让宽度永远比其父盒子小80px。括号里面可以使用 + - * / 来进行计算。
CSS3过渡
语法 : transition: 属性 花费时间 运动曲线 何时开始 , ...... ;
1 属性 :指的是要变化的css属性,可以是宽度高度、背景颜色、内外边距等。如果想要所有属性都变化过渡,可以写一个 all 。
2 花费时间 :单位是秒,如 0.5s
3 运动曲线 :默认为ease,可省略
4 何时开始 :即延迟触发时间,单位是秒,默认为0s,可省略
div {
height: 100px;
width: 200px;
background-color: red;
transition: width 0.5s,height 0.5s;/*逗号后面可以继续添加其他变化*/
}
div:hover {
height: 200px;
width: 300px;
}
transition 使用方式 :哪个元素过渡就给哪个元素加,并且设置其变化的属性。
transition 应用 :
鼠标经过时切换图标,配合精灵图可以实现。
鼠标经过时,进度条增加,套两个盒子可以实现,代码如下:
Document
HP
关于初始化CSS样式的方法
初始化页面CSS的方式又如下两种,第一种是使用通配符 ,代码简洁,但是因为涉及标签过多 ,效率偏低 。第二种是列举 需要初始化样式的标签,代码较繁杂,但是涉及标签较少 ,效率偏高 。
图片如何转为ico格式
从ps导出bmp 格式的图片,然后修改拓展名为ico即可。
引入网站favicon图标
在 html 页面里面
标签内引入代码即可。另外,一般把 ico 文件放在
根目录 下。
网站SEO搜索引擎优化
品优购商城-正品低价、品质保障、配送及时、轻松购物!
5. 但类似于注册页面这种需要保护隐私的,就不需要seo优化了。
2020.4.20
移动盒子位置的方法
定位 、 调整盒子的外边距 、2D转换移动
2D转换
移动 translate
translate 可以改变元素在页面中的位置,类似于定位。
/*x y 轴的变化一起写*/
transform: translate(x,y);
/*x 轴的变化*/
transform: translateX(n);
/*y 轴的变化*/
transform: translateY(n);
特点:
1 定义2D转换中的移动,沿着X和Y轴移动元素。
2 translate最大的优点,不会影响其他元素的位置。定位会脱标,因而定位是会影响其他元素的。
3 translate中的百分比单位是相对于自身元素的宽高而言的。所以,以前在定位中如果要让内部盒子居中,需要先偏移50%,再偏移自身宽高的一半。现在可以这么做,先偏移50%,再用transform:translate(-50%,-50%)。这样,即使盒子的宽高变了,也不会影响盒子的位置,不需要去改第二次偏移的数值。
4 对行内标签没有效果。
旋转 rotate
2D旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转,旋转的度数是相对于原正常位置而言的,而非当前位置 。
/*
单位为deg
角度为正,顺时针;度数为负,逆时针;
默认旋转中心为元素的中心点
*/
transform: rotate(46deg);
案例:
鼠标放在盒子内,内部的小箭头会转向。
案例相关其他知识:
CSS三角的写法(图片,字体图标,大于小于号替代,边框)/
通过父盒子hover伪类可以改变伪元素样式
div {
position: relative;
width: 200px;
height: 50px;
background-color: pink;
}
div::after {
position: absolute;
content: "";
top: 13px;
right: 13px;
height: 10px;
width: 10px;
border-right: 2px black solid;
border-bottom: 2px black solid;
transform: rotate(45deg);
transition: all 0.5s;
}
div:hover::after{
transform: rotate(-135deg);
}
缩放 scale
可以放大和缩小元素
transform: scale(x,y);
特点:
1 x 与 y用逗号隔开
2 transform: scale(1,1); 宽高为原来的一倍,即没有放大
3 transform: scale(2,2); 宽高为原来的两倍;transform: scale(0.5,0.5); 宽高为原来的0.5倍。
4 transform: scale(2); 若只写一个参数,第二个参数和第一个参数一样,相当于(2,2)
5 scale 可以设置转换中心点缩放,缩放时中心点“不动。默认以中心点缩放,且不影响其他盒子。
转换中心点 transform-origin
设置元素转换的中心点
transform-origin: x y;
特点:
1 x 和 y 使用空格分开
2 x y 默认值为50% 50% ,即元素中心点
3 x y 值为像素 或 方位名词 (top bottom left right center)
2D转换综合写法
div:hover {
transform: translate(300px, 0) rotate(100deg) scale(1.1, 1.1);
}
CSS3动画 animation
animation 可以通过设置多个节点(%)来精确控制一个或一组动画,可以结合transform使用,来实现复杂的动画效果。
相比较 transform+transition ,动画可以实现更多的变化,更多的控制,连续自动播放等。
使用方法大概为,先用 @keyframes 定义动画,然后给需要变化的元素设置动画 animation-name 以及动画时长 animation-duration 。
/*用keyframes定义动画*/
/*
0%是动画的开始,100%是动画的完成
百分比是用来规定变化发生的时间,
用 from to 可以替代 0% 和 100%
*/
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(300px, 0) rotate(360deg);
background-color: lawngreen;
}
50% {
transform: translate(300px, 300px) rotate(-360deg);
background-color: indigo;
}
75% {
transform: translate(0, 300px) rotate(360deg);
background-color: hotpink;
}
100% {
transform: translate(0, 0);
}
}
/* div调用move动画*/
div {
width: 200px;
height: 200px;
animation-name: move;
animation-duration: 2s;
}
其他属性如下所示:
其中 animation-timing-function 又有如下属性:
使用 steps 属性,可以模拟一种打字 效果。
animation的复合写法
虽然复合写法不便于理解,但是复合写法可以为元素添加多个动画 ,动画之间用逗号分隔。
animation: bear 1s steps(8) infinite,move 1s;
css3 opacity
opacity 用于设置div元素的不透明级别,0为透明,1为不透明
div
{
opacity:0.5;
}
2020.4.22
3D转换
移动 translate3d
透视 perspective
给body加透视,会让页面内3D效果更明显
body {
perspective: 500px;
}
旋转 rotateX / Y / Z / 3d
旋转左手准则
适用于 x y z 轴旋转,注意大拇指指向正方向
3D呈现 transform-style
默认值为 flat ,为不开启3d立体空间
浏览器私有前缀
浏览器现状
移动端浏览器我们主要针对webkit内核 进行兼容
视口 viewport
视口(viewport)就是浏览器显示页面内容的屏幕区域,分为布局视口 、视觉视口 和理想视口
meta视口标签
物理像素和物理像素比
为什么?
多倍图
因为用css像素设置大小的图片,被放到移动端有可能会被放大,会变得模糊,所以可以采取多倍图策略,图片与背景图片处理思路相同,但背景图片是用 background-size 处理。
二倍精灵图
背景缩放 background-size
background-size 规定背景图像的尺寸
ps切图扩展工具cutterman切多倍图
移动开发选择
移动端开发主要有两种方案:单独制作移动端页面(主流) 和 响应式页面兼容移动端(其次)
单独移动端页面
响应式页面
移动端初始化
可以使用normalize.css https://necolas.github.io/normalize.css/8.0.1/normalize.css
移动端需要特殊处理的样式
2020.4.23
流式布局(百分比布局)
一般流式布局需要设置最大最小宽高来进行控制。
flex弹性布局
与传统布局比较
布局原理
注意,一旦父容器设置了flex布局,父容器内的元素便不再区分行内元素/块元素 等。
常见的父项属性
flex-direction
justify-content
区分 flex-end 和 flex-direction 中的 row-reverse / column-reverse ,前者是按照主轴方向排列好元素后,统一把它们放到主轴逆方向的一侧;后两者只是改变了主轴的方向。但要注意,flex-direction 和 justify-content 的设置并不冲突。
flex-wrap
align-items
align-content
划重点! 用于换行 的情况!
align-items 和 align-content 的区别
flex-flow
常见的子项属性
flex子项目占的份数
可以写数字,也可以写百分比
align-self
order
值越小越靠近初始位置
2020.4.25
背景线性渐变
2020.4.26
媒体查询
是什么
语法规范
使用案例1
根据屏幕宽度改变背景颜色
Document
使用案例2
根据屏幕宽度改变页面字体大小
Document
购物车
【拓展】媒体查询引入资源
在 link 中判断设备尺寸,然后引入不同的css文件,建议依然是按照从小到大的顺序写
Less
css弊端
比如用媒体查询根据屏幕宽度改变 html 字体大小时,底下的各个元素的 rem长度 需要前端人员手动计算。
Less介绍
Less变量
//定义一个粉色的变量
@color: deeppink;
//定义一个14px的字体大小变量
@font14: 14px;
body {
background-color: @color;
}
div {
color: @color;
font-size: @font14;
}
Less嵌套
/*
//定义一个绿色的变量
@color: green;
body {
background-color: @color;
div {
background-color: red;
}
}
*/
/* 上述less代码会被编译成如下css */
body {
background-color: green;
}
body div {
background-color: red;
}
Less运算
Less编译
新建一个 xxx.less 文件,里面可以用 less 的语法写样式,但是这些样式是不能 直接在 html 中使用的,还需要经过编译。
通过 vscode 的 easy less 插件,在保存 xxx.less 文件的时候,会同时编译生成相对应的 xxx.css 文件,然后把这个 xxx.css 导入 html 即可,并且在每一次更新 xxx.less 的时候,xxx.css 也会同步更新/刷新。
rem 适配方案技术
技术方案1 less + 媒体查询 + rem
步骤:
1 一般先选择一套标准尺寸的设计稿(目前标准多为750px宽,此处px指css像素),把这个设计稿页面宽度等分为15份(或10 / 20 等亦可),得到标准尺寸的 html font-size
2 某个元素在标准尺寸下的长度除以 html font-size 得到一个rem值,实际上这个rem值就是它的宽或高所占页面的“比例”
3 其他非标准尺寸下的 html font-size 也是相同的计算方法
4 以后根据媒体查询动态改变 html font-size 即可让该元素等比例缩放。虽然写法比较复杂,但是因为可以对高度也进行控制,所以写出来的页面效果要比流式布局和flex布局要好看很多。
技术方案2(推荐)flexible.js + rem
flexible.js介绍:
技术方案 1 2 整体实现思路差不多,但是方案2使用js进行适配,使得代码更加简洁。flexible.js就是代替媒体查询,将页面宽划分为十等份,自动设置html字体大小。
vscode插件cssrem 可以使得 px 转换为 rem
因为vscode默认cssroot根字体大小为16px,所以要根据情况修改cssroot。相比于使用less计算,用插件更为方便,但是使用less的维护性更好。使用less的情况下,如果根字体发生了变化,所有使用rem单位的属性都会跟着变化;但是,使用插件换算的,则需要手动去逐个修改各个使用rem单位的属性。
2020.4.27
将一个样式文件导入另一个样式文件里
@import "xxx.css";
@import "xxx.less";
响应式开发的原理
2020.4.28
bootstrap
bootstrap简介
bs是基于 jQ(js) 的样式框架
bootstrap布局容器
栅格系统简介
栅格系统跟rem不同的是,rem是根据屏幕宽度划分的,而栅格系统是根据内容宽度划分的。
栅格选项参数
补充:
如果列小于12,则该行会有空白 剩余。
指定多个类名,每一列将会根据内容宽度,改变自身占的份数。
栅格系统列嵌套
栅格系统列偏移
补充:col-md-offset-4 指的是 当容器宽度为md时 ,该元素需要有“4份”的左边距
栅格系统列排序
补充: push是把元素往右边“推”多少份的距离,pull是把元素往左边“拉”多少份的距离。
响应式工具
用于针对不同设备展示或隐藏页面内容
2020.5.7
取消文字选中的样式 user-select
如果鼠标双击文本内容,则会将文本内容涂黑。 通过 user-select 属性可以去掉该样式。
默认效果如图:
去掉默认样式后效果如图:
代码如下:
* {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
2020.6.6
classList 属性
其中切换类的意思是,如果该 element 有某类名,则删去;若无,则添加。
2020.7.5
实现局部滚动
设置 高度 / 宽度 后:
overfolw:scroll;
/* 或者 overflow-y:scroll;之类的 */