前端面试题小总结

小凡子呀

已于 2022-10-22 23:50:09 修改

阅读量808

点赞数 3

CC 4.0 BY-SA版权

于 2020-07-06 12:51:01 首次发布

本文链接：https://blog.youkuaiyun.com/qq_46443198/article/details/106354643

前端面试题小总结2020

写在前面的话
CSS

写在前面的话

根据自己的记忆，建单的梳理了一下自己之前面试时被常问到的一些HTML和CSS的相关问题，希望对你有所帮助，择优取之不对的地方欢迎评论指正（谢谢）

CSS

display:none;和 visibility:hidden;的区别

两者都用来处理元素的隐藏（元素不可见），不同点在于：

占位： display:none;隐藏后的元素，不占位；visibility:hidden;隐藏后的元素不可见但依旧占位（元素未隐藏时的位置）。
继承： visibility:hidden;具有继承性，给父元素设置visibility:hidden;它的子元素也会继承这个属性，但是给子元素重新设置visibility: visible；它就会重新显示出来。dispaly则没有，父级隐藏，所有的子元素都隐藏。

块元素和内联元素有什么区别

块元素：div、p、h1~h6、ul、ol、li、dl、dt、dd、hr、from……
内联元素：span、b、strong、i、em、u、a、img……

块元素	内联元素
上下显示、独占一行	一行显示多个
自动换行	不会自动换行
可设置宽高	不可直接设置宽高
一般情况下可以嵌套块元素和内联元素	只能嵌套内联元素

盒模型

box-sizing：

标准盒模型：content-box
盒子的总宽度：padding+border+内容
怪异盒模型:border-box
盒子的总宽度：width(包含padding+border)

弹性盒模型

设置主轴方向：flex-direction
X轴：row（内容按照X轴顶端对齐，类似于左浮动效果）
row-reverse（内容按照X轴底端对齐，类似于右浮动效果）
Y轴：column（内容按照Y轴顶端对齐）
column-reverse（内容按照Y轴底端对齐）
主轴排列方式：justify-content
flex-start 主轴方向顶端对齐
flex-end 主轴方向底端对齐
center 主轴方向自动居中
space-between 两端对齐，中间空白区域自动分配
space-around 区域所有内容自动分配
space-evenly 平均分配
侧轴排列方式：align-items
flex-start 侧轴方向顶端对齐
flex-end 侧轴方向底端对齐
center 侧轴方向自动居中
streth 灵活元素不能有高度
baseline 内容基线对齐，一般情况下和flex-start等效
强制内容是否换行：flex-wrap
nowrap 强制不换行
wrap 自动换行
wrap-reverse 自动换行，内容反转排列
设置行对齐（多行内容时）：align-content
flex-start 侧轴顶端对齐，取消行间距
flex-end 侧轴方向底端对齐，取消行间距
center 侧轴方向自动居中，取消行间距
space-between 两端对齐，中间行距自动分配
space-around 所有行间距都自动分配
space-evenly 平均分配

选择器权重

!important>内联样式表>id选择器>class类选择器>标记选择器（类型选择器）>通配符选择器

清除浮动

⽗级 div 定义 height
结尾处加空 div 标签 clear:both
⽗级 div 定义伪类 :after 和 zoom
⽗级 div 定义 overflow:hidden
⽗级 div 也浮动，需要定义宽度
结尾处加 br 标签 clear:both

定位 position

相对定位 relative
绝对定位 absolute
固定定位 fixed
粘性定位 sticky
取消定位 static（默认值）

H5新增标签

header
section
footer
aside
video
audio
hgroup
article
nav
figure
main
dialog
Source
canvas
embed

rem和em的区别

rem:根据根元素html字体大小计算的单位
em:相对于父元素font-size的单位

px，em，rem，vw区别及特点

px是固定单位， 1px代表1像素
em是相对单位， 1em代表父级font-size的大小
rem是相对单位，1rem代表html的font-size的大小
vw是相对单位， 1vw代表视口宽度的1%

设置一个元素con(未知大小)在box里面水平垂直居中的方法

<div class="box">
   <div class="con"></div>
</div>

CSS3 相关方法：

一、弹性盒 Flexbox ：
(1)
.box{
	display:flex;
	justify-content:center;
	align-items:center
}
(2)
.box{
	display:flex;
}
.con{
	margin:auto;
}

二、Transform:
.box{
	position:relative;
}
.con{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50% ,-50%);
}

CSS2 相关方法：

一、定位
方法一：
.box{
	width:200px;
	height:100px;
	position:relative;
}
.con{
	width:50px;
	height:50px; 
	postion:absolute;
	left:0 ;
	right:0;
	top:0:
	bottom:0;
	margin:auto;
}
方法二：
.box{	
	width:200px;
	height:100px;
	position:relative;
}
.con{
	width:50px;
	height:50px;
	postion:absolute
	;left:50% ;
	top:50%；
	bottom:0;
	margin-left:-75px;
	margin-top:-75px;
}