前端面试题1

一.说一下浮动

使用浮动会让元素脱离文档流，同时影响到其他元素的排版，如果一个元素未设定高度，同时它的子元素全部使用浮动，那么这个父元素的高度会塌陷，想要解决这个问题，我们可以给这个父添加overflow:hidden属性，清除浮动的影响。也可以给浮动元素父级增加伪元素来清除浮动的影响

::after{

content:"";

display:table;

clear:both;

}

正常情况下，我们都会使用overflow:hidden属性，因为它比较简单方便，不会增加额外的属性

二.说几个未知宽高元素水平垂直居中方法

1. 设置元素相对父级定位，然后给元素增加属性

{

position:absolute;

left:50%;

right:50%;

}

2.设置元素的父级元素为弹性盒模型display:flex，然后为元素增加属性

{

justify-content:center;

align-items:center;

}

3.设置元素的父级为网格元素display: grid，然后为子元素增加属性

｛

justify-content:center;

align-items:center;

｝

较为常用的是第一与第二种方式，但第二种方式只在IE11以上的版本可以使用

三.说一说null 和 undefined 的区别，如何让一个属性变为null

undefined是全局对象的一个属性，任何一个没被赋值的变量、没有返回值的函数、对象不存在的某个属性却去访问或者定义了形参但没有传递实参的函数返回的值都为undefined，undefined通过typeof判断类型是'undefined'。 null代表对象的值未设置，一个对象没有设置指针地址就是null。null通过typeof判断类型是'object'。对一个属性直接赋值null就可让它变为null。

四.说一说HTML语义化？

1. 代码可读高 2. 有利于SEO 3. 利于页面内容结构化 常见的语义化标签：header、footer、aside、main、h1-h6、input、textarea、video、aduio

五.说一说JS变量提升？

使用var声明的变量与函数会声明提升，其中的值不会提高，在声明的上方调用变量会返回undefined，调用函数可直接使用。

六.说一说CSS尺寸设置的单位

px:像素的缩写，绝对长度单位，它的大小取决于屏幕的分辨率

em：相对长度单位，在 `font-size` 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小

 rem：相对长度单位，相对于根元素的字体大小，根元素字体大小未设置，使用浏览器默认字体大小

vw：相对长度单位，相对于视窗宽度的1%

vh：相对长度单位，相对于视窗高度的1%