本文链接：https://blog.csdn.net/kwroi/article/details/128653666

1. img不变形

	img {
		width: 200px;
		height: 200px;
		object-fit: cover;
	}

// background是background-size:cover;

2. 限制input type="file"上传类型为图片

<input type="file" accept="image/*">

// 没有真正的限制，还是可以上传其它类型的文件

3. JS跳转页面传参

// 当前页
var id = 12
var username = '小野友树' 
window.sessionStorage.setItem('userId',id)
window.sessionStorage.setItem('username',username)
// 柑橘配合返回上一页href更好使
location.href = 'url' 
location.replace('url')

// 目标页接收
var id = window.sessionStorage.getItem('userId')
var username = window.sessionStorage.getItem('username')

// 返回上一页
location.back(-1)

4. 移除HTMLCollection元素

var imgList = document.getElementsByClassName("z_addImg");
// ...
imgList[i].remove()

// 返回的结果并不能用数组的返回删除引发问题

4.1 测试代码

<!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>
  </head>
  <body>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div id="test"></div>
  </body>
  <script>
    var getById = document.getElementById('test');
    // element
    console.log(getById, 'getById', '11111111');
    console.log('-------------------------------------------');
    var getByCN = document.getElementsByClassName('test');
    // HTMLCollection
    console.log(getByCN, 'getByCN', '2222222222222');
    console.log('-------------------------------------------');
    var getByTN = document.getElementsByTagName('div');
    // HTMLCollection
    console.log(getByTN, 'getByTN', '3333');
    console.log('-------------------------------------------');
    var qs = document.querySelector('.test');
    // element
    console.log(qs, 'qs', '4444');
    console.log('-------------------------------------------');
    var qsa = document.querySelectorAll('.test');
    // NodeList
    console.log(qsa, 'qsa', '5555');
  </script>
</html>

4.2 打印结果

在这里插入图片描述

4.3 HTMLCollection和NodeList

DOM文档对象的节点类型分为：文档(整个html)、元素(标签)、文本、属性节点

相同点：

HTMLCollection对象和NodeList对象类似一个包含 HTML 元素的数组列表，类似伪数组arguments，因此HTMLCollection 和 NodeList 本身无法使用数组的方法：pop()、push() 或 join() 等，除非你把他转为一个数组。

区别：

HTMLCollection对象是 HTML 元素的集合，NodeList对象是 HTML 节点的集合。
HTMLCollection 元素可以通过 name，id 或 index 索引来获取。NodeList 只能通过 index 索引来获取。
NodeList 是一个静态集合，其不受 DOM 树元素变化的影响；HTMLCollection 是动态绑定的，是一个的动态集合，DOM 树发生变化，HTMLCollection 也会随之变化，元素节点的增删是敏感的。

4.4 思考

规定query方法返回的元素和元素数组必须是静态的，getElement此类的方法选出的是动态的；
因此，query方法返回的是静态的元素以及NodeList。
使用querySelector返回是静态的，不代表不能进行动态地增加子元素的操作；
获取到的element对象和Nodelist是静态的，操作dom往里面加元素，页面dom改变，但NodeList不改变。

5. iconfont使用步骤

官网
选择图标，添加入库，添加至项目，下载至本地
把下载的文件夹放入项目的assets文件夹中
把demo.css的@font-face和iconfont.css的iconfont样式复制进需要使用的页面的css中，其中样式可以按需调整
在标签上加上类名并使用icon代码，如<i class="iconfont"></i>

6. 给html的height设置百分比body的height才是100%

7. select隐藏默认的小箭头，配合iconfont和定位使用

<select id="select" class="type-select"  style="outline: none;font-size: 50px;width: 90%; height: 84px;appearance: none;">

// 问题是定位的图片点击没有反应，嘿嘿嘿，配合点击穿透即可解决。

8. 文字的垂直居中

8.1单行文字垂直居中

<div class="text">你好</div>
<style>
	.text {
		width:100px;
		height:100px;
		line-height:100px;
	}
</style>

8.2 多行文字垂直居中

多行：宽度不够，自动换行的情况

<div class="text">你好你好你好</div>
<style>
	.text {
		width:20px;
		height:100px;
		display:table;
		vertical-align:middle;
	}
</style>

CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

9. word-break、white-space的区别

参考链接

9.1 word-break

CSS 属性 word-break 指定了怎样在单词内断行。

常用：
word-break:break-all;
所有单词碰到边界一律拆分换行，不管你是incomprehensibilities这样一行都显示不下的单词，还是long这样很短的单词，只要碰到边界，都会被强制拆分换行。所以用word-break:break-all时要慎重呀。

word-break in mdn

9.2 white-space

white-space CSS 属性是用来设置如何处理元素中的空白。

常用：
white-space:nowrap; 文字不换行，文本会在在同一行上继续，直到遇到
标签为止。

white-space in mdn