2020 最新前端面试题目（二）
解决HTML5新标签的兼容性：
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>//解决IE6-8支持HTML5新元素
<script src="respond.js"></script>//解决IE6-8对css Media Query//媒体查询
<![endif]>
a:hover，a:active失效的问题？(lvha)
现象：
a标签的伪类选择器，在点击之后，一直保持为a:visited的样式。a:hover，a:active的css失效了。
解决方式：
a:link {color:black}
a:visited{color:pink}
a:hover {color: blue}
a:active {color: green}
将a:visited样式写在前面，一种顺序为：a:link{} a:visited{} a:hover{} a:active{}。
如果写成这样：a:link{} a:hover{} a:active{} a:visited{} 可能是a:visited{}将a:hover{} a:active{}的样式给覆盖了。
为了产生预期的效果，在CSS定义中，a:hover必须位于a:link和a:visited之后，a:active必须位于a:hover之后。
选择器优先级？
内联样式>内部样式>外部样式
！important>内联样式（1000）>id(100)>class(10)>标签》继承样式
注意：
1、!important声明的样式优先级最高，如果冲突再进行计算。
2、如果优先级相同，则选择最后出现的样式。
3、继承得到的样式的优先级最低。
文本怎么自动换行？
word-wrap:允许对长的不可分割的单词进行分割并换行到下一行。
word-wrap:normal
word-wrap:break-word
box-sizing模型？
content-box:默认
padding和border不包含在元素的宽度内，元素的实际宽度为：width+border+padding
border-box:
padding和border包含在元素的宽度内，元素的实际宽度为：width
js中创建自定义对象 ?
var f=function(){}
new Object()
function f()
this?
指向调用它的对象，如果没有，就指window
HTML5表单新元素？
date time color number range email url search
5种常见的HTTP状态码及意义？
200:请求成功
301、302：永久重定向/暂时重定向
400：请求格式错误
404：找不到资源
500：服务器内部错误
怎么让一个图片在一个DIV中垂直居中对齐？
父元素使用相对定位
子元素使用绝对定位
怎么让文字垂直居中对齐？
一行文字父元素不固定：padding:20px
父元素固定，多行文字：父元素：width:200px display:table 子元素:vertical-align:middle display:table-cell
如何让图片跟文字在居中显示：
父元素设置为vertical-align:middle
浏览器兼容？
1、不同的浏览器默认样式不一样：padding margin
2、IE6低版本中，元素的调试包含内容，其他浏览器如果内容超出高度就会显示，可以设置overflow:hidden
3、子元素设置上外边距的时候，父元素需要设置边框或者上外边距，IE显示正常，其他浏览器就会变成父元素的外边距
页面优化/站点优化？
1、CSS sprites:将多个背景图合并到一个图片上，再通过background-image 和background-position进行调整//会减少HTTP请求，加快页面显示速度
2、代码压缩/css/js yui compressor
数组的方法：
join concat
push pop
unshift shift
slice
splice
正则表达式：
\d数字
\s空白字符
\w数字、字母、下划线
？ 0-1 或 改为懒惰模式
* 0-n
+ 1-n
^ 开关
$ 结尾
\b 边界
new 一个对象具体干了什么？
第一步是建立一个新对象；
第二步将该对象内置的原型对象设置为构造函数prototype引用的那个原型对象；
第三步就是将该对象作为this参数调用构造函数，完成成员设置等初始化工作。
如何判断一个对象是否为数组？
typeof "sflkj"
typeof无法判断数组跟对象
[] instanceof Array
Array.prototype.isPrototypeOf([])
Array.isArray([])
获取一个选项卡的值？
<select name="sl" id="s1" onchange="showinfo()">
<option value="1">aa</option>
<option value="2">bb</option>
</select>
<script>
function showinfo(){
var sel=document.getElementById("s1");
var i=sel.selectedIndex;
var result=sel.options[i].value;
}
</script>
浏览器对象有哪些？
navigator
history
window
location
screen
event
document
window对象的常用方法？
alert
confirm
prompt
close
js绑定事件：
btnObj.addEventListener("click",function(){})
jquery 把变量$的控制权交给其他JS库
jQuery.noConflict();
jQuery(function($){})
jQuery 遍历？（$.each()方法）
<ul>
<li>asdf</li>
<li>luili</li>
<li>234</li>
</ul>
<script>
var m=$("ul li");
m.each(function(i){
if(i==0){
$(this).css("font-size","18px")
}
})
</script>
怎么把一个JSON字符串转换成一个js对象？
var jt='{"name":"tom","age":40}'
var jsObj=JSON.parse(jt)//{"name":"tom","age":40}
把一个js对象转换成一个josn字符吕？
var jt={"name":"tom","age":40}
var jsObj=JSON.stringify(jt)//'{"name":"tom","age":40}'
表单序列化成字符串：serialize（）
序列化成json对象：serializeArray()
手机端头部怎么写？
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
不通过插件实现自响应布局？
CSS＋宽度百分比＋浮动＋媒体查询技术就可以手动实现响应式布局
CSS的媒体查询？
@media screen and(min-width:990px){//(一个css文件内)
#id{
float:left
}
}
@media screen and(min-width:700px) and (max-width:989px){
#id{
float:left
}
@media screen and(max-width:699px){
}
angularjs？
采用MVC模式
数据绑定
依赖注入
模块化设计
初始化一个模型数据
ng-bind="name"
ng-repeat="data in array"
<html ng-app="myApp">
<div ng-controller="myCtrl">
</div>
angular.module("myApp",["ng"]){
.controller("myCtrl",function($scope){
$scope.newsTitle="hello"
})
}
什么是高内聚，低耦合？
高内聚：一个模块内的元素的关系赵紧密越好
低耦合：不同模块间的关系尽量不要有关联
发表评论 (审核通过后显示评论)：