2018前端面试知识整理【上】

时间 2019-11-21

标签前端面试知识整理栏目快乐工作繁體版

原文原文链接

最近又迎来一年一度的求职高峰，本人也是准备找工做，因而整理了一下面试中可能出现的知识点。欢迎补充，本集内容只包含html和css。js下期分享吧。

Doctype做用

声明于html文档中第一行，告知浏览器的解析器用什么文档标准解析这个文档。

页面样式导入时候 link 和 @import有什么区别

link属于xhtml标签，除了加载css外，还能定义Rss，定义rel链接属性等。而@import是css提供的，只能用于加载css。

##介绍一下你对浏览器内核的理解javascript

主要分两部分渲染引擎和js引擎。渲染引擎负责获取网页内容整理信息 js引擎负责解析和执行javascript来实现网页的动态效果。

常见浏览器内核有哪些

谷歌：-webkit-
火狐：-moz-
ie：-ms-
欧鹏：-o-
qq浏览器：双内核 -webkit- -ms-

H5标签的新属性

语义化标签 header footer nav 有利于代码可读性和SEO,语义元素在IE6-8的兼容可使用.css
表单新增功能以往input中的name和value要随着form表单一块儿提交，form表单必须包裹input , 而如今能够经过input的form属性綁定html
视频标签音频标签画布标签java

如何用html和css写三角形 transparent属性为透明

<style> .box{ height:0px; width:0px; border-top:10px solid red; border-left:10px solid transparent; border-right:10px solid transparent; } </style>
    <body>
    <div class="box"></div>
    </body>
复制代码

选择器

伪元素选择器:操做的不是页面中真实的dom元素能够用来处理浮动引起的bug
伪类选择器：操做页面中真实的元素

margin-top 的bug问题

margin-top 的bug问题子元素添加margin-top 父元素也掉下来。
缘由：子元素是父元素的第一个元素子元素没有浮动父元素没有浮动父元素没有内填充父元素没有边框
解决方法1.父元素添加overflow:hidden 2.父元素添加padding-top减去父元素高度子元素删除margin-top

浮动

卡顿问题一个元素高度高于其余元素，就会吧其余元素挤下去
浮动引起的bug：父元素不设置高度，子元素都浮动，浮动的子元素撑不开父元素的高度，
缘由：浮动元素会脱离文档流不在一个平面内
解决办法：1.给父元素添加高度 2.给父元素加overflow：hidden；3.给父元素添加一个最后的子元素添加属性必须是一个块元素因此有时候要加display：block clear：both；

右边宽度固定，左边自适应

<!--方法1-->
    <style> body{ display: flex; } .left{ background-color: rebeccapurple; height: 200px; flex: 1; } .right{ background-color: red; height: 200px; width: 100px; } </style>
    <body>
        <div class="left"></div>
        <div class="right"></div>
    </body>
    
<!--方法2 -->
<style> div { height: 200px; } .left { float: right; width: 200px; background-color: rebeccapurple; } .right { margin-right: 200px; background-color: red; } </style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
复制代码

水平垂直居中

/*方法1*/

    #container{
        position:relative;
    }
     
    #center{
        position:absolute;
        margin:auto;
        top:0;
        bottom:0;
        left:0;
        right:0;
    }
    
/*方法2*/

    #container{
        position:relative;
    }
     
    #center{
        width:100px;
        height:100px;
        position:absolute;
        top:50%;
        left:50%;
        margin:-50px 0 0 -50px;
    }

/*方法3*/
    #container{
        display:flex;
        justify-content:center;
        align-items: center;
    }
复制代码

flex布局用的多么

很少由于要考虑ie9的兼容

##移动端的适配怎么作css3

用css3的媒体查询作响应式布局，根据屏幕的不一样去响应不一样的css

##CSS的transition和animation有何区别web

transition是过渡，由一个状态过渡到另外一个状态，好比高度100px过渡到200px；
transition的做用在于，指定状态变化所须要的时间。
（1）transition须要事件触发，因此无法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
animation是动画，animation有帧的概念，能够设置关键帧keyframe,一个动画能够由多个状态过渡组成。

选择器优先级

权重分为四级，权重值越大优先级越高。
1.内联样式。如：style=“xxx”，权值为1000
2.ID选择器。如：#content，权值为100
3.类，伪类和属性选择器。如：.content,:hover,[attribute],权值为10
4.元素选择器，伪元素选择器。如：div,p,权值为1.
注意：通用选择器（*），子选择器（>)，相邻同胞选择器(+)并不在四个等级中，权值为0.权重值越大优先级越高，相同权值后定义覆盖前面定义的.

如何实现满屏品字布局

上面div宽100%；下面两个div宽度50%；而后用float让其不换行

常常遇到的浏览器兼容性问题缘由，解决方法是什么，

png24位的图片在iE6浏览器上出现背景，解决方案是作成PNG8.
浏览器默认的margin和padding不一样。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

2018前端面试知识整理【上】

最近又迎来一年一度的求职高峰，本人也是准备找工做，因而整理了一下面试中可能出现的知识点。欢迎补充，本集内容只包含html和css。js下期分享吧。

Doctype做用

页面样式导入时候 link 和 @import有什么区别

常见浏览器内核有哪些

H5标签的新属性

如何用html和css写三角形 transparent属性为透明

标签

选择器

margin-top 的bug问题

浮动

右边宽度固定，左边自适应

水平垂直居中

flex布局用的多么

选择器优先级

如何实现满屏品字布局

常常遇到的浏览器兼容性问题 缘由，解决方法是什么，

部份内容来自掘金大牛分享，本人也属于小白，想着写点，加深一下映像，有须要的看一下，欢迎补充！

常常遇到的浏览器兼容性问题缘由，解决方法是什么，