前端基础知识点总结

第一章 面试题基础篇

​ 1.1 HTML面试题

​ 面试题：行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些？

行内元素：span、img、input...
块级元素：div、footer、header、section、p、h1...h6...
空元素：br、hr...


元素之间的转换问题：
display: inline;  			把某元素转换成了行内元素      ===>不独占一行的，并且不能设置宽高
display: inline-block; 	把某元素转换成了行内块元素		 ===>不独占一行的，可以设置宽高
display: block;					把某元素转换成了块元素			   ===>独占一行，并且可以设置宽高

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

区别一：link先有，后有@import（兼容性link比@import兼容）；
区别二：加载顺序差别，浏览器先加载的标签link，后加载@import

​ 面试题：title与h1的区别、b与strong的区别、i与em的区别？

title与h1的区别：

定义：
	title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
	h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么
区别：
	title他是显示在网页标题上、h1是显示在网页内容上
	title比h1添加的重要 (title > h1 ) ==》对于seo的了解
场景：
	网站的logo都是用h1标签包裹的	

b与strong的区别：

定义：
	b：实体标签，用来给文字加粗的。
	strong：逻辑标签，用来加强字符语气的。
区别：
	b标签只有加粗的样式，没有实际含义。
	strong表示标签内字符比较重要，用以强调的。
题外话：为了符合css3的规范，b尽量少用该用strong就行了。

i与em的区别：

定义：
	i:实体标签，用来做文字倾斜的。
	em：是逻辑标签，用来强调文字内容的
区别：
	i只是一个倾斜标签，没有实际含义。
	em表示标签内字符重要，用以强调的。
场景：
	i更多的用在字体图标，em术语上（医药，生物）。

​ 面试题：img标签的title和alt有什么区别？

区别一：
	title ： 鼠标移入到图片显示的值
	alt   ： 图片无法加载时显示的值
区别二：
	在seo的层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。

​ 面试题：png、jpg、gif 这些图片格式解释一下，分别什么时候用？

png:无损压缩，尺寸体积要比jpg/jpeg的大，适合做小图标。
jpg:采用压缩算法，有一点失真，比png体积要小，适合做中大图片。
gif:一般是做动图的。
webp：同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积。兼容性不是特别好。

​ 1.2 CSS面试题

​ 面试题：介绍一下CSS的盒子模型

CSS的盒子模型有哪些：标准盒子模型、IE盒子模型
CSS的盒子模型区别：
	标准盒子模型：margin、border、padding、content
	IE盒子模型 ：margin、content（ border +  padding  + content ）
通过CSS如何转换盒子模型：
	box-sizing: content-box;	/*标准盒子模型*/
	box-sizing: border-box;	  /*IE盒子模型*/

​ 面试题：line-height和heigh区别【大厂】

line-height是每一行文字的高，如果文字换行则整个盒子高度会增大（行数*行高）。
height是一个死值，就是这个盒子的高度。

​ 面试题：CSS选择符有哪些？哪些属性可以继承？

CSS选择符：
    通配（*）
    id选择器（#）
    类选择器（.）
    标签选择器（div、p、h1...）
    相邻选择器(+)
    后代选择器(ul li)
    子元素选择器（ > ）
    属性选择器(a[href])
    
CSS属性哪些可以继承：
		文字系列：font-size、color、line-height、text-align...
***不可继承属性：border、padding、margin...

​ 面试题：CSS优先级算法如何计算？

优先级比较：!important > 内联样式 > id > class > 标签 > 通配

CSS权重计算：
第一：内联样式（style）  权重值:1000
第二：id选择器  				 权重值:100
第三：类选择器 				  权重值:10
第四：标签&伪元素选择器   权重值:1
第五：通配、>、+         权重值:0

​ 面试题：用CSS画一个三角形

用边框画（border）,例如：
{
		width: 0;
		height: 0;

		border-left:100px solid transparent;
		border-right:100px solid transparent;
		border-top:100px solid transparent;
		border-bottom:100px solid #ccc;
}

​ 面试题：一个盒子不给宽度和高度如何水平垂直居中？

方式一：

<div class='container'>
	<div class='main'>main</div>
</div>

.container{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 300px;
		height: 300px;
		border:5px solid #ccc;
}
.main{
		background: red;
}

方式二：

<div class='container'>
	<div class='main'>main</div>
</div>

.container{
		position: relative;
		width: 300px;
		height: 300px;
		border:5px solid #ccc;
}
.main{
		position: absolute;
		left:50%;
		top:50%;
		background: red;
		transform: translate(-50%,-50%);
}

​ 面试题：display有哪些值？说明他们的作用。

none     			隐藏元素
block    			把某某元素转换成块元素
inline   			把某某元素转换成内联元素
inline-block 	把某某元素转换成行内块元素

​ 面试题：对BFC规范(块级格式化上下文：block formatting context)的理解？

BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

1. 了解BFC ： 块级格式化上下文。
2. BFC的原则：如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素。
3. 如何触发BFC：
		float的值非none
		overflow的值非visible
		display的值为：inline-block、table-cell...
		position的值为:absoute、fixed

​ 面试题：清除浮动有哪些方式？

1. 触发BFC
2. 多创建一个盒子，添加样式：clear: both