优秀的编程知识分享平台

网站首页 > 技术文章 正文

总结几道前端面试题(一)（2020热门前端面试题）

nanyue 2024-10-08 05:47:31 技术文章 4 ℃

1、css水平、垂直居中的写法，请至少写出4种

水平居中

行内元素: text-align: center;

块级元素: margin: 0 auto;

position:absolute + left:50% + transform:translateX(-50%);

display:flex + justify-content:center;


垂直居中

设置line-height 等于height

position：absolute + top:50% + transform:translateY(-50%);

display:flex + align-items: center;

display:table + display:table-cell + vertical-align: middle;


2、网页度量单位都有哪些?各自代表的含义都是什么?

rem是全部的长度都相对于根元素<html>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。


em子元素字体大小的em是相对于父元素字体大小

元素的width/height/padding/margin用em的话是相对于该元素的font-size


vw/vh全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。


px像素，相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

一般电脑的分辨率有{1920*1024}等不同的分辨率

1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素


3、请简述盒模型概念及box-sizing作用

盒模型的组成，由里向外content,padding,border,margin.

在IE盒子模型中，width表示content+padding+border这三个部分的宽度

在标准的盒子模型中，width指content部分的宽度


box-sizing: content-box 是W3C盒子模型

box-sizing: border-box 是IE盒子模型

box-sizing的默认属性是content-box


4、label标签是什么元素?通常用在什么地方?

label标签是行内元素,主要是方便鼠标点击使用，扩大可点击的范围，增强用户操作体验,通常与input元素id进行绑定,达到label元素内点击时，会触发input聚焦光标效果


5、请简述html页面渲染的过程

第一步：浏览器拿到html源码并解析,会创建一个DOM树,并同时请求css、js、images静态资源,每个html标签都有对应的节点,根节点是documentElement

第二步：浏览器解析CSS代码,并计算出样式表数据构建cssDom,css渲染优先级为浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style

第三步：DOM树与cssDom形成渲染树,渲染树每个节点都存储相对应的css属性

第四步：浏览器将渲染树绘制到网页上


6、常用的三种浏览器本地缓存都有哪些?各有什么特点?

cookie在客户端保存诸如用户名等简单的用户信息,但cookie的大小被限制在4KB,cookie是随HTTP事务一起被发送的，因此会浪费一部分发送cookie时使用的带宽,要正确的操纵cookie是很困难的


sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据


localStorage：将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用

localStorage和sessionStorage的存储数据大小一般都是5MB,localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信,localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理


7、get、post的区别

get传参方式是通过地址栏URL传递，是可以直接看到get传递的参数，post传参方式参数URL不可见，get把请求的数据在URL后通过？连接，通过&进行参数分割。psot将参数存放在HTTP的包体内;

get传递数据是通过URL进行传递，对传递的数据长度是受到URL大小的限制，URL最大长度是2048个字符。post没有长度限制;

get后退不会有影响，post后退会重新进行提交;

get请求可以被缓存，post不可以被缓存;

get请求只URL编码，post支持多种编码方式;

get请求的记录会留在历史记录中，post请求不会留在历史记录;

get只支持ASCII字符，post没有字符类型限制;


8、什么是跨域?如何解决?

浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域

解决跨域的方法：

1)前端改成jsonp请求

2)服务器端设置nginx反向代理

3)后台修改header头,设置成允许访问来源、访问方式

4)H5提供的postMessage(url,param)方法函数,经典案例为iframe网页嵌入的跨域问题

Tags：

猜你喜欢

最近发表
标签列表