创建日期：2021-07-23 17:35:02 最后编辑：2021-07-31

常用到的开源库

html5shiv.js —— 让 IE 能识别 HTML5 的元素

pageSwitch.js —— 适用场景为全屏切换，即一切一屏，并且在此基础上实现了超过一百种切换效果。https://github.com/qiqiboy/pageSwitch

swiper —— 内容触摸滑动插件（不依赖公共库如jQurey）https://www.swiper.com.cn/usage/index.html

vConsole —— 手机前端开发调试利器 https://github.com/Tencent/vConsole

<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
<script>var vConsole = new VConsole();</script>

样式类

Animate.css —— 一款强大的预设css3动画库 https://animate.style/

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

jQuery Easing Plugin —— 创建更加绚丽的动画效果（jQuery插件，需要在引入jQuery之后引入）

<!-- jQuery easing 图解：https://blog.csdn.net/xiaolongtotop/article/details/8309635 -->

Normalize.css —— 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。

HTML

手机和电脑显示的一样大（根据实际情况调整代码）

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

禁止浏览器缓存（只是对浏览器的建议，具体是否缓存取决于浏览器）

<!-- 禁止浏览器缓存 -->
<meta HTTP-EQUIV="pragma" CONTENT="no-cache"> 
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate"> 
<meta HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> 
<meta HTTP-EQUIV="expires" CONTENT="0">

页面跳转

<meta http-equiv="refresh" content="0;url=【要跳转到的链接】">

html中制表符(TAB)的转义字符

HTML特殊字符不包括TAB。可以使用 &emsp; 。TAB在<pre></pre>标记内部可以用	表示。

资源预加载

<link rel="prefetch" href="【资源地址】" />

引入外部 CSS / JS 文件

<!-- 引入CSS -->
<link rel="stylesheet" href="【CSS文件地址】" />
<!-- 引入JS -->
<script src="【JS文件地址】"></script>

html页面模板

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
		<title></title>
		<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
		
		<!-- 引入CSS文件 -->
		<link rel="stylesheet" href="" />
		
		<!-- 引入JS文件 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	</head>
	<body>
		<!-- 正文 -->
	</body>
</html>

html元素水平居中的几种方法（详细讲解见：https://blog.csdn.net/u014306354/article/details/52202629）

1. 对于行内元素采用text-align:center;的方式

2. 采用margin:0 auto;来实现水平居中显示（需要写好元素的宽度）

3. 用table实现

4. 块级元素通过转换成行内元素来实现水平居中显示

5. 父子元素都采用相对定位，父元素left:50%;子元素left:-50%;相对自己的长度减回50%，这样实现向右偏移后拉回多的部分

6. 采用css3的flexbox，display:flex;

7. 用父元素的 display:relative;直接采用position:absolute;left:0;right:0;margin:auto来实现水平以居中

JavaScript（JS）

IE6浏览器实现背景不随浏览器滚动的代码

<!-- IE6 背景不随浏览器滚动 -->
<!--[if lt IE 6]>
	<script type="text/javascript">var scrollBackground = true;</script>
<![endif]-->

网页加载完成事件

document.onreadystatechange=function () {
	if (document.readyState=="complete"){
		// 网页加载完成，在这里可以移除loding遮罩层
	}
}

定时器

// 执行一次代码
var timeout = setTimeout(function() { /* 要执行的代码 */ }, 1000)
// 周期执行代码
var interval = setInterval(function() { /* 要执行的代码 */ }, 1000)

// 清除定时器
window.clearTimeout(timeout);
window.clearInterval(interval);

for循环（参考：https://www.runoob.com/js/js-loop-for.html）

for (var i=0;i<cars.length;i++)
{
	// 这里写代码
}

// 另外几种写法
for (var i=0,len=cars.length; i<len; i++)
{
	// 这里写代码
}

var i=2,len=cars.length;
for (; i<len; i++)
{
	// 这里写代码
}

var i=0,len=cars.length;
for (; i<len; )
{ 
	// 这里写代码
	i++;
}

var person={fname:"Bill",lname:"Gates",age:56}; 
for (x in person)  // x 为属性名
{
	txt=txt + person[x];
}

获取网页的各种高度（从网上复制，还没有测试过能不能用、电脑安卓苹果等不同平台设备的兼容性）

原文链接：https://blog.csdn.net/weixin_43617604/article/details/94396152

var Height=$(window).height()  // 网页可视区的高度
var hidtop=$(document).scrollTop( )  // 获取网页被卷曲的高度

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

要获取当前页面的滚动条纵坐标位置，用：document.documentElement.scrollTop;
而不是：document.body.scrollTop;
documentElement 对应的是 html 标签，而 body 对应的是 body 标签
document.body.scrollTop与document.documentElement.scrollTop两者有个特点，就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候，document.documentElement.scrollTop就会始终为0；反之亦然。所以，如果要得到网页的真正的scrollTop值，可以这样：
var scrollTop=document.body.scrollTop+document.documentElement.scrollTop;
这两个值总会有一个恒为0，所以不用担心会对真正的scrollTop造成影响。一点小技巧，但很实用。

判断元素是否在array中（indexOf方法亲测可用，includes和in方法还没有试过，摘自：https://www.cnblogs.com/amyzhu/p/10316896.html）

// JS的判断字符/元素是否存在数组列表
if(arraylist.indexOf("XX") != -1)
	// element found
if (blockedTile.includes("118"))
	// found element

// JS的in操作是对象, 用于判断指定的属性在指定对象中是否存在.
propNameOrNumber in objectName

Array（复制自：http://blog.sina.com.cn/s/blog_95fa28e60101mwup.html）

往数组Array中添加元素

unshift：将参数添加到原数组开头，并返回数组的长度

pop：删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined

push：将参数添加到原数组末尾，并返回数组的长度

concat：返回一个新数组，是将参数添加到原数组中构成的

splice(start,deleteCount,val1,val2,…)：从start位置开始删除deleteCount项，并从该位置起插入val1,val2,…

reverse：将数组反序

sort(orderfunction)：按指定的参数对数组进行排序

slice(start,end)：返回从原数组中指定开始下标到结束下标之间的项组成的新数组

详细：

1、数组的创建

var arrayObj = new Array();　//创建一个数组
var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度
var arrayObj = new Array([element0[, element1[, …[, elementN]]]]);　创建一个数组并赋值

要说明的是，虽然第二种方法创建数组指定了长度，但实际上所有情况下数组都是变长的，也就是说即使指定了长度为5，仍然可以将元素存储在规定长度以外的，注意：这时长度会随之改变。

2、数组的元素的访问

var testGetArrValue=arrayObj[1]; //获取数组的元素值
arrayObj[1]= “这是新值”; //给数组元素赋予新的值

3、数组元素的添加

arrayObj. push([item1 [item2 [… [itemN ]]]]);// 将一个或多个新元素添加到数组结尾，并返回数组新长度
arrayObj.unshift([item1 [item2 [… [itemN ]]]]);// 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度
arrayObj.splice(insertPos,0,[item1[, item2[, … [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回""。

4、数组元素的删除

arrayObj.pop(); //移除最后一个元素并返回该元素值
arrayObj.shift(); //移除最前一个元素并返回该元素值，数组中元素自动前移
arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素

5、数组的截取和合并

arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素
arrayObj.concat([item1[, item2[, … [,itemN]]]]); //将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组

6、数组的拷贝

arrayObj.slice(0); //返回数组的拷贝数组，注意是一个新的数组，不是指向
arrayObj.concat(); //返回数组的拷贝数组，注意是一个新的数组，不是指向

7、数组元素的排序

arrayObj.reverse(); //反转元素（最前的排到最后、最后的排到最前），返回数组地址
arrayObj.sort(); //对数组元素排序，返回数组地址

8、数组元素的字符串化

arrayObj.join(separator); //返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用 separator 隔开。
toLocaleString 、toString 、valueOf：可以看作是join的特殊用法，不常用

var let const区别

（待完善）

针对特定设备进行兼容

// 针对设备进行兼容
function deviceType(){
	var ua = navigator.userAgent, app = navigator.appVersion;
	var isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Linux') > -1;
	var isIOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
	if (isAndroid) {
		// 安卓端适配
		$("html, body").addClass("html-body-Android-compatible");
		return 'Android';
	}
	if (isIOS) {
		// iOS端适配
		return 'IOS';
	}
}
var device = deviceType()

jQuery

// 父元素与子元素 
$(selector).parent() // 选择父元素
$(selector).children(".selected") // 选择子元素

// 删除元素
$('.loading').remove()

// 样式、属性
$(selector).css("color", "blue") // 设置元素样式
let color = $(selector).css("color") // 获取元素样式
$(selector).attr("width","180") // 设置元素属性
$(selector).attr({width:"50",height:"80"}); // 同时设置元素的多个属性
let color = $(selector).attr("width") // 获取元素属性
// 移除样式中的某条单独的样式，即将其赋值为空
$(function(){
         $(".tableStyle").css("background-color":"");
})

// Class
$(selector).addClass("ClassName") // 添加元素样式
$(selector).removeClass("ClassName") // 删除元素样式
$(selector).toggleClass("ClassName") // 切换元素样式

// 元素html
$(selector).html() // 获取元素HTML
$(selector).html("HTML代码") // 设置元素HTML

let color = $("selector").css("color") // 获取元素样式

// 获取元素高度
$("#div_id").height(); // 获得的是该div本身的高度, (不包含padding,margin,border)
$("#div_id").outerHeight(); // 包含该div本身的高度, padding上下的高度, 以及border上下的高度(不包含margin的高度)
$("#div_id").outerHeight(true); // 包含该div本身的高度, 以及padding,border,margin上下的总高度

// 点击事件
$("button").click(function(){
  // 点击响应事件代码
});

// 鼠标按下事件
$("button").mousedown(()=>{
  // 点击响应事件代码
});

// attr() 的回调函数
// jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});

// 元素的隐藏显示
$('#loading').fadeIn(100, () => { /* 完成后执行的代码 */ }) // 元素的淡入淡出
$('#loading').fadeOut(100, () => { /* 完成后执行的代码 */ })
$("#loading").hide()
$("#loading").show()
$("#loading").slideDown("slow")
$("#loading").slideUp("fast") // 还可以不带参数，或者是传入毫秒数

// 把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中
$('#test').load('./demo_test.txt');
// 把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中
$("#div1").load("./demo_test.txt #p1");

背景颜色随着进度条滚动而变化（参考：https://blog.csdn.net/qq_42279139/article/details/100358730）

var scrollBegin = 800,      //颜色变化开始位置
	scrollTop,              //当前滚动位置
	scrollArea,             //可滚动区域

	topColor,               //顶部颜色色值
	bottomColor,            //底部颜色色值
	settingColor,           //计算出来用于设置的颜色色值
	originColor,            //元素本身的颜色

	target = "body";        //操作对象
	
//获取对象本身颜色
originColor = $(target).css("background-color");

//颜色构造函数
function rgb(r, g, b) {
	this.red = r;
	this.green = g;
	this.blue = b;
	//获取颜色赋值语句
	this.getValue = function () {
		return "rgb(" + this.red + "," + this.green + "," + this.blue + ")";
	}
}

//颜色设置
topColor = new rgb(255, 255, 255);			//顶部颜色，自定义
bottomColor = new rgb(202, 239, 255);		//底部颜色，自定义
settingColor = new rgb(255, 255, 255);		//设置使用，计算得出

//计算可滚动区域
scrollArea = (function () {
	if ($(document).height() > $(window).height()) {
		return $(document).height() - $(window).height();
	} else {
		return $(window).height();
	}
})()

//色值计算公式
function colorCalc(top, bottom) {
	return top - ((top - bottom) * (scrollTop - scrollBegin) / (scrollArea - scrollBegin));
}

//监听滚动
$("body").scroll(function () {
	//获取当前滚动位置
	scrollTop = $(this).scrollTop();
		
	if (scrollTop < scrollBegin) {
		//未到开始位置时，设置为初始颜色
		$(target).css({ "background-color": originColor });
	} else {
		//开始颜色变化
		//红色色值
		settingColor.red = colorCalc(topColor.red, bottomColor.red);
		//绿色色值
		settingColor.green = colorCalc(topColor.green, bottomColor.green);
		//蓝色色值
		settingColor.blue = colorCalc(topColor.blue, bottomColor.blue);
		//目标赋值
		$(target).css({ "background-color": settingColor.getValue() });
	}
})

CSS

引入外部字体

@font-face {
    font-family: 'mainFont';
    src: url(./font/fzxbsj.woff2) format('woff2'),
         url(./font/fzxbsj.woff) format('woff'),
         url(./font/fzxbsj.ttf) format('truetype');
}

全局样式

/* 消除默认样式 */
* {
    margin: 0;
    padding: 0;
}

!important

让浏览器优选执行这个语句，可以覆盖父级的样式。

-moz代表firefox浏览器私有属性

-ms代表IE浏览器私有属性

-webkit代表chrome、safari私有属性

-o代表Opera私有属性

CSS3 响应式布局： @media

@media (min-width: 768px){
	/* >=768的设备 */
}
@media (max-width: 1199){
	/* <=1199的设备 */
}

/**
 * 摘自Bootstrap
 * Extra small	<576px
 * Small	≥576px
 * Medium	≥768px
 * Large	≥992px
 * X-Large	≥1200px
 * XX-Large	≥1400px
 */
@media (min-width: 576px) {
    .container,.container-sm {
        max-width:540px
    }
}

@media (min-width: 768px) {
    .container,.container-md,.container-sm {
        max-width:720px
    }
}

@media (min-width: 992px) {
    .container,.container-lg,.container-md,.container-sm {
        max-width:960px
    }
}

@media (min-width: 1200px) {
    .container,.container-lg,.container-md,.container-sm,.container-xl {
        max-width:1140px
    }
}

@media (min-width: 1400px) {
    .container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl {
        max-width:1320px
    }
}

行高

line-height: 2.1em;

内、外边距 margin padding

/* 外边距 */
margin: 100px; /* 指定一个值时 该值指定四个边到父内边距的距离 */
margin: 100px 20px; /* 指定两个值时 第一个值指定上下 第二个指定左右 */
margin: 100px 20px 10px; /* 指定三个值时第一个指定上边、第二个指定左右两边、 第三个指定下边 */
margin: 100px 20px 10px 50px; /* 指定四个值时分别为上 右 下 左（顺时针顺序） */
/* 内边距同理 */

外边距上下左右分别为：
margin-top
margin-bottom
margin-left
margin-right

圆角

border-radius: 10px;

首行缩进2字符

text-indent: 2em;

/* 如果是像参考文献一样，需要首行突出的话，可以写成下面这样 */
text-indent: 2em;
margin-left: 2em; /* 或者 padding-left: 2em; 视具体情况而定 */

文字间距

letter-spacing: 2px;

文字阴影（可参考：https://www.w3school.com.cn/cssref/pr_text-shadow.asp）

text-shadow

行内图片垂直居中

vertical-align: middle;

背景图片放大裁切

<style>
	#cover-image {
		background-image: url(./image/cover.jpg);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
</style>
<div class="introduction-image">

全屏背景图封面，相对屏幕静止

/* 封面图 */
.fullscreenImage {
	width: 100%;
	height: 100%;
	background-image: url(../image/cover.jpg);
	background-size: cover;
	background-position:center;
	background-repeat: no-repeat;
	background-attachment:fixed; /* 需要适配 */
}
/* 移动端不支持fixed类型，需要兼容适配 */
/* 安卓端无影响 */
/* iOS端体现为滑动将图片移动出屏幕，背景图片即消失 */
.fullscreenImage-iOS-compatible {
	background-attachment:initial !important;
}

文字水平居中

.text-center {
	text-align: center;
}

背景颜色、文字颜色

/* 背景颜色 */
background-color: #000000;
/* 或者 */
background: #000000;
/**
 * background可以设置图片，背景图拉伸、背景图大小、背景图相对位置、背景颜色等
 * background-color只能设置背景色
 */

/* 文字颜色 */
color: white;

background-size: cover

background-size的值cover和contain都是保持背景图片的宽高比不变，不同之处是:

cover会拉伸或者缩小图片，直到刚好能完全覆盖背景区域，也就是宽度（或者高度）正好达到背景的边界，然后高度（或者宽度）有可能是超出背景边界的；

contain会拉伸或者缩小图片，直到图片的宽度（或者高度）抵达背景的边界，当宽度首先到达背景的宽度时，高度有可能没有正好是背景的高度，所以会导致下面有一块空白区域；当高度首先到达背景的高度时，宽度有可能没有正好是背景的宽度，所以会导致右边有一块空白区域。

a标签不显示下划线，颜色恢复为默认颜色

a {
	text-decoration: none;
	color: inherit;
}

文字选中样式

/* 文字选中样式 */
::selection {
	color:#000000;
	background-color:#e8004533;
	text-shadow:none;
}

CSS transform 属性

（https://www.w3school.com.cn/cssref/pr_transform.asp）

/* 轻微放大 */
.scale-large {
	transform: scale(1.2);
}

/* 鼠标悬浮轻微放大 */
.hoverToScale {
	transition: 0.3s;
}
.hoverToScale:hover {
	transform: scale(1.05);
}

Grid网格布局

（这篇讲的很详细很清晰：https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html）

CSS @keyframes 规则（https://www.w3school.com.cn/cssref/pr_keyframes.asp）

@keyframes mymove
{
	from {top:0px;}
	to {top:200px;}
}

@keyframes mymove
{
	0%   {top:0px;}
	25%  {top:200px;}
	50%  {top:100px;}
	75%  {top:200px;}
	100% {top:0px;}
}

/* 合法的值 */
/* 0-100% */
/* from（与 0% 相同） */
/* to（与 100% 相同） */

/* 兼容其他浏览器，第一行还可以这样写 */
@-moz-keyframes mymove /* Firefox */
@-webkit-keyframes mymove /* Safari 和 Chrome */
@-o-keyframes mymove /* Opera */

文字加粗

font-weight: bold;

去除li前面的小点点

ul{list-style-type: none;}

鼠标指针（详细可参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor）

cursor: pointer;
/* 链接选择 */

默认	default
文字/编辑	text
自动	auto
手形	pointer, hand(hand是IE专有)
可移动对象	move
不允许	not-allowed
无法释放	no-drop
等待/沙漏	wait
帮助	help
十字准星	crosshair
向上改变大小(North)	n-resize
向下改变大小(South)	s_resize 与n-resize效果相同
向左改变大小(West)	w-resize
向右改变大小(East)	e-resize 与w-resize效果相同
向左上改变大小（NorthWest）	nw-resize
向左下改变大小（SouthWest）	sw-resize
向右上改变大小（NorthEast）	ne-resize 与sw-resize效果相同
向右下改变大小（SouthEast）	se-resize 与nw-resize效果相同
自定义光标	url('光标地址')

不显示纵向滚动条

html, body {
	overflow-y: hidden;
}

// jQuery代码
$("html, body").css("overflow-y", "hidden")

不显示横向滚动条

html, body {
	/* 不显示横向滚动条 */
	overflow-x:hidden;
}
/* 安卓手机端overflow-x:hidden;会导致右上角菜单无法滚动 */
/* 安卓端firefox、edge、夸克等测试正常，安卓QQ浏览器、手机QQ、微信测试有此Bug */
.html-body-Android-compatible {
	overflow-x: initial !important;
}

屏幕的宽度：100vw；屏幕的高度：100vh

calc

top: calc( 50% - 30px );

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

备注：元素可拥有负的 z-index 属性值。Z-index 仅能在定位元素上奏效（例如 position:absolute;）

文本分散对齐

{
    text-align-last: justify;
    text-align: justify;
    text-justify: distribute-all-lines; /* 兼容ie浏览器 */
}

模糊效果

filter: blur(15px);

overflow 属性规定当内容溢出元素框时发生的事情（https://www.w3school.com.cn/cssref/pr_pos_overflow.asp）

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

position 属性规定元素的定位类型（https://www.w3school.com.cn/cssref/pr_class_position.asp；https://developer.mozilla.org/zh-CN/docs/Web/CSS/position）

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

还多一个sticky，用法见后面（搜索“position: sticky;”）

display 属性规定元素应该生成的框的类型（https://www.w3school.com.cn/cssref/pr_class_display.asp）

none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

css中的display以及position属性：https://www.cnblogs.com/qq254980080/p/10605084.html

display: none;不占用页面空间，visibility: hidden;仍然占用页面空间。

透明度

opacity: 0;

CSS选择器

摘自菜鸟教程：https://www.runoob.com/cssref/css-selectors.html

选择器	示例	示例说明	CSS
.class	.intro	选择所有class="intro"的元素	1
#id	#firstname	选择所有id="firstname"的元素	1
*	*	选择所有元素	2
element	p	选择所有<p>元素	1
element,element	div,p	选择所有<div>元素和<p>元素	1
element element	div p	选择<div>元素内的所有<p>元素	1
element>element	div>p	选择所有父级是 <div> 元素的 <p> 元素	2
element+element	div+p	选择所有紧跟在 <div> 元素之后的第一个 <p> 元素	2
[attribute]	[target]	选择所有带有target属性元素	2
[attribute=value]	[target=-blank]	选择所有使用target="-blank"的元素	2
[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的所有元素	2
[attribute\|=language]	[lang\|=en]	选择 lang 属性以 en 为开头的所有元素	2
:link	a:link	选择所有未访问链接	1
:visited	a:visited	选择所有访问过的链接	1
:active	a:active	选择活动链接	1
:hover	a:hover	选择鼠标在链接上面时	1
:focus	input:focus	选择具有焦点的输入元素	2
:first-letter	p:first-letter	选择每一个<p>元素的第一个字母	1
:first-line	p:first-line	选择每一个<p>元素的第一行	1
:first-child	p:first-child	指定只有当<p>元素是其父级的第一个子级的样式。	2
:before	p:before	在每个<p>元素之前插入内容	2
:after	p:after	在每个<p>元素之后插入内容	2
:lang(language)	p:lang(it)	选择一个lang属性的起始值="it"的所有<p>元素	2
element1~element2	p~ul	选择p元素之后的每一个ul元素	3
[attribute^=value]	a[src^="https"]	选择每一个src属性的值以"https"开头的元素	3
[attribute$=value]	a[src$=".pdf"]	选择每一个src属性的值以".pdf"结尾的元素	3
[attribute=value*]	a[src*="runoob"]	选择每一个src属性的值包含子字符串"runoob"的元素	3
:first-of-type	p:first-of-type	选择每个p元素是其父级的第一个p元素	3
:last-of-type	p:last-of-type	选择每个p元素是其父级的最后一个p元素	3
:only-of-type	p:only-of-type	选择每个p元素是其父级的唯一p元素	3
:only-child	p:only-child	选择每个p元素是其父级的唯一子元素	3
:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素	3
:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数	3
:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数	3
:last-child	p:last-child	选择每个p元素是其父级的最后一个子级。	3
:root	:root	选择文档的根元素	3
:empty	p:empty	选择每个没有任何子级的p元素（包括文本节点）	3
:target	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）	3
:enabled	input:enabled	选择每一个已启用的输入元素	3
:disabled	input:disabled	选择每一个禁用的输入元素	3
:checked	input:checked	选择每个选中的输入元素	3
:not(selector)	:not(p)	选择每个并非p元素的元素	3
::selection	::selection	匹配元素中被用户选中或处于高亮状态的部分	3
:out-of-range	:out-of-range	匹配值在指定区间之外的input元素	3
:in-range	:in-range	匹配值在指定区间之内的input元素	3
:read-write	:read-write	用于匹配可读及可写的元素	3
:read-only	:read-only	用于匹配设置 "readonly"（只读）属性的元素	3
:optional	:optional	用于匹配可选的输入元素	3
:required	:required	用于匹配设置了 "required" 属性的元素	3
:valid	:valid	用于匹配输入值为合法的元素	3
:invalid	:invalid	用于匹配输入值为非法的元素	3

CSS设置动画

.animate {
	/* 设置动画时间 */
	transition: 0.3s;
}

.animate:hover {
	/* 设置鼠标悬浮样式 */
}

.animate:hover {
	/* 设置元素激活时样式 */
}

......

animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

（https://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp）

CSS动画结束出发事件

var element = document.getElementById('ElementId')
element.addEventListener('transitionend', handle, false)
function handle(){
    console.log('transitionend事件触发')
}

px、em、rem的区别

（摘自https://www.runoob.com/w3cnote/px-em-rem-different.html）

px像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

特点

1. IE无法调整那些使用px作为单位的字体大小；

2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

特点

1. em的值并不是固定的；

2. em会继承父级元素的字体大小。

注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

所以我们在写CSS的时候，需要注意：

1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

REM

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;}

注意：选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

px 与 rem 的选择？

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

常用字体对应的英文

字体中文名	字体英文名
宋体	SimSun
新宋体	NSimSun
黑体	SimHei
楷体	KaiTi
仿宋	FangSong
幼圆	YouYuan
隶书	LiSu
微软雅黑	Microsoft Yahei
微软正黑体	Microsoft JhengHei
华文黑体	STHeiti
华文楷体	STKaiti
华文宋体	STSong
华文仿宋	STFangsong
华文中宋	STZhongsong
华文琥珀	STHupo
华文新魏	STXinwei
华文隶书	STLiti
华文行楷	STXingkai
华文细黑	STXihei
华文楷体	STKaiti
华文宋体	STSong
华文仿宋	STFangsong
华文中宋	STZhongsong
华文彩云	STCaiyun
华文琥珀	STHupo
华文新魏	STXinwei
华文隶书	STLiti
华文行楷	STXingkai
方正舒体	FZShuTi
方正姚体	FZYaoti

position: sticky;的用法（https://developer.mozilla.org/zh-CN/docs/Web/CSS/position）

可以点这个代码片段右上角的运行看看效果

这个也可以做成那种页面滚动到此处，然后背景固定不动，上面有小盒子在滚动。配合JS控制背景中的元素显示，可以做那种小盒子中展示文字，背景展示大图的效果

<div style="height: 200px; overflow-y: scroll;">
<dl>
  <div>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </div>
  <div>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </div>
  <div>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </div>
  <div>
    <dt>T</dt>
    <dd>Ted Leo &amp; The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </div>
</dl>
<div>
<style>
* {
  box-sizing: border-box;
}

dl > div {
  background: #FFF;
  padding: 24px 0 0 0;
}

dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #CCC;
}
</style>

前端网页适配时遇到的奇怪问题整理记录，避免踩坑

没搞清楚之前真的就是百思不得其解，搞清楚了就豁然开朗了。记录一下，免得以后重复踩坑。

2021.07.22 记一下在html网页适配移动端的时候遇到的奇怪问题【前端问题】

问题：在电脑上测试的好好的，然后到iPhone上测试时，页面背景图片加载出来，滑动让图片移出屏幕，然后再移回来，图片消失

说明：背景图片是通过 background-image: url(../image/cover.jpg); 这行代码加载进来的，style配置了 background-attachment: fixed; ，不知道这个算不算

解决方法：

问题：安卓的手机QQ不支持在16进制的颜色后加两位透明度，例如 #FFFFFF 可以，但是 #FFFFFFAA 就不行

解决方法：同时设置两个，例如 color: #FFFFFF; color: #FFFFFFAA ，或者根据实际情况调整颜色和元素的opacity透明度

2021.07.23

问题：

window.addEventListener('scroll', function () { }) 中，移动端部分浏览器使用 document.body.scrollTop 和 $('body').scrollTop() 始终会返回0，可改用 $(this).scrollTop();

问题复现：用Chrome浏览器设备仿真Pixel 2，刷新页面会有这个问题，而iPhone系列不会有这个问题

张小弟之家

本文链接：
文章标题：

本站文章除注明转载/出处外，均为原创，若要转载请务必注明出处。转载后请将转载链接通过邮件告知我站，谢谢合作。本站邮箱：admin@only4.work

小墨の博客

梦想需要付诸行动，否则只能是梦

前端常用代码、遇到的奇怪问题记录汇总