2019.3.4周一
第一次参加招聘，被打回原型，整理一下写在草稿纸上的题目
1.写出你所熟知的行元素，块元素和空(void)元素
行元素：span, a, i, img, button, input, strong, em, lable, code,selet,textarea
块元素：div, p, h1-h6, ul,ol, li, table, form
空元素：br, hr, img, input, link, meta
2.介绍一下盒模型
/* 标准盒模型 */
box-sizing:content-box;
/*IE盒模型*/
box-sizing:border-box;
3.css的选择符和优先级，那些属性可以继承，那些不能
css权重（256进制,多个直接进行相加（派生选择器/父子选择器））
！important（Infinity）>行间样式（1000）>id（100）>class|属性|伪类（10）>标签选择器|伪元素（1）>通配符（0）
CSS继承特性主要是指文本方面的继承，常用的例如：font-size , color , font-family , font-weight , text-align , text-indent , line-height
而关于与盒模型相关的不带继承。具体：
不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before。
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
4.如何水平竖直居中一个div
方案一：
div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，
兼容性：,IE7及之前版本不支持
div{
width: **px;
height: **px;
background: #ff0;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
方案二：
div绝对定位水平垂直居中【margin 负间距】 这或许是当前最流行的使用方法。
div{
width:200px;
height: 200px;
background:#ff0;
position: absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
5.H5的新特性以及移除的元素
HTML5新特性：
图像Canvas
多媒体video、audio
本地存储localStorage、sessionStorage
语义化更好的内容元素aticle、header、footer、nav、section
表单控件date、time、canlendar、url、search
新的技术webworker、websocket、Geolocation
移除的元素：
纯表现的元素u、big、center、strike、tt、font、basefont
框架集frame、frameset、noframes
6.iframe的优缺点
iframe的缺点
1）、页面样式调试麻烦，出现多个滚动条；
2）、浏览器的后退按钮失效；
3）、过多会增加服务器的HTTP请求；
4）、小型的移动设备无法完全显示框架；
5）、产生多个页面，不易管理；
6）、不容易打印；
7）、代码复杂，无法被一些搜索引擎解读。
iframe的优点：
1）.iframe能够原封不动的把嵌入的网页展现出来。
2）.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3）.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4）.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
5）.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)
现在基本上都是用Ajax来代替iframe，iframe已渐渐退出了前端开发。
7.谈一谈移动端和Pc端开发的区别
第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。
第二： 在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的。
第三： 在布局上，移动端开发一般是要做到布局自适应的，我使用的一直是rem布局，感觉很好。
第四： 在动画处理上，PC端由于要考虑IE的兼容性，所以通常使用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲， 而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3， 既简单、效率又高。（整理自知乎）
8.display的值以及含义，position的值以及各自的定位原点
display：
1）、none： 元素不会显示，而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden， 是保留元素的空间的。
2）、inline： display的默认属性。将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，所以一旦将元素的display 属性设为 inline， 设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度（font-size）和padding。
3）、block： 将元素将显示为块级元素，元素前后会带有换行符。设置为block后，元素可以设置width和height了。元素独占一行。
4）、inline-block：行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，又可以设置width和height。
5）、inherit：规定应该从父元素继承 display 属性的值。
position
1）、absolute ：绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。
2）、relative ：相对定位；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
3）、fixed ：固定定位；类似于absolute，但不随着滚动条的移动而改变位置。
4）、static ：默认值；默认布局。
9.css3有那些新特性
1）. CSS3实现圆角（border-radius），阴影（box-shadow），边框图片border-image
2）. 对文字加特效（text-shadow、），强制文本换行（word-wrap），线性渐变（linear-gradient）
3）.旋转,缩放,定位,倾斜：transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
4）. 增加了更多的CSS选择器、多背景、rgba()；
5）. 在CSS3中唯一引入的伪元素是 ::selection ；
6）. 媒体查询(@media)，多栏布局（flex）
10.谈一谈兼容性问题，原因，方法， hack的使用技巧
原因：高版本浏览器用了低版本浏览器无法识别的元素，导致其不能解析
不同浏览器的标签默认的外补丁和内补丁不同
块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
图片默认有间距
标签最低高度设置min-height不兼容
透明度的兼容CSS设置
方法：CSS hack 方法 polyfill 和 shiv
hack的使用技巧:https://blog.csdn.net/u012950186/article/details/38537303
12JS实现继承的方法
https://blog.csdn.net/duyujian706709149/article/details/88078271（本人所写）
13.对this的理解
函数预编译过程 this —> window
全局作用域里 this —> window
call/apply 可以改变函数运行时this指向
obj.func(); func()里面的this指向obj
14.闭包的理解
当内部函数被保存到外部时，将会生成闭包。闭包会导致原有作用域链不释放，造成内存露
一下一幕由于还未学习到，故先不作答
15，JS模块化开发的理解
16.前端库 使用的工具
17.IE与其他浏览器不一样的特性
18.HTTP的状态码及其 含义
19.URL -->界面渲染完成发生了什么，浏览器渲染界面的过程
20.网页加载慢的原因和优化