目录
十五:完美解决channelartlist不支持currentstyle属性
十七：dede:arclist调用field全局变量{dede:global.cfg_cmsurl/}
十八：栏目高亮显示方法（查看对应类的关系，应用于列表页与内容页）
十九：vscode使用vue格式化代码符合eslint规范：在vscode的setting(json) 中设置
二十二：jquery点击显示，再次点击隐藏（使用is()方法判断）
https://www.cnblogs.com/wl-blog/p/15016370.html vscode配置eslint语法规范
2022年09月20日 晴 南宁 星期二
一：css过度效果与鼠标上移是使目标放大或者缩小
过度：transition: property duration timing-function delay;（默认值：all 0 ease 0）
放大缩小：使用transform：scale(x)(x表示填写数字，经常使用的一个2d缩放转换)
二：如何修改host文件
https://www.lingfenmao.com/it/5446.html 修改hosts文件
三：两个li中间的间隙
浏览器默认会把display属性为inline或者inline-block元素间的空白字符（空格换行tab）渲染成一个空格。也就是我们上面li元素换行产生的换行符，而它会变成一个空格，当然空格就占用一个字符的宽度。
<ul>
<li class="one"></li><li class="two"></li><li class="three"></li><li class="four"></li>
</ul>
解决方法：
1：不使用换行，也就是将所有的li都在一行展示
2：给ul设置letter-space:-5px,并且给li的letter-space设置为normal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
width: 400px;
height: 100px;
letter-spacing: -5px;
}
ul li {
width: 100px;
height: 100px;
display: inline-block;
font-size: 0;
letter-spacing: -5px;
}
ul .one {
background-color: red;
}
ul .two {
background-color: green;
}
ul .three {
background-color: pink;
}
ul .four {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<ul>
<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
<li class="four"></li>
</ul>
</div>
</body>
</html>
3：设置ul的字体1大小为font-size:0px,但是这样设置的话ul中的文字就没法显示，li需要在自己设置font-size的大小。
2022年09月21日 晴 南宁 星期三
四：子div有内容，父div高度为什么为0？（清楚浮动）
原因：
当一个元素只包含浮动元素的时候，它会出现高度折叠,即元素的上下底边重合，和高度为0效果一样。
父标签的所有div加上了浮动属性。在显示器的侧面，子标签这个div已经脱离了父标签这个div，也就是说，此时的子标签的宽高是多少，对于已经脱离了的父标签来说，都是不起作用的。
解决方法：
1.添加一个空的div（不怎么推荐使用）
<div class="父标签">
<div class="子标签"></div>
<div></div>
</div>2.利用伪元素:after
这种是最常用的清除浮动的方法也是最推荐的，用起来非常的爽，直接在浮动的两个元素的父级加一个clearfloat类名就可以，兼容IE6、7、8所带的浮动问题；
#news400 .clearfloat:after {
display: block;
clear: both;
content: "";
overflow: hidden;
height: 0;
}
#news400 .clearfloat {
zoom: 1;
}在:after为元素里面用到了content属性，这样这条样式的意思是在class为aBox的div元素后面生成指定的内容，这里生成的内容是一个空字符串，因为只是让它来消除div的高度折叠，并不让它显示出来。还有，这条样式里有display属性，要将他设置成block，这样clear属性才会起作用，因为清除操作只作用于块级元素，它的原理是为要执行清除操作的元素添加上边距，以此让元素降到浮动元素的下面，而操作行内元素的上边距不起作用。
3.父级div定义overflow:hidden
.div {overflow:hidden;}这种清除浮动的方法只推荐没有使用position或对overflow:hidden理解比较深的朋友使用,必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度,千万不要感觉这个特别好用就放不下了，等到你遇到问题的时候就和你加的这个有关，很坑！（友情请示）
五：滚动页面到一定位置时显示回到顶部按钮
当页面比较长时，如果滚动到一定位置想回到顶部会比较麻烦，所以页面上会适时的出现“回到顶部”按钮
$(".side ul li .sidetop").click(function () { $("html,body").animate({ scrollTop: 0 }, 500); }) $(window).scroll(function () { if ($(window).scrollTop() > 250) { $(".side ul li .sidetop").fadeIn();//淡入效果 } else { $(".side ul li .sidetop").fadeOut();//淡出效果 } })
六：px, em, rem 的区别和使用场景
区别
CSS 中，目前我们常用到的长度单位有 px, em, rem。
1.绝对长度单位
px（pixel 像素）： 相对于显示设备而言的。对于低 dpi 设备，1px 是显示的一个设备像素(点)。对于打印机和高分辨率屏幕，1px 意味着多个设备像素。
特点：
- 使用时间长， 而且比较直观。
2.相对单位长度
-
em： 相对于元素的字体大小.目前浏览器默认的字体大小是 16px
-
rem: 相对于根元素的字体大小
特点：
rem 和 em 作为相对长度单位。他们的大小都不是固定的，会根据参照物的大小而动态变化。
rem 相对 em 来说，计算的参照物只有一个：根元素（<html>），这样大大减小了计算成本。
比如说下面两个例子，分别计算出 grandson 的字体大小：
<div class="father">
father font size
<div class="child">
child font size
<div class="grandson">grandson font size</div>
</div>
</div>用 em 的是1.2*1.2*1.2 = 1.728em = 1.728*16px算起来就比较麻烦。
.father {
font-size: 1.2rem;
}
.child {
font-size: 1.2rem;
}
.grandson {
font-size: 1.2rem;
}用 rem 的就直接是是1.2rem = 1.2*16px，相对比较直观一些。
.father {
font-size: 1.2rem;
}
.child {
font-size: 1.2rem;
}
.grandson {
font-size
最低0.47元/天 解锁文章
669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
