前端技术百问

最新推荐文章于 2024-03-03 12:21:44 发布

小爱同学-Allen

最新推荐文章于 2024-03-03 12:21:44 发布

阅读量756

点赞数

本文链接：https://blog.csdn.net/qq_34595425/article/details/109485808

版权

如何理解Html标签语义化

html5新出的标签，每个标签都有自己语义，什么标签做什么事。让人看的懂，也让机器可以看的懂，利于SEO。

css权重是什么？

设置节点样式的方式有很多种，不同的方式它们的权重并不相同，当它们给一个节点设置同一个样式时，谁的权重高谁就生效。
important：无限高
行内样式：权重值为1000
id选择器：权重值为100
类、伪类、属性选择器：权重值为10
元素选择器：权重值为1

盒模型有几种，它们区别是什么？

标准盒模型：设置的宽高只是包括内容区，内边距和边框另算。
怪异盒模型：设置的宽高包含了内边距和边框。使用box-sizing属性设置：border-box：怪异盒模型、content-box：标准盒模型。

什么是BFC？

块级格式上下文，一句话来说就是让块级元素有块级元素该有的样子，触发BFC可以清除浮动、让margin不重叠。

如何触发BFC？

float的值不为none。
overflow的值不为visible。
display的值为table-cell、table-caption和inline-block之一。
position的值不为static或releative中的任何一个。

你常用的清除浮动方式是什么？

.clear:after, .clear:before {
  content: ' ';
  display: table;
}
.clear:after {
  clear: both;
}

em、rem的区别？

em：如果父级有设置字体大小，1em就是父级的大小，没有1em等于自身默认的字体大小。
相对于html标签的字体大小。

移动端1px问题？

box-shadow: 
  0  -1px 1px -1px #e5e5e5,   //上边线
  1px  0  1px -1px #e5e5e5,   //右边线
  0  1px  1px -1px #e5e5e5,   //下边线
  -1px 0  1px -1px #e5e5e5;   //左边线
  0 0 0 1px #e5e5e5;   //四条线

定位的方式有哪几种，它们的区别是什么？

relative：相较于自身定位，设置的位置相对于自己进行位移。不脱离文档流。
absolute：相较于最近有定位的父节点定位，设置的位置相较于父节点。会脱离文档流，导致父节点高度塌陷。
fixed：相较于当前窗口进行定位，设置的位置相较于窗口。脱离文档流。

垂直水平居中的实现方式有哪些？

父级设置text-align: center和line-height等同高度。
子节点绝对定位，设置position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
子节点绝对定位，需要设置宽度和高度。设置position: absolute;top:0;left:0;right:0;bottom:0;margin:auto;
父级设置display: table，子节点设置display:table-cell;text-align:center;vertical-align:middle;
父级设置display: flex;justify-content:center;align-items:center;
父节点设置display: grid;，子节点设置：align-self:center;justify-self: center;

你知道的左右宽度固定，中间自适应的三栏布局方案有哪些？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>三栏布局</title>
	</head>
	<body>
		<!-- 1.float + margin（浮动布局）
		 优点：快捷 简单 兼容性较好
		 缺点: 有局限性 脱离文档流 需要清除浮动等-->
		<div class='parent'>
		  <div class='left'>left</div>
		   <div class='right'>right</div>
		  <div class='center'>center</div>
		</div>
		<style>
			html,body,.parent{
				padding: 0;
				margin: 0;
				overflow: hidden;
			}
			.left{
				float:left;
				height: 100%;
				width:200px;
				background:red
			}
			.center{
				height: 100%;
				margin: 0 200px;
				background-color: yellow;
			}
			.right{
				float:right;
				height: 100%;
				width:200px;
				background-color: blue;
			}
		</style>
		<!-- position绝对布局 
			优点：简单粗暴
			缺点: 脱离文档流 高度未知会出现问题 可用性差 -->
		<div class="parent">
			<div class="left">left1</div>
			<div class="right">right1</div>
			<div class="center">center1</div>
		</div>
		<style>
			html,body,.parent{
				padding: 0;
				margin: 0;
				overflow: hidden;
			}
			.left,.right{
				position: absolute;
				top: 0;
				overflow: hidden;
				width:200px;
			}
			.left{
				left:0;
				background-color: yellow;
			}
			.right{
				right:0;
				background-color: blue;
			}
			.center{
				height: 100%;
				background-color: red;
				margin: 0 200px;
			}
		</style>
		<!-- 3.flex（弹性盒子布局） 
		优点：比较完美 移动端首选
		缺点: 不兼容 ie9 及以下-->
		<div class="parent">
			<div class="left">left2</div>
			<div class="center">center2</div>
			<div class="right">right2</div>
		</div>
		<style>
			body,html{
				padding: 0;
				margin: 0;
				overflow: hidden;
			}
			.parent{
				display: flex;
			}
			.left{
				width:200px;
				background: red;
			}
			.center{
				flex:1;
				background:yellow
			}
			.right{
				width:200px;
				background-color: green;
			}
		</style>
		<!-- 4.table(表格布局)  优点：兼容性很好（ie8 及以上） 父元素高度会被子元素撑开（不担心高度塌陷）
缺点: seo 不友好 当其中一个单元格高度超出的时候，其他的单元格也是会跟着一起变高的-->
			<div class="parent">
				<div class="left">left3</div>
				<div class="center">center3</div>
				<div class="right">right3</div>
			</div>
			<style>
				body,html{
					padding: 0;
					margin: 0;
				}
				.parent{
					display: table;
					width: 100%;
				}
				.parent>div{
					display: table-cell;
				}
				.left{
					width:200px;
					background-color: red
				}
				.center{
					background-color: #FFFF00;
				}
				.right{
					width: 200px;
					background-color: aqua;
				}
			</style>
			<!-- 5.Grid(网格布局) 
				优点：简单强大 解决二维布局问题
				缺点: 不兼容 ie9 及以下-->
			<div class="parent">
				<div class="left">left4</div>
				<div class="center">center4</div>
				<div class="right">right4</div>
			</div>
			<style>
				body,html{
					padding: 0;
					margin: 0;
				}
				.parent{
					display: grid;
					width: 100%;
					grid-template-rows: 100px;
					grid-template-columns: 200px auto 200px;
				}
				.left{
					background-color: red;
				}
				.center{
					background-color: aqua;
				}
				.right{
					background-color: #FFFF00;
				}
			</style>
	</body>
</html>

实现三个圆形的水平自适应布局？

难点在于高度的自适应
.parent {
  display: table;
  width: 100%;
}
.child {
  display: table-cell;
  padding-top: 33.33%;
  background: red;
  border-radius: 50%;
}

.parent {
  overflow: hidden;
}
.child {
  float: left;
  width: 33.33%;
  padding-top: 33.33%;
  border-radius: 50%;
  background: red;
}

.parent {
  display: flex;
}
.child {
  flex: 1;
  padding-top: 33.33%;
  border-radius: 50%;
  background: red;
}

介绍下flex布局？

主轴方向：水平排列（默认） | 水平反向排列 | 垂直排列 | 垂直反向排列
flex-direction: row | row-reverse | column | column-reverse;

换行：不换行（默认） | 换行 | 反向换行(第一行在最后面)
flex-wrap: nowrap | wrap | wrap-reverse;

flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
flex-flow: <flex-direction> || <flex-wrap>;

主轴对齐方式：起点对齐（默认） | 终点对齐 | 居中对齐 | 两端对齐 | 分散对齐
justify-content: flex-start | flex-end | center | space-between | space-around;

交叉轴对齐方式：拉伸对齐（默认） | 起点对齐 | 终点对齐 | 居中对齐 | 第一行文字的基线对齐
align-items: stretch | flex-start | flex-end | center | baseline;

多根轴线对齐方式：拉伸对齐（默认） | 起点对齐 | 终点对齐 | 居中对齐 | 两端对齐 | 分散对齐
align-content: stretch | flex-start | flex-end | center | space-between | space-around;

JavaScript的变量有哪些类型？

分为两种：基础类型和引用类型。基础类型目前有六种，分别是boolean、null、undefined、number、string、symbol。
除了以上的基础类型之外，其他就是引用类型了，有Array、Object、Function。

基础类型和引用的区别？

它们在内存中存储的方式不同。基础类型存储的是值，而引用类型存储的是指向内存中某个空间的指针；
基础类型赋值就是把值赋给另外一个变量，而引用类型的赋值是赋值的原来变量的指针，所以当引用类型发生改变时，只要是指向同一个指针的变量的都会发生改变。

函数参数是对象时会发生什么问题？

函数参数是对象时，相当于是将对象的指针传递给了函数，如果在函数的内部改变了对象的值，外面对象的值也会发生改变，数组也是如此。

typeof和instanceof判断变量类型的区别？

typeof对于基础类型除了null以外都可以显示正确的类型，对于数组和对象都会显示object，对于函数会显示function。
instanceof主要是用来判断引用类型，它的原理是根据原型链来查找。

有没有更好的判断变量类型的方法？

可以使用Object.prototype.toString.call(var)，可以更加准确的判断某个变量的类型。

类数组转为数组的方式有哪些？

		<div></div>
		<div></div>
		<div></div>
		<script>
			let divEle = document.querySelectorAll('div')
			console.log(divEle)
			// 一、遍历类数组，依次将元素放入一个空数组。
			let divArr = []
			for(let item of divEle){
				divArr.push(item)
			}
			console.log(divArr)
			
			// 二、用扩展运算符或者Array.from()方法转换
			let divTwo = [...divEle]
			let divTwo1 = Array.from(divEle)
			console.log(divTwo)
			
			// 三、利用apply展开
			let divThree = [].concat.apply([],divEle)
			console.log(divThree)
		</script>

如何判断一个变量是否是数组？

arr instanceof Array
Array.prototype.isPrototypeOf(arr)
Array.isArray(arr)
Object.prototype.toString.call(arr) === '[object Array]'
arr.constructor === Array

将多维数组扁平化？

// 多维数组扁平化处理
	function flattenArr(arr){
		let newArr = []
		for(var i in arr){
			if(typeof arr[i]==='object'){
				console.log(arguments.callee(arr[i]))
				newArr = newArr.concat(arguments.callee(arr[i]))
			}else{
				newArr = newArr.concat(arr[i])
			}
		}
		return newArr;
	}
	let arrs = [1,2,[5,6,7],4]
	let newArr = flattenArr(arrs)
	console.log(newArr.sort())