1.css盒模型
2.css选择器有哪些？那些属性可以继承？优先级算法如何计算？css3新增伪类有哪些？
| 选择器 | 权重 |
| 通配符选择器 | 0 |
| 标签选择器 、 为元素选择器 | 10 |
| class选择器、伪类选择器、属性选择器 | 100 |
| id选择器 | 1000 |
| 行间样式 | 10000 |
| @import | 无穷大 |
.wrapper,.box{} ---> 并列选择器
.wrapper>.box{} --->直接子元素选择器
.wrapper .box{} ---->后代选择器
可以继承的属性 color、font-size等字体属性 text-indent、text-align、line-height等文本属性 visibility cursor等
样式的 优先级 就是选择器的权重相加 显示权重大的 样式
新增伪类
p:first-of-type 当前层p标签的第一个
p:last-of-type 当前层p标签的最后一个
p:only-of-type 所有p标签中 作为唯一子元素的p
div:nth-child(n) div子元素中的第n个
div:last-child div的最后一个子元素
p:not 除了p的其他所有标签
input:enable 所有启用的input
input:disable 所有禁用了的input
input:checked 所有被选中的 input标签
:root 根元素html
::selection 用户选中的部分
3.用css实现 左右固定，中间自适应的三栏布局
CSS
*{ margin: 0; padding: 0; } .wrapper{ padding: 0 200px; } .center,.left,.right{ height: 200px; float: left; } .left,.right{ width: 200px; background: pink; position: relative; } .center{ background: blue; width: 100%; } .left{ margin-left: -100%; left: -200px; } .right{ margin-left: -200px; right: -200px; }
html
<div class="wrapper"> <div class="center"></div> <div class="left"></div> <div class="right"></div> </div>
4.说明浮动产生的效果,至少列举三种清除浮动的方法
元素浮动之后，就脱离当前同一层的文本流，浮动元素根据设置不同的浮动方向，浮动到父元素的边界，或者其他浮动的元素
清除浮动的方法
1.最简洁的方法
在需要清除浮动的元素后面添加一个 div 并设置 css clear:both
2.給父级设置 overfloat：hidden
3.常规方法
.clearFloat:after{
display:block;
clear:both;
content:'';
visibility:hidden;
height:0;
}
.clearFloat{
zoom:1; //兼容IE6
}
5.列出display的值,说明他们的作用。positioin的值，relative和absolte定位原点是
| display | 作用 |
| block | 将元素变成块级元素 |
| inline | 将元素变成行内元素 |
| none | 使元素不存在 |
| inline-block | 将元素变成行内块元素 |
| inherit | 继承父级的display |
| table | 相当于 <table></table> |
| table-row | 相当于<tr></tr> |
| table-cell | 相当于<td></td>或者<dd></dd> |
| list-item | 相当于 列表元素 |
position 有 absolute 、 relative 、fixed 、 inherit
relative 是相对于自身原本在文本流中的位置进行定位
absolute 是根据最近有定位的父级进行定位的
6.前端页面有哪三层结构? 分别是什么？作用是什么？
结构层 html 页面的结构布局
样式层 css 前端页面的样式
行为层 js 页面交互
7.css中可以通过哪些属性定义使DOM元素不显示在浏览器可视范围内
postion 的各种定位 可以将元素 移出屏幕
visibility:hidden 可以设置dom的透明度 为透明的，但是还占据原来的位置 还存在
opacity:0 设置Dom元素的不透明度 为0 即使DOM透明 与Visibility:hidden效果相同
display:none 使元素消失，不存在与文档流中
8.超链接访问后hover样式就不出现的问题是什么？如何解决？
a标签的4个状态
link 默认状态
hover 鼠标悬停
active 点击的瞬间
visited 访问过的
。。。。上网上查的 试了好久 并没有试出来 hover 不好使的情况
9.rgba()和opacity的透明效果有什么不同
rgba() 是设置在 dom元素背景颜色上的 不会影响子元素
opacity 设置的透明度是相对 dom元素整体的 会继承给子元素
10.CSS中可以让文字在垂直和水平方向上重叠的两个属性是什么？
我以为是 line-height 和 text-indent
11.display:none 与 visilibity：hidden的区别是什么
display:none;是 是元素消失于文档流中，不存在于Dom结构中
visilibity:hidden 是设置的 元素的 透明度 为透明 而元素仍然存在于 DOM结构中 任然占据原来的位置
12.知道css有个content属性么？有什么作用？如何应用？
可以配合为元素 :after/:befor 设置为元素里的内容
a:after{content:attr('href')}
13.编写函数，实现冒泡排序
var arr = [12,123,345,21,88]; function sort (arr){ var cut = 0, len = arr.length - 1; for(var i = 0; i < len; i++) { for(j = i; j < len; j++){ if(arr[j] > arr[j+1]) { cut = arr[j]; arr[j] = arr[j+1]; arr[j+1] = cut; } } } return(arr) } var after = sort(arr); console.log(after);
14.谈谈你对闭包的理解，写一个简单的闭包实例
由于js函数作用域，在函数外部无法访问函数内部的东西，通过在函数内添加一个相对于这个函数是子函数，也就是可以读取这个函数的内容的函数，return这个函数 就可以在最外层函数外面访问函数内的内容了
形象的解释 闭包就是 内部函数和外部函数的一道桥梁
function f1(){ var n = 666; function f2() { console.log(n); } } f1()(); //666
15.闭包与定时器混合考验
//修改如下代码，让循环输出结果依次为1，2，3，4，5 for(var i=1; i<=5; i++) { setTimeout(function timer(){ console.log(i); },i*1000) }
修正代码
for(var i = 1; i <=5; i++) { (function(j){ setTimeout(timer = () => { console.log(j); }, j*1000); })(i) }
16.扁平化多维数组arr=[1,3,4,5[6,[0,1,5],9],[3,5,[1,5]],[5]] ;
扁平化就是将多维数组编程一维的
方法一 遍历数组
function bianPingHua(arr){ var newArr = []; arr.forEach( function(item){ if(Array.isArray(item)){ newArr = newArr.concat(bianPingHua(item));//concat是将item的每一位 拼接到newArr后面 且不改变newArr 所以要用赋值
}else{ newArr.push(item);//在数组最后添加一位 这里如果是一个数组，任然相当于 newArry的一位 } } ); return newArr; } var oEnd = bianPingHua(arr); console.log(oEnd);
方法二 toString与split
var newArr = arr.toString().split(','); console.log(newArr);
17.谈谈你对this指向的理解
普通对象、计时器、定时器的this 指向window
对象中的 方法中的this 指向的就是这个对象
绑定事件执行时this指向dom
改变this指向的方法 call、apply 、bind
function Foo () { } function son (){ console.log(this); } son.call(Foo); son.apply(Foo); son.bind(Foo)();
18.说说你对面向对象的理解，然后写一段js代码示例
一、继承
一个类继承另一个类，可以实现代码复用，减少冗余。
二、封装
将函数封装起来，隐藏内部信息，用户无需知道对象内部的方法实现的过程，但可以使用对象的方法
三、多态
同一函数，可以适应多种传参
19.javascript的typeof返回类型有哪些
number 、string 、 function、 boolean、 undefind、 object
20.数组方法 pop(),push(),unshift(),shift()
这四种方法都改变原数组
pop()在最后一位删除一位 传参无效
push()在最后一位添加几位 可以用 , 传多个参数 返回值是 length
unshift()在第一位添加几位 也可以用 , 传多个参数 返回值是length
shift() 在第一位删除一位 传参无效
21.字符串包装类方法 substr()、substring()、slice()
sbustr() 传两个参数 截取的起始位置，截取的长度
sbustring() 传两个参数 较小的为起始位置， 较大的为截止位置 ， （留头去尾）
slice() 传一个参数，就是从第几位向后截取 若有负数就从字符串的尾部向前数
传两个参数 前始后终 截取数组