前端知识点记录

游1

已于 2022-02-11 15:39:21 修改

阅读量158

点赞数

于 2021-07-13 17:19:39 首次发布

本文链接：https://blog.csdn.net/youyanh/article/details/118669826

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这里写自定义目录标题

前端知识点记录

前端知识点记录

CSS相关知识点

文本超出变成…

1、只需要设置下面样式即可
overflow: hidden;
text-overflow:ellipsis;
white-space:nowrap
2、如果是需要指定第几行开始才变成…，但这个同时需要将盒子的高度进行固定
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //这里定义第几行开始
overflow: hidden;

px、em、rem区别介绍

1、px像素，相对长度单位，像素px是相对于显示器屏幕分辨率而言。
特点：

1、IE无法调整那些使用px作为单位的字体大小
2、国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3、Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)

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

1、em的值并不是固定的；
2、em会继承父级元素的字体大小。

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

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

在这里插入图片描述
4、px 与 rem 的选择？

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

box-sizing 属性

box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式。
例如：创造一个<div>没有设置 box-sizing 属性为 border-box(不设置的话默认值为 content-box.)
同时设置css样式 {width:100px; border:10px solid red; padding:10px;} 那么最终容器实际宽度为：
100px(width)+2*10px*(padding)+2*10px(border)=140px
所以你会得到一个比你预期（100px）还要更大的容器，结果就是会破坏网页布局
注意：容器 margin 的尺寸不会被计算入最终容器宽度，因为对他的定义为对这个容器的留白，但不属于容器本身。
如果当我们定义一个容器的 box-sizing 属性为 border-box 时（表达式：br{box-sizing:border-box}），
那么我们创建一个和上段中相同设置的 <div> 容器时，
那么他的最终宽度即为 100px, 那么它的内容部分（content）的有效宽度变成了 100px-2*10px-2*10px =60px;
所以你会得到一个你预期大小的盒子容器，但是只是被压缩了内容部分尺寸而已，但是对于整体布局而言益处颇多。
所以要合理利用好这个属性，这个属性十分重要。

content 属性

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容

在页面上隐藏元素得方法有哪些

占位：
visibility:hidden;
margin-left:-100%;（这类方式只是将元素放在可视窗口之外）
opacity:0;（这类是将内容透明化，若存在色差会引起重绘，导致无法达到隐藏效果）
transform:scale(0);（将元素缩放为0尺寸）
z-index:-999;(通过曾经摆放来达到隐藏效果)
ransform: rotateY(90deg);或transform: rotateX(90deg);（使元素在 x/y 轴不可见）
不占位：
display:none;
width:0; heignt:0; overflow:hidden;
仅对块内文本元素
text-indent:-9999px;
font-size:0; (因为浏览器存在默认字体大小，所以不一定能够生效)
其它（期待补充）

CSS创建一个三角形

width: 0;
height: 0;
margin: 100px auto;
border-bottom: 50px solid #333;
border-top: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;

清除浮动的方式有哪些及优缺点

首先要知道为什么要清除浮动，浮动所带来的问题，才能更好的解决问题
在页面布局中有些采用浮动布局，从而带来了盒子塌陷问题，
什么是盒子塌陷？
盒子塌陷是指外部盒子本该包裹住内部浮动的盒子，结果确没有。
问题出现的原因
父元素包含浮动元素，它的高度就会塌缩为0（在没有设置高度或高度auto时）在没有对父元素设置背景以及边框时很难被注意到，由于内部盒子设置float属性，从而把元素从标准文档流中抽离，造成结果就是外部（父）盒子丢失了内部（子）盒子。
解决方案
盒子塌陷是因为丢失内部盒子，那么找回来即可（同时也就清除了浮动的影响）。

固定设置外部盒子的宽高，只要内部盒子不超出外部盒子即可，
***缺点：***针对于页面内容极少变动页面是个不错的方式，但这样的布局就不能是自适应的。
给外部（父）盒子也加上浮动，这样整体呢都抽离离标准文档流，
缺点： 可读性差，不易于维护（本来只有内部盒子，现在整个模块都float，而且可能需要调整整个页面的布局）
在外部（父）盒子最下方添加一个带clear属性的空盒子<div style="clear:both;"></div>放在最下方清除浮动，把盒子重新撑起来
***缺点：***引入了冗余元素
使用overflow:hidden清除浮动，给外部盒子添加这个属性即可
***缺点：***可能造成溢出元素不可见，影响展示效果
用affter伪元素清除浮动，给外部盒子的after伪元素设置clear属性，再隐藏它。这其实是对空盒子方案的改进，一种纯css的解决方案，不在引入冗余元素。这也是bootstrap框架采用的清除浮动的方法.clearfix {*zoom: 1;} .clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";} .clearfix:after {clear: both;}

简述理解优雅降级和渐近增强

这两个概念是再CSS3出现之后火起来的，由于低版本的浏览器不支持CSS3，但对于CSS3的优秀特效又无法舍弃，所以在高版本浏览器中使用CSS3，低版本则保证最基本的功能。两者的目的都是关注不同浏览器下用户的体验，但侧重点不同也就导致了工作流程上的不同。
渐进增强： 针对于低版本浏览器进行构建页面，完成基本功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验
优雅降级： 一开始就构建站点的完整功能，然后再针对低版本浏览器进行兼容。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览

CSS常见的布局方式

博文地址
在这里插入图片描述

html相关知识点

锚链接

点击a标签会跳转到div这个位置，需要在同一个界面内，在滚动条太长时可以使用这个跳转到指定的位置

<a href="#test">aaa</a>
<div id="test" name="test">aaa</div>

页面导入样式时，使用link和@import有什么区别？

1.link是XHTML标签，link除了加载CSS，还可以定义RSS，定义rel连接属性等，@import就只能加载CSS
2.link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。
3.link没有兼容性问题，@import不兼容ie5以下。
4.link可以通过js操作DOM动态引入样式表改变样式，而@import不可以

HTML的元素有哪些（含H5）

行内元素

span		-- 行内元素
i			-- 斜体
b			-- 加粗
br			-- 换行
a			-- 链接
strong		-- 加粗
img			-- 图片
sup			-- 上标
sub			-- 下标
em			-- 斜体
del			-- 删除线
u			-- 下划线
input		-- 文本框
textarea	-- 多行文本
select option	-- 下拉列表选择框

块级元素

div			-- 块级元素
p			-- 段落
h1~h6		-- 标题1~6级
table tr td	-- 表格
address		-- 地址文字
center		-- 地址文字
hr			-- 水平分割线
ul li		-- 无序列表
ol li		-- 有序列表
dl dt dd	-- 定义列表
form		-- 表单

对标签语义化的理解是什么？

标签语义化初衷就是为了让正确的标签做正确的事情。
在这种前提下我们能够更好的解读代码，维护代码，同时代码也能更好的被浏览器解读，利于SEO便于查询
但每个人对于标签理解都会有不同之处，如果强制规定使用标签语义就不友好了，
标签的语义除了在 tag 上体现，还可以在 id class name等上面体现出来；

js相关知识点

了解递归算法

什么是递归：
在数学与计算机科学中，递归(Recursion)是指在函数的定义中使用函数自身的方法。
递归有三要素：
1）明确递归终止的条件
2）给出递归终止时的处理办法
3）提取重复逻辑，缩小问题规模
递归应用场景：
1）问题的定义是按递归定义的
2）问题的解法是递归的
3）数据结构是递归的

Math 随机数函数

Math.random()		//返回值是一个大于等于0，且小于1的随机数
Math.random()*N		//返回值是一个大于等于0，且小于N的随机数
Math.round()		//四舍五入的取整
Math.ceil()			//向上取整，如Math.cell(0.3)=1 、又如Math.ceil(Math.random()*10) 返回1~10
Math.floor()		//向下取整，如Math.floor(0.3)=0、又如Math.floor(Math.random()*10)返回0~9
Math.round(Math.random()*15)+5			//返回5~20随机数
Math.round(Math.random()*(y-x))+x		//返回x~y的随机数，包含负数。
Math.floor()		//其实返回值就是该数的整数位
Math.floor(0.666)   -->  0
Math.floor(39.2783)   -->  39

删除字符串中最后一个指定得字符

<!-- 方法一 -->
function delLast(str, target) {
	return str.split('').reverse().join('').replace(target, '').split('').reverse().join('')
}
const str = delLast('ashdfghhj', 'h')
console.log(str)
<!-- 方法二 -->
function removeLast(str, del) {
	if (typeof str !== 'string') {
		console.log('确认要删除得对象为字符串！')
	}
	if (typeof str == 'string') {
		let index = str.lastIndexOf(del)
		return str.substring(0, index) + str.substring(index + 1, str.length)
	}
}
const str1 = removeLast('asdsffgdda', 'd')
console.log(str1)

写一个方法把下划线命名转成大驼峰命名

<script type="text/javascript">
	function changeLine(str){
		if(typeof str !== 'string'){
			console.log('确认要更改的对象是字符串！')
		}else{
			let newName = ''
			let arr = str.split('_')
			for (let i = 1; i < arr.length; i++) {
				newName += arr[i].substr(0,1).toUpperCase()+arr[i].substr(1)
			}
			return arr[0]+newName
		}
	}
	const str = changeLine('my_change_mont_abc')
	console.log(str)
</script>

写一个把字符串大小写切换的方法

<script type="text/javascript">
	function changStr(str){
		if(typeof str !== 'string'){
			console.log('确认要更改的对象是字符串')
		}else{
			let newName=''
			let arr = str.split('')
			arr.forEach(e=>{
				let code = e.charCodeAt()
				// A~Z 65~90  a~z 97~122 大小写字母的ASCII码
				if((code>=65&&code<=90)||(code>=97&&code<=122)){
					newName += (code>96 ? e.substr(0,1).toUpperCase(): e.substr(0,1).toLowerCase())
				}else{
					newName += e
				}
			})
			return newName
		}
	}
	
	const str = changStr('ab-FD')
	console.log(str)
</script>

写一个去除制表符和换行符的方法

<script type="text/javascript">
	var str = '大家好  阿斯蒂芬阿斯顿\n发生的发生';
	function fn(str) {
		var s = str.replace(/\s+/g, '');
		return s;
	}
	console.log(fn(str))
</script>

写一个加密字符串的方法

这其实就是一个加密思路问题，加密手段各不相同，可引用的js也有许多。加密本身来说就是将某个简单可读内容转变成复杂且不能直接读取的内容，对前端来讲简单的方式就是字符编码转换即可简单加密，一个加密的可靠性在于算法，对于前端来说不可能去做复杂的事情，所以了解即可，无需过于深入其中。
提供参考：
几种字符串加密解密的方法
 几种字符串加密解密的方法

写一个判断参数类型的方法

<script src="../js/type.js"  charset="utf-8"></script>
<script type="text/javascript">
	let a = 6					// number
	let b						// undefined
	let c= {					// object
		name:'yyy'
	}
	let d = [1,2,3]				// array
	let e = function (){}		// function
	let f =null					// null
	let g = 'a'					// string
	let h = true				// boolean
	console.log(type(e))
</script>

type.js

/**
 * 封装一个判断数据类型的js
 * 支持下列类型
 * number、boolean、string、undefined、null、symbol
 * array、object、set、weakset、map、weakmap、
 * function、class、
 * regexp、date、math、promise
 * 
 * @param {*} e 任意类型的变量
 * @params {Boolean} strict [default:false]是否为严格模式
 * @return {string} 返回变量的真实类型
 * */

const _toString = Object.prototype.toString
const NULL = 'null'
const OBJECT = 'object'
const NUMBER = 'number'
const BOOLEAN = 'boolean'
const STRING = 'string'
const UNKNOW = 'unknow'

function type(element, strict = false) {
	strict = !!strict

	// #1 fix typeof null === 'object'
	if (element === null) {
		return NULL
	}

	const eleType = typeof element

	// #2 return [number string boolean undefined symbol]
	if (eleType !== OBJECT) {
		return eleType
	}

	let eleRealType
	let eleRealTypeLower

	try {
		eleRealType = _toString.call(element).slice(8, -1)
		eleRealTypeLower = eleRealType.toLowerCase()
	} catch (e) {
		// #3 IE activie 对象
		return OBJECT
	}

	// #4 fix typeof new String('') === 'object' , expect 'string'
	if (eleRealTypeLower !== OBJECT) {
		// 严格模式下 会严格区分`number、string、boolean`的原始值和对象值
		// example `new String('') => 'String'`、`String('') => 'string'`
		if (strict && (eleRealTypeLower === NUMBER || eleRealTypeLower === BOOLEAN || eleRealTypeLower === STRING)) {
			return eleRealType
		}
		return eleRealTypeLower
	}

	if (element.constructor == Object) {
		return eleRealTypeLower
	}

	// #5 Object.create(null)
	try {
		// __proto__ 为部分早期浏览器
		if (Object.getPrototypeOf(element) === NULL || element.__proto__ === NULL) {
			return OBJECT
		}
	} catch (e) {
		// IE 无 Object.getPrototypeOf
	}

	// #6 function A () {}; new A
	try {
		const constructorName = element.constructor.name
		if (typeof constructorName === STRING) {
			return constructorName
		}
	} catch (e) {
		// No constructor
	}

	// function A() {}; A.prototype.constructor = null; new A
	return UNKNOW
}

简要描述下什么是回调函数并写一个例子出来

// 可以理解为把一个函数（这个函数就是回调函数）当作参数传如另一个函数（主函数）
// 当执行时不直接执行这个函而是先执行主函数，在主函数执行之后再把传入的函数参数执行
<script type="text/javascript">
	function A (callback){
		callback()
		console.log('主函数')
	}
	function B (){
		setTimeout("console.log('回调函数')",300)
	}
	A(B)
</script>