WEB前端经典面试题

最新推荐文章于 2024-06-17 02:46:14 发布

置顶我家小伟伟

最新推荐文章于 2024-06-17 02:46:14 发布

阅读量174

点赞数 1

分类专栏： JavaScript 文章标签： javascript css html5 前端

本文链接：https://blog.csdn.net/guoshuaiwei/article/details/109829976

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

WEB前端经典面试题（2020年）

1.GET与POST的区别?

这道题在面试的时候经常会被问到,通常是工作一到两年的朋友们，这是一个老生常谈的问题?可能大家觉得比较简简单单，但实际上层次不同的人,回答的问题也是各有千秋…

当问到这个问题的时候? 我们要考虑基于什么前提下的,如果说什么前提都没有的话，也就是不使用任何规范，只考虑语法和理论层面的上的HTTP协议。

答：GET与POST几乎没有什么区别，硬说一条的话，也只有是名字不同，仅此而已

如果说基于RFC规范？就是世界上会有各种地方发明很多协议，（如http协议等…）他们都属于一个组织，而且谁都是可以提出这种协议的，但是会不会被广泛使用，被采纳就不好说的了，所有就会有专门的组织来审核协议是否被收纳，规范

理论（Soecification）
- GET与POST他们是具有相同的语法的。但是他们的语义是不同的，
- GET是用来获取数据的 , POST是用来发送数据的，其他没有区别
实现（Implementation）
- 也就是HTTP就是一种格式，总要有人来实现，所有各种浏览器，就是这个规范的实现者们，由他们实现RFC规范
- 因为基于浏览器厂商的不同，所有才有了我们常见的不同。
GET的数据在URL上是可见的，POST数据不会显示在URL中的
GET请求对长度是有限制的，POST的长度是没有限制的
GET请求的数据可以收藏为书签，POST请求到的数据不可收藏为书签
GET请求后，按后退按钮，刷新按钮无影响，POST数据则会被重新提交
GET编码类型：application/x-www-form-url
POST的编码类型：encodeapplication/x-www-form-urlencode ，multipart/form-data
GET是不能进行发送文件的，POST方式来发送文件
GET的历史参数会被保留到浏览器里，POST不会保存到浏览器里的
GET只允许ASCII码，POST是没有编码限制，也允许发送二进制的
GET与POST相比较，GET安全性较差，因为所发的数据是URL的一部分

css选择器？

CSS三大特性—— 继承、优先级和层叠。
继承：即子类元素继承父类的样式;
优先级：是指不同类别样式的权重比较;
层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。
基本选择器

id选择器（#demo）
class选择器（.demo）
属性选择器 [ id ]
伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、:hover）
. 标签选择器（如：body，p，div）
伪元素选择器（::）
通配符选择器（*）’

复杂选择器

父子选择器 / 派生选择器（div p）
直接子元素选择器（div > strong）
并列选择器（如div.demo 多个限制，选择一个元素,并且不加空格）
相邻兄弟选择器 A + B
普通兄弟选择器 A ~ B
分组选择器

12.CSS

行间样式的权重值计算:

！important	10000
行间	1000
id	100
class - 属性 - 伪类	10
标签 - 伪元素	1
通配符	0

3. 说一下position都有哪些，并详细的说说他们之间的区别？

1.absolute 绝对定位，脱离原来位置进行定位，也就是相对自身最近父级进行定位

2.relative 相对定位 保留原来位置进行定位 ,他是参照元素，用于设置参照物

3.static	默认属性 元素默认定位是static

4.fixed		可视窗口进行定位 网页上应用的广告栏

5.sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，
                在目标区域在屏幕中可见时，它的行为就像position:relative;
                而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。
                淘宝的侧边栏
                
6.inherit:继承父级的定位

盒模型

一个盒模型功能的强弱，就能决定布局的简洁,而布局的简洁之间能影响后期编程的复杂

三个结构: 行为，样式，结构

IE6 混杂盒模型
fiex弹性盒子

W3c标准盒模型: boxWidth =  width + padding(2) + border(2)

IE6混杂盒模型: boxWidth = width(直接等于盒子的宽度)
contentWidth = width - border(2) - padding(2)

W3c标准盒模型和IE6混杂盒模型的区别：在于他们宽高的计算值上
这里是引用

说一下position都有哪些属性，并且说一下他们之间的区别？
static：默认值，遵循常规流
absolute: 绝对定位，脱离自身位置进行定位，也就是相对于自己有定位的父级进行定位
relative: 相对定位，保留自身位置进行定位，一般被设置为参照物
flxed：固定定位，根据可视区的窗口进行定位
sticky：粘性定位，他的表现就是现实生活中的吸附效果一样，对象在常态时遵循常规流。它就像是relative和fixed的合体，而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置

如果position设置成absolute属性该元素的display属性会变成什么
position:absolute和float会隐式的改变display类型，不论之前是什么类型的元素（display:none除外），
只要设置了position:absolute或float，都会让元素以display:inline-block的方式显示，可以设置长宽
，默认宽度并不占满父元素，就算是显示的设置display:inline或display:block，仍然无效。
inline-block

块级元素行级元素的区别
“block” 块级元素：高

“inline” 行级元素内联元素：不占满整行不可以改变宽高

“inline-block” 行级块元素：可以改变宽高也不独占整行

--------------

margin合并，margin塌陷

margin合并：

，父子嵌套的元素，垂直方向的margin，父子元素是结合在一起的，他俩会取最大的
父子嵌套的元素，垂直方向的margin基本上会黏合在一起，取最大的值

子集相对于父级，就相当于没有顶层了一样，这个现象较margin塌陷

解决方法：

1. margin-top： 1px solid red 给他父级加一个边框 2. BFC （block format context）块级格式化上下文，每一个盒子都有一套语法规则，可以通过正常的手段，让其中的盒子，里面的渲染规则发生改变，触发一个盒子的bfc position:absolute display:inline-block float:left/right overflow:hidden 改变父级的渲染规则，

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .wrapper{ width: 100px; height: 100px; margin-left: 100px; margin-top: 100px; background-color: black; } .content{ margin-left: 50px; margin-top: 50px; margin-top: 100px; width: 50px; height: 50px; background-color: green; } </style> </head> <body> <div class="wrapper"> <div class="content"></div> </div> </body> </html>

浮动元素产生了浮动流，所以产生了浮动流的元素，块级元素看不到他们，产生了bfc的元素和
文本类属性的元素，以及文本都能看到浮动元素