没有合适的资源?快使用搜索试试~ 我知道了~
首页前端大厂最新面试题总结-2018.docx
前端大厂最新面试题总结-2018.docx
需积分: 0 0 下载量 21 浏览量
更新于2023-11-22
收藏 67KB DOCX 举报
•Doctype的作用是声明HTML文档的类型,告诉浏览器使用哪种解析规则来渲染页面。严格模式是指浏览器按照HTML规范进行解析,而混杂模式是指浏览器以一种向后兼容的方式解析页面。 CSS •什么是盒模型?常见的盒模型有哪些? 盒模型指的是网页布局中的盒子,包括内容区、内边距、边框和外边距。常见的盒模型有标准盒模型和IE盒模型。 JavaScript •什么是闭包? 闭包是指能够访问其他函数内部变量的函数。它通过将函数及其相关的变量保存在内存中,形成一个闭包环境,使得这些变量在函数调用完后仍然可以被访问和使用。 其他问题 •什么是跨域?如何解决跨域问题? 跨域是指在浏览器中,当一个域下的页面请求另一个域下的资源时,由于浏览器的同源策略限制,会导致请求失败。解决跨域问题可以使用JSONP、CORS、代理等方式。 优质网站推荐 •GitHub:用于存储和分享代码的开源平台。 •MDN:Mozilla开发者网络,提供关于Web开发的文档和资源。 •Stack Overflow:开发者问答社区,提供技术问题的解答和讨论。 总结:本文总结了前端大厂最新的面试题,并通过分类介绍了HTML、CSS、JavaScript等部分的知识点。文章强调重要知识需要系统学习,不可投机取巧。面试时需要注意题目的等级和类型,在回答问题时关注实际能力和态度。此外,文章还推荐了一些优质的网站资源供读者参考。
资源详情
资源推荐
![](https://csdnimg.cn/release/download_crawler_static/87870140/bga.jpg)
position: absolute;
width: 1200px;
background: none;
margin: 0 auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
• 列出display的值,说明他们的作用。
block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示,并添加样式列表标记。
• position的值, relative和absolute定位原点是?
absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
fixed (老IE不支持)
生成绝对定位的元素,相对于浏览器窗口进行定位。
relative
生成相对定位的元素,相对于其正常位置进行定位。
static
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right z-index
声明)。
sticky
粘性定位,这是一个结合了 position:relative 和 position:fixed
两种定位功能于一体的特殊定位,适用于一些特殊场景。元素先按照普通文档流定位,然后相对
于该元素在流中的 flow root(BFC)和 containing
block(最近的块级祖先元素)定位。而后,元素定位表现为在跨越特定阈值前为相对定位,之
后为固定定位。
inherit
规定从父元素继承 position 属性的值。
• CSS3有哪些新特性?
CSS3实现
圆角(border-radius:8px),
阴影(box-shadow:10px),
对文字加特效(text-shadow),
线性渐变(gradient),
旋转(transform)
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-
![](https://csdnimg.cn/release/download_crawler_static/87870140/bgb.jpg)
9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba
• 请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景? ``` 文章链接:
http://www.ruanyifeng.com/blog/2015/07/flex-
grammar.html?utm_source=tuicool(语法篇)
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html(实例篇)
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 +
float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
简单的分为容器属性和元素属性 容器的属性: flex-
direction:决定主轴的方向(即子item的排列方法) .box { flex-direction: row | row-
reverse | column | column-reverse; }
flex-wrap:决定换行规则 .box{ flex-wrap: nowrap | wrap | wrap-reverse; }
flex-flow:让弹性盒的元素以相反的顺序显示,且在必要的时候进行拆行: .box { flex-
flow: flex-direction flex-wrap|initial|inherit;; }
justify-content:对其方式,水平主轴对齐方式 align-items:对齐方式,竖直轴线方向
项目的属性(元素的属性):
order属性:定义项目的排列顺序,顺序越小,排列越靠前,默认为0 flex-
grow属性:定义项目的放大比例,即使存在空间,也不会放大 flex-
shrink属性:定义了项目的缩小比例,当空间不足的情况下会等比例的缩小,如果定义个
item的flow-shrink为0,则为不缩小 flex-
basis属性:定义了在分配多余的空间,项目占据的空间。 flex:是flex-grow和flex-
shrink、flex-basis的简写,默认值为0 1 auto。 align-
self:允许单个项目与其他项目不一样的对齐方式,可以覆盖align-
items,默认属性为auto,表示继承父元素的align-items
比如说,用flex实现圣杯布局 ```
• 用纯CSS创建一个三角形的原理是什么?
把上、左、右三条边隐藏掉(颜色设为 transparent)
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
• 一个满屏 品 字布局 如何设计?
剩余54页未读,继续阅读
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/default.jpg!1)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/user-vip.1c89f3c5.png)
icwx_7550592
- 粉丝: 18
- 资源: 7163
上传资源 快速赚钱
我的内容管理 收起
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
会员权益专享
最新资源
- 京瓷TASKalfa系列维修手册:安全与操作指南
- 小波变换在视频压缩中的应用
- Microsoft OfficeXP详解:WordXP、ExcelXP和PowerPointXP
- 雀巢在线媒介投放策划:门户网站与广告效果分析
- 用友NC-V56供应链功能升级详解(84页)
- 计算机病毒与防御策略探索
- 企业网NAT技术实践:2022年部署互联网出口策略
- 软件测试面试必备:概念、原则与常见问题解析
- 2022年Windows IIS服务器内外网配置详解与Serv-U FTP服务器安装
- 中国联通:企业级ICT转型与创新实践
- C#图形图像编程深入解析:GDI+与多媒体应用
- Xilinx AXI Interconnect v2.1用户指南
- DIY编程电缆全攻略:接口类型与自制指南
- 电脑维护与硬盘数据恢复指南
- 计算机网络技术专业剖析:人才培养与改革
- 量化多因子指数增强策略:微观视角的实证分析
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)