前端题目(3)（有坑）

1.  行内元素和块级元素

button，select行块级元素

div，ul，ol，li，p，h1，form块级元素

i（物理上斜体），em（强调内容），a，img，iframe，video，label，small，b行内元素

input（chrome表现为inline-block），textarea不同浏览器表现形式不同

替换元素：button，img，input，textarea

 

2. "123abc" - "123"

NaN

Number("123abc") = NaN

 

3. 

Function.prototype.__proto__ === Object.prototype   // true

String.prototype.__proto__ === Object.prototype     // true

Object.prototype.__proto__ === null             // true

Function.prototype === Object.prototype    // false

 

4.

const obj = { a: 1 }

const obj2 = Object.create(obj)

let d = Symbol('d')

Object.defineProperty(obj2, 'b', {value:2})    // 一般通过definedProperty中添加的属性，如果没有设置可枚举，默认都是不可枚举的

obj2.c = 3

obj2[d] = 4

Object.keys(obj2)                // ['c']

Object.getOwnPropertyNames(obj2)   // ['b', 'c']

Reflect.ownKeys(obj2)         // ['b', 'c'，Symbol('d')]

几种遍历的方法：

1）for in 所有可枚举的属性的遍历,不包括Symbol，包括原型链上的属性 (只可枚举，非Symbol，含原型链)

2) Object.keys()遍历自身所有可枚举的属性，不包括Symbol，不包括原型链上的（只可枚举，非Symbol,非原型链）

3) Object.getOwnPropertyNames() 遍历的是所有对象自身的属性，包括不可枚举的属性，（不包括Symbol），不包括原型链上的 （所有，非Symbol，非原型链）

4) Reflect.ownKeys()遍历所有对象自身上的属性，包括Symbol，不包括原型链上的（相当于Object.getOwnPropertyNames().concat(Object.getOwnPropertySymbols())的值）（所有，含Symbol，非原型链）

以上几种方法中，原型链上的属性只有for in可以获取，Symbol属性只有Reflect.ownKeys()可以获取

 

5.

新的数字方法

[1,2,3,4].fill(5,2)     // [1,2,5,5]   

fill是数组的填充，第一个参数是填充值，第二个第三个参数是填充的起始位置，[start, end)，会改变原数组

回忆会改变原数组的几种方法：splice，sort，reverse，push，pop，shift，unshift，

 

6.

document.cookie可以获取网页的cookie，也可以通过这个方式修改cookie。cookie是以键值对的形式存在的。通过document.cookie来设置cookie，如果该键名存在，就修改值。如果不存在就在cookie中添加一栏。当然每次发起请求时，就会携带这个新的cookie

cookie是有跨域限制的。

回忆：

什么是同源策略？

同源策略是浏览器的安全机制

所谓同源就是，协议名，域名，端口号都要相同，有一个不同都是非同源。

非同源是有跨域限制的

而解决跨域限制的方法有很多：1. JSONP  2.CORS  3.Node代理  4.Nginx反向代理  5.websocket（这个不算，因为这相当于是另一种协议）

详细请参见（链接（目前还没写（留坑）））

 

css中通过@font-face使用字体也会有跨域的限制（字体和项目不在一个服务器上？）

 

7.简单请求和非简单请求

非简单请求是在发送正式的请求之前需要发送一个OPTIONS预检请求，请求成功后才发送正式的请求，携带数据

 

8. 通过document.domain的调用，可以是iframe内嵌的http://a.taobao.com通过父页面http://taobao.com的同源检测（对）

因为通过document.domain可以获取当前服务器的域名，也可以手动设置域名，但是域名的设置是有限制的，只能设置当前域名，或者当前域名的父域名

is not a suffix of 'xxx.com' // 必须要是后缀

is a top-level domain  // 不能是顶级域名

所以这里是可以把a.taobao.com设置成taobao.com

使用场景：一般大的项目都不会部署到一个服务器上，当相互之间请求资源有可能存在跨域的情况，但是即使域名不同，但是父域名至少是相同的。就可以通过domain来设置域名，解决跨域问题

 

9.选择器

x:first-child() 选择第一个为x的子元素

x:nth-of-type(n) 选择第n个类型为x的元素

x + y 选择下一个相邻的类型为y的子元素(只选择一个)

x ~ y 选择所有x相邻的为y的元素 

:not(x)选择所有类型不是x的元素

子元素会继承父元素字体的颜色

回忆选择器权重：

!important

行内

id

class|属性|伪类(:hover)

标签|伪元素（:before,:after,:selection）

通配符

 

10.BFC

生成BFC的几种方式

1. 绝对定位：position:absolute   position:fixed

2. 浮动：float：left  float:right

3. 行块级   display:inline-block, flex,  inline-flex, table,  table,cell

4. overflow: hidden,auto,scroll

5. 根元素

什么是BFC？

当元素设置一些属性时，就会产生块级格式化上下文

产生了BFC的元素，不管内部元素如何都不会影响外部元素，也不会受外部元素影响

可以利用BFC来清除浮动，解决margin塌陷等问题

 

如若有误，请务必指正