html、css、js全阶段试题1. 行内元素有哪些？块级元素有哪些？行内元素如何转换成块级元素？ 2. css代码，有

1. 行内元素有哪些？块级元素有哪些？行内元素如何转换成块级元素？

行内元素

display: inline
内容决定元素所占位置
不可修改宽高
a\span\em\strong

行级块元素

display: inline-block
内容决定元素所占位置
可以修改宽高
img\input

块级元素

display: block
独占一行
可以修改宽高
div\p\ul\ol\li\form\body

2. css代码，有几种常见的引入方式

1 行间样式
2 页面级css
3 外部文件引入,通过link标签引入
4 @import

3. link和@impoort有什么区别

1 从属关系区别。@import是css提供的语法规则，只有导入样式的作用；link是HTML提供的标签，不仅可以加载css文件，还可以定义RSS、rel连接属性、引入网站图标等。
2 加载顺序区别。页面加载时，link标签引入的css被同时加载；@import引入的css将在页面加载完毕后加载
3 兼容性区别。@import只有在IE5+才能识别；link标签作为html元素，不存在兼容性问题
4 DOM可控性区别。可以通过JS操作DOM，来控制link标签改变样式，无法使用@import的方式插入样式。

4. web标准指的是什么

div+css形式
结构、行为、样式相分离
一个高效的网页体系

5. body默认的maring

6. 用css、html编写一个两列布局的网页，要求右侧宽度为200px，左侧自动扩展

1 float+margin 固定宽度的元素放前面
2 absolute定位布局
3 flex布局

7. 元素居中

固定宽高

1 absolute+margin负值

不固定宽高

1 absolute + transform
2 absolute + margin: auto
3 flex + justify-content + align-items
4 flex + margin
5 grid + align-items + justify-content (网格布局)

8. form表单中method属性常用哪些值，他们有什么区别

get/post
get通过拼接url尾部传递信息，相对post安全性较低，长度受url长度限制，只能传递字符串，get请求一般用来获取数据
post通过http请求主体信息发送数据，相对get安全性较高，请求信息几乎没有限制，可以传递很多类型数据，一般用来传输数据

9. 三栏布局

圣杯布局

float + padding + margin负值 + relative

<div>
    <div></div>
    <div></div>
    <div></div>
</div>

双飞翼布局

float + margin + margin负值 + relative

<div>
    <div>
        <div></div>
    </div>
    <div></div>
    <div></div>
</div>

10. 去掉li默认的样式、去掉a元素的下划线

list-style: none; 去li列表的样式
text-decoration: none; 去下划线

11. typeof 返回的结果

string\number\boolean\undefined\object\function

12. call、apply、bind方法的用途和区别

改变this指向
call、apply传参列表不同
call和bind都是一个个参数，apply是数组
bind 返回一个修改this指向之后的新函数

13. 封装一个Ajax

// flag 表示是否异步，默认异步
// method 请求方法，大写字符串
function ajax(method, url, data, callback, flag = true) {
    var app = null
    if (window.XMLHttpRequest) {
        app = new XMLHttpRequest()
    } else {
        app = new ActiveXObject('Microsoft.XMLHTTP')
    }
    method = method.toUpperCase()
    if (method === 'GET') {
        app.open(method, url + '?' + data, flag)
        app.send()
    } else if (method === 'POST') {
        app.open(method, url, flag)
        app.setHeader('Content-type', 'application/x-www-form-urlencoded')
        app.send(data)
    }
    app.onreadystatechange = function () {
        if (app.readyState === 4) {
            if (app.status === 200) {
                callback(app.responseText)
            }
        }
    }
}

14. 数组去重

Object.prototype.unique = function(arr) {
    var obj = {}
    var newArr = []
    for (var i = 0; i < arr.length; i++) {
        if (!obj[arr[i]]) {
            obj[arr[i]] = true
            newArr.push(arr[i])
        }
    }
    return newArr
}

15. 如今有⼀个ul，⾥⾯有⼗亿个li，要求点击li触发事件，弹出对应li的内容

// 原理：事件冒泡机制，获取事件源对象
ul.onclick = function(e) {
    var event = e || window.event;
    var target = event.target || event.srcElement
    console.log(target.innerHTML)
}

16. 如何阻止事件冒泡和事件默认事件

e.stopPropergation()
e.cancelBubble = true
e.preventDefault()
e.returnValue = false
句柄：return false

17. 请利⽤Javascript取⾮⾏间样式，要求兼容性各个浏览器

function getStyle(elem, prop) {
    if (elem.currentStyle) {
        return elem.currentStyle[prop]
    } else {
        return window.getComputed(elem, null)[prop]
    }
}

18. 构造函数new的过程发生了什么

隐式的创建var this = Object.create(Parent.prototype)
return this

19. this指向问题

1 全局预编译，this指向window
2 函数预编译，this指向window
3 对象调用，谁调用this指向谁
4 构造函数，this指向实例对象
5 箭头函数，this指向构造函数声明时所处作用域的this
6 call\apply\bind改变this指向
7 定时器，回调不是用箭头函数this指向window，回调是箭头函数，this指向定时器所处作用域的this

20. 函数预编译的过程

1 找形参和变量，赋予undefiend
2 将实参和形参值相统一
3 找函数声明，并赋予函数体

21. 原型链实现继承的方式：圣杯模式

Object.prorotype.inherit = function (target, origin) {
    function F() {}
    return function () {
        F.prototype = origin.prototype
        target.prototype = new F()
        target.prototype.constructor = target
        target.prototype.uber = origin.prototype // 最终原型来自谁
    }
}

22. 继承方式

23. JS深度克隆

function deepClone(origin, target) {
    // target可能没传
    if (!target) {
        target = Object.prototype.toString.call(origin) == '[object Array]'?[]:{}
    }
    for (var prop in origin) {
        if (origin.hasOwnProperty(origin[prop])) {
            // 判断是不是自己的属性而不是原型上的
            if (origin[prop]!==null && typeof(origin[prop]) == 'object') }
                target[prop] = Object.prototype.toString.call(origin[prop])=='[object Array]'?[]:{}
                deepClone(origin[prop], target[prop])
            } else {
                target[prop] = origin[prop]
            }
        }
    }
}