D6【问答格式】【精简版】每日一练前端

Q1. CSS选择器的优先级

• !important是最优先的
• 内联样式
• id选择器(#example)
• 类(.example)、属性([type="radio"])、伪类选择器(:hover)
• 标签(h1)、伪元素选择器(::before)

Q2. 怎么用css实现瀑布流布局?

1. 比较简单的瀑布流布局可以用css实现:

   • flex，父元素设置高度且display: flex; flex-direction: column，且要设置flex-wrap: wrap, 子元素还要通过:nth-child设置order，可以通过width: 100%/4来设置宽度
   • column-count，父元素设置column-count来决定有几列，子元素设置break-inside: avoid

2. 比较复杂的瀑布流布局，比如需要下拉加载，还有响应式布局，就需要引入js:

   • 需要用js计算列的高度，并且要使容量的高度动态变化
   • 窗口变化的时候列数要随之变化

Q3. 实现千位分隔符

1. 第一种方法

function thousandSeparator(num){
    var arr = num.toString().split("");
    var dotIndex = arr.indexOf(".");
    dotIndex = dotIndex > -1 ? dotIndex : arr.length;
    var pattern = /[0-9]/g;
    while (dotIndex > 3) {
        if (pattern.test(arr[dotIndex - 1])) {
          arr.splice(dotIndex - 3, 0, ",");
        }
        dotIndex = dotIndex - 3;
    }
    return arr.join("");
}

2. 第二种方法：用api: toLocaleString()

Q4. 什么是CORS简单请求和预检请求？

CORS分为简单请求和非简单请求（预检请求），因为有些请求可能会对服务器数据产生副作用，浏览器必须使用OPTIONS方法发起一个预检请求，从而获知服务端是否允许该跨域请求，等服务器确认允许之后，才会发起实际的HTTP请求。

1. 简单请求
   • 使用HEAD, GET, POST其中一种方法
   • 只使用了一些安全的标头字段，不得认为设置其他首部字段
     • Accept
     • Accept-Language
     • Content-Language
     • Content-Type仅限以下三种
       • text/plain
       • multipart/form-data
       • application/x-www-form-urlencoded
     • DPR
     • Downlink
     • Save-Data
     • Viewport-Width
     • Width
2. 非简单请求（预检请求）
   • 需预检的请求要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。"预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响
   • 使用了PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH方法
   • 人为设置了非规定内的其他首部字段，比如Content-Type设置了application/json