作者:苏南South
来源:CSDN
原文:https://blog.csdn.net/weixin_43254766/article/details/83119712
本文为转载文章,可以访问原文做收藏
前言
前段时间面试(包括阿里巴巴的电话面试),遇到过一些面试题,且面试中出现机率较高的提问/笔试,有些答的不是很好挂掉了,今天终于有时间整理出来分享给大家,希望对大家面试有所帮助,都能轻松拿offer。
主要分三部分:
html
、css
、js
;react/vue等都归类于js,内容来源于面试过程中遇到的
、在复习过程中看到认为值得加深巩固
、群友交流分享
的;如有理解的错误或不足之处,欢迎留言纠错、斧正,这里是@IT·平头哥联盟,我是首席填坑官
∙苏南(South·Su) _~
HTML
1、什么是盒子模型?
有些面试官会问你对盒子模型的理解,在我们平时看到的网页中,内部的每一个标签元素它都是有几个部分构成的:内容(content)、外边距(margin)、内边距(padding)、边框(border),四个部分组成,当你说完这些面试官是不会满意这个答案的,因为还有一个重点(IE盒模型和标准盒模型的区别)———IE盒模型的content包括border、padding
2、页面导入样式时有几种方法,它们之间有区别?
link
标签引入,也是当下用的最多的一种方式,它属于XHTML标签,除了能加载css外,还能定义rel、type、media等属性;@import
引入,@import是CSS提供的,只能用于加载CSS;style
嵌入方式引入,减少页面请求(优点),但只会对当前页面有效,无法复用、会导致代码冗余,不利于项目维护(缺点),此方式一般只会项目主站首页使用(腾讯、淘宝、网易、搜狐)等大型网站主页,之前有看到过都是这种方式,但后来有些也舍弃了
小结:
link
页面被加载的时,link会同时被加载,而@import
引用的CSS会等到页面被加载完再加载,且link是XHTML
标签,无兼容问题; link支持动态js去控制DOM节点去改变样式,而@import不支持,
3、简单讲述一下块元素、内联元素、空元素有哪些,它们之间的区别?
- 行内元素有:a、b、span、img、input、select、textarea、em、img、strong(强调的语气);
- 块级元素有:ul、ol、li、dl、dt、dd、h1、h2、h3、h4…p、section、div、form等;
- 空元素: input type=“hidden”/>、br>、hr>、link>、meta>;
小结:块元素总是独占一行,margin对内联元素上下不起作用;
4、说说 cookies,sessionStorage 、 localStorage 你对它们的理解?
- cookie是网站为了标示用户身份而储存在用户本地终端上的数据(通常经过加密),cookie数据始终在同源的http请求中携带,记会在浏览器和服务器间来回传递。
- sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
- 大小: cookie数据大小不能超过4k,sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
- 时效:
localStorage
存储持久数据,浏览器关闭后数据不丢失除非用户主动删除数据或清除浏览器/应用缓存;sessionStorage
数据在当前浏览器窗口关闭后自动删除。 cookie
设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭部分面试官可能还会再深入一些:
1)、如何让cookie浏览器关闭就失效?——不对cookie设置任何正、负或0时间的即可;
2)、sessionStorage在浏览器多窗口之间 (同域)数据是否互通共享? ——不会,都是独立的,localStorage会共享;
3)、能让localStorage也跟cookie一样设置过期时间?答案是可以的,在存储数据时,也存储一个时间戳,get数据之前,先拿当前时间跟你之前存储的时间戳做比较 详细可看我之前写的另一篇分享(小程序项目总结 )。
5、简述一下你对HTML语义化的理解 ?
语义化是指根据内容的类型,选择合适的标签(代码语义化),即用正确的标签做正确的事情; html
语义化让页面的内容结构化,结构更清晰,有助于浏览器、搜索引擎解析对内容的抓取; 语义化的HTML在没有CSS
的情况下也能呈现较好的内容结构与代码结构; 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO
;
CSS
1、position的static、relative、absolute、fixed它们的区别?
absolute
:绝对定位,元素会相对于值不为 static 的第一个父元素进行定位(会一直往父级节点查找),且它是脱离正常文档流、不占位的;fixed
:同样是绝对定位,但元素会相对于浏览器窗口进行定位,而不是父节点的position (IE9以下不支持);relative
:相对定位,元素相对于自身正常位置进行定位,属于正常文档流;static: position的默认值,也就是没有定位,当元素设置该属性后( top、bottom、left、right、z-index )等属性将失效;inherit
:貌似没用过,查了一下文档“规定从父元素继承 position 属性的值”;
2、如何让一个元素垂直/水平(垂直水平)都居中,请列出你能想到的几种方式?
- 水平垂直居中 —— 方式一
.div-demo{
width:100px;
height:100px;
background-color:#06c;
margin: auto;
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
水平垂直居中 —— 方式三,(新旧伸缩盒兼容
.div-demo{
width:100px;
height:100px;
background-color:#06c;
margin: auto;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}
水平垂直居中 —— 方式三,(新旧伸缩盒兼容)
<body class="container">
<div class="div-demo"></div>
<style>
html,body{
height:100%;
}
.container{
display: box;
display: -webkit-box;
display: flex;
display: -webkit-flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.div-demo{
width:100px;
height:100px;
background-color:#06c;
}
</style>
</body>
3、项目中有用纯CSS样式写过 三角形icon吗?
<body class="container">
<div class="div-angles"></div>
<div class="div-angles right"></div>
<div class="div-angles bottom"></div>
<div class="div-angles left"></div>
<style>
html,body{
height:100%;
}
.container{
display: box;
display: -webkit-box;
display: flex;
display: -webkit-flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.div-angles{
width: 0;
height: 0;
border-style: solid;
border-width:30px;
width:0px;
height:0px;
border-color: transparent transparent #06c transparent;
}
.right{
border-color: transparent transparent transparent #06c ;
}
.bottom{
border-color: #06c transparent transparent ;
}
.left{
border-color: transparent #06c transparent transparent;
}
</style>
</body>
作者:苏南South
来源:CSDN
原文:https://blog.csdn.net/weixin_43254766/article/details/83119712
本文为转载文章