admin管理员组文章数量:1530085
一阶段面试题：
-
CSS浮动怎么理解的
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，也就是脱离文档流，所以文档的普通流中的块框表现得就像浮动框不存在一样。一般使用float来实现浮动，联系=》清除浮动的相关方法。27题 -
绝对定位相对定位怎么理解
absolute：绝对定位，将对象从文档流中拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据根元素(html)《浏览器》进行定位，而其层叠通过z-index属性定义。
relative ：相对定位，该对象的文档流位置不动，将依据right，top，left，bottom（相对定位）等属性在正常文档流中偏移位置；其层叠通过z-index属性定义 -
块元素和行内元素、行内块什么区别
1.行内元素
行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体和标签，还有和这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。
行内元素特征：(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行
2.块状元素
块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。
块状元素特征：(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下
3.行内块状元素
行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。
行内块状元素特征：(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右
这三者是可以互相转换的，使用display属性能够将三者任意转换：
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素 -
Css如何实现盒子水平垂直居中
第一种：
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
第二种：
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
第三种：
.middle{
width:100px;
height:100px;
background-color:tomato;
/* 水平垂直居中*/
position: absolute;
top:50%;
left:50%;
margin: -50px 0 0 -50px;
}
第四种：
#container{
width:100%;
height: 100%;
/* 子元素middle垂直居中 */
display: flex;
justify-content: center; // 水平居中
align-items:center; // 垂直居中
}
第五种：
#container{
width:100%;
height: 100%;
display: flex;
}
.middle{
width:100px;
height:100px;
background-color:tomato;
margin:auto;
} -
Href 和 src的区别
1.href：Hypertext Reference的缩写，超文本引用，它指向一些网络资源，建立和当前元素或者说是本文档的链接关系。在加载它的时候，不会停止对当前文档的处理，浏览器会继续往下走。常用在a、link等标签。
2.src：source的所写，表示的是对资源的引用，它指向的内容会嵌入到当前标签所在的位置。由于src的内容是页面必不可少的一部分，因此浏览器在解析src时会停下来对后续文档的处理，直到src的内容加载完毕。常用在script、img、iframe标签中，我们建议js文件放在HTML文档的最后面。如果js文件放在了head标签中，可以使用window.onload实现js的最后加载。
总结：href用于建立当前页面与引用资源之间的关系（链接），而src则会替换当前标签。遇到href，页面会并行加载后续内容；而src则不同，浏览器需要加载完毕src的内容才会继续往下走。 -
Px和Rem的区别
px：绝对单位，页面按精确像素展示。
rem：相对单位， 相对根节点html的字体大小来计算，CSS3新加属性。
7.常见的浏览器内核和前缀有哪些？ 微信的浏览器内核是什么
Trident内核：IE浏览器以Trident作为内核引擎。（遨游，世界之窗，腾讯TT……都是IE）。-ms-
Trident内核最慢。
Gecko内核：开放源代码，以C++编写的网页排版引擎，是跨平台的。
FireFox是基于Gecko开发。-moz-
presto内核（Opera前内核）（已废弃）：该款引擎的特点就是渲染速度的优化达到了极致，然而代价却是牺牲了网页的兼容性。-o-
Webkit内核：（Safari内核，Chrome内核原型，开源），它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。-webkit-
Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时也支持BSD系统的开发。所有Webkit也是自由软件，同时开放源代码。在安全方面不受IE，FireFox的制约。所以，Safari浏览器在国内还是很安全的。
微信浏览器内核-------QQ浏览器X5内核
也就是说微信、手机QQ内置浏览器都是腾讯的QQ浏览器。
X5内核是腾讯基于开源Webkit优化的浏览器渲染引擎，目前除了微信、手机QQ、京东等有30多款APP内置浏览器都是基于X5内核。
-
html5中新增哪些api
多媒体：baivideo、audio、
游戏：canvas、webgl、
存储du：localstorage、sessonstorage、websql、indexedDB
网络：websocket -
html5新增哪些标签
h5是html的最新版本，是14年由baiw3c完成标准制du定。增强了，浏览zhi器的原生功能，减少浏览器插件（eg：flash）的应用，提dao高用户体验满意度，让开发更加方便。- h5新增的标签
新增元素
说明
video 表示一段视频并提供播放的用户界面
audio 表示音频
canvas 表示位图区域
source 为video和audio提供数据源
track 为video和audio指定字母
svg 定义矢量图
code 代码段
figure 和文档有关的图例
figcaption 图例的说明
main
time 日期和时间值
mark 高亮的引用文字
datalist 提供给其他控件的预定义选项
keygen 秘钥对生成器控件
output 计算值
progress 进度条
menu 菜单
embed 嵌入的外部资源
menuitem 用户可点击的菜单项
menu 菜单
template
section
nav
aside
article
footer
header -
移动端怎么做适配
一：meta viewport
meta viewport属性主要是让viewport的宽度等于当前设备的宽度，也可以按照需求来限制用户是否可以缩放。
-
你们以前移动端是怎么写的
布局，写样式，写功能，上线 -
你们以前移动端是怎么布局的
1.固定meta视图
1
这种写法中，利用meta标签，将视图宽度定位了750px，固定值，也就是ios6的标准，然后css也是基于750px的设计稿进行布局。
优点：前端开发十分快速，都是死值。
缺点：匹配不完全，手机像素高于这个的，显示这个效果，不理想状态；低于这个状态的，不兼容这个状态；固定宽在做项目的时候由于每个手机屏幕的高度不同需要有一个最小的内容区域。
2.rem布局
rem是一种基于页面根元素的布局方式
当手机屏幕大小改变了，只要改变对应的页面根元素，就可以实现页面的缩小放大。按照750px的设计稿，进行布局的时候 可以在head中添加下图的一段j，监听屏幕改变，从而动态改变页面根元素的fonsize大小，对页面进行缩放改变
换句话说 设置根元素 fontsize=16px 那么 1rem=16px，所以根据屏幕大小 而动态改变 fontsize的值，从而做到 移动端rem适配效果。
优点：引入js后，通过动态修改根元素fontsize,根据手机屏幕 自动缩放
缺点：head中 就要引入js，会有一点加载影响
3.meta媒体查询 动态设置，几个手机的比例，进行对应匹配；
meta标签，通过媒体查询 按照不同手机的像素宽高不同，进行条件匹配
优点：根据不同手机定制不同css，达到完美展示
缺点：需要写匹配很多手机，写很多套css，对前端工作量比较大
4.改变缩放比例，进行布局，类似于第2种方式，2是根据设备宽高对根元素进行font-size的动态改变，4这种方式则是通过改变meta种缩放比例，来进行动态改变页面的
这里有一个点需要说明
像素比 window.devicePixelRatio = 设备像素/css像素
（补充一下 分辨率 和像素的 内容： 某博客内容
高分辨率：eg每一毫米5像素点，像素点越多，色块越多，页面越清晰
低分辨率：eg每一毫米3像素点，像素点越少，色块越少，页面越模糊
肉眼看得请不清晰，跟屏幕实际尺寸的大小没关系，而跟单位长度的像素点有关，低分辨率的放在大屏上 也只是一个 放大的不清楚的画面而已，对于前端开发来说，设计图是1920或者是1366并不代表是宽度。
所以当你的网页完全按照设计图使用px来实现的话，有可能出现两种情况：
- html宽度用了设计图1366px，但无奈到了1024的电脑或者手机的时候，就会出现了横向滚动条
- html宽度用了设计图1366px，到了1920的电脑上，就会出现大量的留白
5.百分比布局
将整个页面 按照百分比 进行布局 对于宽度 比较好把握 但是 高度还是需要具体的值
-
你对语义化标签是怎么理解的？有什么好处？
什么是标签语义化？
<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
标签语义化有什么意义？
为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。 -
Css3动画有哪些
2D：transform属性，包括位移translate()、旋转rotate()、缩放scale()、倾斜skew()
3D：transform-style属性，有两个属性值：flat和preserve-3d，包括3D位移translate3d(tx,ty,tz)、3D旋转rotate3d(x,y,z,a)、3D缩放scale3d(sx,sy,sz) -
使用 CSS 预处理器吗？喜欢哪个？
工作流程：
各种预处理器语法不一样，但最终工作流程是一样的，以Sass为例。
以Sass提供的语法规则编写样式代码
经过编译器把Sass编写的代码转换成标准的CSS代码
浏览器加载解析转换后的CSS样式（浏览器只能解析标准的CSS代码，而不能是Sass等）
主流CSS预处理器：
Sass，2007，最早最成熟的CSS预处理器，有两种语法，分别以 .sass 和 .scss 为扩展名。SCSS是Sass 3引入的新语法，完全兼容CSS3，并继承了Sass的强大功能，和CSS语法结构更接近
Less，2009，受Sass影响大，以 .less 为扩展名
Stylus，2010，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，以 .styl 为扩展名
可以在CSS预处理器中：使用变量、简单逻辑判断、函数等基本编程技巧。 -
CSS优化、提高性能的方法有哪些？
1，首推的是合并css文件，如果页面加载10个css文件，每个文件1k，那么也要比只加载一个100k的css文件慢。
2，减少css嵌套，最好不要套三层以上。
3，不要在ID选择器前面进行嵌套，ID本来就是唯一的而且人家权值那么大，嵌套完全是浪费性能。
4，建立公共样式类，把相同样式提取出来作为公共类使用，比如我们常用的清除浮动等。
5，
版权声明：本文标题：史上最全最新前端面试题（不定期更新，有问题欢迎评论区对线） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1726400230a1069224.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论