前端工程师面试题10条必会笔试题

小咪咪 2024-03-26 11:34 88阅读 0赞

**布局 左边20% 中间自适应 右边200px 不能用定位**

答案：圣杯布局/双飞翼布局或者flex

**什么叫优雅降级和渐进增强？**

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”观点则认为应关注于内容本身。

内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

**简述一下src与href的区别**

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。<script src =”js.js”></script>当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加<link href=”common.css” rel=”stylesheet”/>那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

**z-index是什么？在position的值是什么时可以触发？**

答案:absolute,relative,fixed, sticky

**什么是标准文档流？**

文档流指的是元素排版布局过程中，遵循于从上向下，从左向右的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

分为两种等级：块级元素和行内元素；

块级元素：

1).霸占一行，不能与其他任何元素并列

2).能接受宽、高

3).如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽

行内元素：

1).与其他元素并排

2).不能设置宽、高。默认的宽度就是文字的宽度

在HTML中，标签分为：文本级和容器级；

文本级：p、span、a、b、i、u、em

容器级：div、h系列、li、dt、dd

**简述选择器~和+的区别**

答案:都是层级选择器

相邻兄弟选择器： E + F, 选中的仅是一个元素。同级并且F元素在E元素的后面。

通用兄弟选择器：E ~ F 选中的是与E相邻的后面的兄弟元素f

**flex中元素的margin是否会合并**

答案:不会合并

**<div><div></div></div>,父元素和子元素宽高不固定，如何实现水平垂直居中**

答案:

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    html,body{height: 100%;}
    body{
    display: flex;
    }
    section{
    background: pink;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    
    }
    
    article{
    background: blue;
    
    }
    
    </style>
    </head>
    <body>
    <section>
    <article>123</article>
    </section>
    
    </body>
    </html>

**简述title与h1的区别，b与strong的区别，i与em的区别**

1、title是网站header部分的内容是网站的标题，而h表示body内的标题

2、但从视觉上效果观看b与strong、i与em是没有区别的，唯一区别是搜索引擎检索的时候搜索引擎可以识别strong、em标签、而不能识别b与i标签

**请问苹果原生浏览器中默认样式如何清除，例如button，input的默认样式（谷歌浏览器没有问题）**

input[type="submit"],
    input[type="reset"],
    input[type="button"],
    button {
     -webkit-appearance: none;
    }