持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情
1、CSS怎么设置边框0.5
1、设定目标元素的参考位置
2、给目标元素添加一个伪元素before或者after，并设置绝对定位
3、给伪元素添加1px的边框
4、用box-sizing: border-box 属性把边框都包进宽和高里面
5、宽和高设置为 200%
6、整个盒子模型缩小为0.5
7、调整盒子模型的位置，以左上角为基准 transform-origin: 0 0;
.border {position: relative;}
.border::after{
content:'';
position: absolute;
box-sizing: border-box;
width: 200%;
height: 200%;
border-top:1px solid #979797;
/* 如果不用 border-top:1px solid #979797, 使用 background-color; 效果是一样的*/
transform: scale(0.5);
transform-origin: 0 0;
}
2、css 动画实现的3种方式 （transition过渡 transform变形 animation关键帧动画）
一、 transition 过渡
1. 语法:
1. transition: 属性是个复合属性 。
2. transition: property duration timing-function delay
3. 默认值为: transition: all 0 ease 0;
2. 属性介绍:
1. transition-property: 规定设置过渡效果的 css 属性名称 。
2. transition-duration: 规定完成过渡效果需要多少秒或毫秒 。
3. transition-timing-function: 指定过渡函数, 规定速度效果的速度曲线 。
4. transition-delay: 指定开始出现的延迟时间 。
3. 子属性详解:
1. transition-property: none |all |property;
1. 值为 none 时, 没有属性会获得过渡效果
2. 值为 all 时, 所有属性都将获得过渡效果
3. 值为指定的 css 属性应用过渡效果, 多个属性用逗号隔开
4. css 属性实际使用时的设置:
1. color: background-color, border-color, color, outline-color ;
2. length: 真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,
3. integer: 离散步骤（整个数字）, 在真实的数字空间, 以及使用 floor() 转换为整数时发生 如: outline-offset,z-index 。
4. number: 真实的（浮点型）数值, 如:zoom, opacity, font-weight 。
5. rectangle: 通过 x, y, width 和 height（转为数值）变换，如: crop 。
6. visibility: 离散步骤, 在0到1数字范围之内, 0表示“隐藏”, 1表示完全"显示"; 如: visibility 。
7. shadow: 作用于 color, x, y 和 blur（模糊）属性; 如：text-shadow 。
8. background-image: 通过每次停止时的位置和颜色进行变化 。 它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画 。
2. transition-duration: time;该属性主要用来设置一个属性过渡到另一个属性所需的时间, 也就是从旧属性过渡到新属性花费的时间长度, 俗称持续时间
3. transition-timing-function: linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n);
1. 该属性指的是过渡的 “缓动函数” 。 主要用来指定浏览器的过渡速度, 以及过渡期间的操作进展情况 。
2. 注意: 值 cubic-bezier(n,n,n,n) 可以定义自己的值, 如 cubic-bezier(0.42,0,0.58,1) 。
3. 各个子属性详细解析:
1. linear: 匀速 (约等于)== cubic-bezier(0,0,1,1) 。
2. ease: 慢快慢 (约等于)== cubic-bezier(0.25,0.1,0.25,0.1) 。
3. ease-in: 慢速开始的过渡 (约等于)== cubic-bezier(0.45,0.,1,1) 。
4. ease-out: 慢速结束的过渡 (约等于)== cubic-bezier(0,0.,0.58,1) 。
5. ease-in-out: 慢速开始和结束的过渡 (约等于)== cubic-bezier(0.45,0.,0.58,1) 。
6. cubic-bezier(n,n,n,n): 在 cubic-bezier 函数中定义自己的值; 可能的值是0~1之间的数值 。
4. transition-delay:这个属性没什么说的了, 就是过渡效果开始前的延迟时间, 单位秒或者毫秒
二、 transform 变形
1. 可以利用 transform 功能来实现文字或图像的 旋转、缩放、倾斜、移动 这四种类型的变形处理
1. 旋转 rotate
1. 用法: transform: rotate(45deg);
2. 提供一个参数 “角度”, 单位 deg 为度的意思, 正数为顺时针旋转, 负数为逆时针旋转, 上述代码作用是顺时针旋转45度
2. 缩放 scale
1. 用法: transform: scale(0.5) 或者 transform: scale(0.5, 2);
2. 一个参数时: 表示水平和垂直同时缩放该倍率
3. 两个参数时: 第一个参数指定水平方向的缩放倍率, 第二个参数指定垂直方向的缩放倍率 。
3. 倾斜 skew
1. 用法: transform: skew(30deg) 或者 transform: skew(30deg, 30deg);
2. 一个参数时: 表示水平方向的倾斜角度 。
3. 两个参数时: 第一个参数表示水平方向的倾斜角度, 第二个参数表示垂直方向的倾斜角度 。
4. skew 的默认原点 transform-origin 是这个物件的中心点
4. 移动 translate
1. 用法: transform: translate(45px) 或者 transform: translate(45px, 150px);
2. 一个参数时: 表示水平方向的移动距离;
3. 两个参数时: 第一个参数表示水平方向的移动距离, 第二个参数表示垂直方向的移动距离 。
2. 基准点 transform-origin
1. 在使用 transform 方法进行文字或图像的变形时, 是以元素的中心点为基准点进行的 。 使用 transform-origin 属性, 可以改变变形的基准点
2. 用法: transform-origin: 10px 10px;
3. 表示相对左上角原点的距离, 单位 px, 第一个参数表示相对左上角原点水平方向的距离, 第二个参数表示相对左上角原点垂直方向的距离;
4. 两个参数除了可以设置为具体的像素值, 其中第一个参数可以指定为 left、center、right, 第二个参数可以指定为 top、center、bottom。
3. 多方法组合变形
1. 用法: transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);
2. 这四种变形方法顺序可以随意, 但不同的顺序导致变形结果不同, 原因是变形的顺序是从左到右依次进行
三、 animation关键帧动画
1. 在 CSS3 中创建动画, 您需要学习 @keyframes 规则 。
2. @keyframes 规则用于创建动画 。 在 @keyframes 中规定某项 CSS 样式, 就能创建由当前样式逐渐改为新样式的动画效果 。
3. 必须定义动画的名称和时长 。 如果忽略时长, 则动画不会允许, 因为默认值是 0。
4. 请用百分比来规定变化发生的时间, 或用关键词 "from" 和 "to", 等同于 0% 和 100% 。
5. 语法: animation: name duration timing-function delay iteration-count direction;
1. animation-name 规定需要绑定到选择器的 keyframe 名称*
2. animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
3. animation-timing-function 规定动画的速度曲线。 默认是 "ease"。
1. linear 动画从头到尾的速度是相同的。
2. ease 默认。动画以低速开始，然后加快，在结束前变慢。
3. ease-in 动画以低速开始。
4. ease-out 动画以低速结束。
5. ease-in-out 动画以低速开始和结束。
6. cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
4. animation-delay 规定动画何时开始 。 默认是 0。
5. animation-iteration-count 规定动画被播放的次数 (from到to算作一次, to到from算作一次; 注意计算方式) 。
1. 默认是 1 。
2. infinite规定动画应该无限次播放。
6. animation-direction 规定动画是否在下一周期逆向地播放 。 默认是 "normal"; alternate (轮流),。
1. norma 默认值。动画按正常播放。
2. reverse 动画反向播放。
3. alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
4. alternate-reverse 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
5. initial 设置该属性为它的默认值 。
6. 子属性详解
1. alternate(轮流):
1. alternate (轮流): 动画播放在第偶数次向前播放, 第奇数次向反方向播放 (animation-iteration-count 取值大于1时设置有效
2. 语法: animation-direction: alternate;
2. animation-play-state 规定动画是否正在运行或暂停 。 默认是 "running" 播放; paused 暂停播放 。
1. 语法: animation-play-state: paused;
3. animation-fill-mode 属性规定动画在播放之前或之后, 其动画效果是否可见; 规定对象动画时间之外的状态; none | forwards | backwards | both 。
1. none:不改变默认行为 (默认, 回到动画没开始时的状态) 。
2. forwards:当动画完成后，保持最后一个属性值（在最后一个关键帧中定义) (动画结束后动画停留在结束状态) 。
3. backwards:在 animation-delay 所指定的一段时间内, 在动画显示之前, 应用开始属性值 (在第一个关键帧中定义) （动画回到第一帧的状态）。
4. both:向前和向后填充模式都被应用 （根据 animation-direction 轮流应用 forwards 和 backwords 规则）。
5. 语法:animation-fill-mode: forwards
0% 是动画的开始, 100% 是动画的完成
3、有用过css预处理器嘛，用过他的哪些属性，打包之后出来的代码是什么样的，怎么防止css命名冲突
它能让你的CSS具备更加简洁、适应性更强、可读性更强、层级关系更加明显、更易于代码的维护等诸多好处。
CSS预处理器种类繁多，目前Sass、Less、用的比较多。
使用功能：
1、嵌套：反映层级和约束
2、变量和计算： 减少重复代码
3、Extend 和 Mixin 代码片段 (用的少)
4、循环：适用于复杂有规律的样式
5、import css 文件模块化
css的命名冲突目前有几种解决方法：
1.命名约定：人为的制定一下命名规则以避免冲突，例如前缀，嵌套等
2.CSS in JS：在JavaScript中写CSS，使用工具编译为css，最常见的是styled-components
3.使用编译工具改变css类名：最常见的是CSS Modules
4.HTML5的style scoped：可以部分解决css重名问题，缺陷很多
4、怎么拿到父元素中里偶数的子元素
E:nth-child(2n),或者E:nth-child(even)
5、跨域与同源：经典八股了
-
跨域的原理
跨域是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的。跨域访问是被各大浏览器所默认禁止的。
同源策略是浏览器对 JavaScript 实施的安全限制，只要协议、域名、端口有任何一个不同，都被当作是不同的域。
跨域原理即是通过各种方式，避开浏览器的安全限制。 -
解决方案
JSONP：ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链 接却可以访问跨域的 js 脚本，利用这个特性，服务端不再返回 JSON 格式的数据，而是 返回一段调用某个函数的 js 代码，在 src 中进行了调用，这样实现了跨域。
步骤：
1、去创建一个script标签
2、script的src属性设置接口地址
3、接口参数，必须要带一个自定义函数名，要不然后台无法返回数据
4、通过定义函数名去接受返回的数据``` //动态创建 script var script = document.createElement('script'); // 设置回调函数 function getData(data) { console.log(data); } //设置 script 的 src 属性，并设置请求地址 script.src = 'http://localhost:3000/?callback=getData'; // 让 script 生效 document.body.appendChild(script); ```
JSONP 的缺点：JSONP 只支持 get，因为 script 标签只能使用 get 请求； JSONP 需要后端配合返回指定格式的数据。
document.domain 基础域名相同 子域名不同
window.name 利用在一个浏览器窗口内，载入所有的域名都是共享一个window.name
CORS
CORS(Cross-origin resource sharing)跨域资源共享 是一种机制，是目前主流的跨域解决方案，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。服务器设置对CORS的支持原理：服务器设置Access-Control-Allow-Origin HTTP响应头之后，浏览器将会允许跨域请求
1.浏览器端会自动向请求头添加origin字段，表明当前请求来源。
2.服务器设置Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等 HTTP响应头字段之后，浏览器将会允许跨域请求。
proxy代理+ Nginx
nginx是一款极其强大的web服务器，其优点就是轻量级、启动快、高并发。
跨域问题的产生是因为浏览器的同源政策造成的，但是服务器与服务器之间的数据交换是没有这个限制。
反向代理就是采用这种方式，建立一个虚拟的代理服务器来接收 internet 上的链接请求，然后转发给内部网络上的服务器，并将从服务器上得到的结果，返回给 internet 上请求链接的客户端。现在的新项目中nginx几乎是首选，我们用node或者java开发的服务通常都需要经过nginx的反向代理。
window.postMessage() 利用h5新特性window.postMessage()
6、用js实现一个比较版本号的方法，例1.10.1 2.02.11
<script>
function compareVersion(version1, version2) {
const arr1 = version1.split('.')
const arr2 = version2.split('.')
const length1 = arr1.length
const length2 = arr2.length
const minlength = Math.min(length1, length2)
let i = 0
for (i ; i < minlength; i++) {
let a = parseInt(arr1[i])
let b = parseInt(arr2[i])
if (a > b) {
return 1
} else if (a < b) {
return -1
}
}
if (length1 > length2) {
for(let j = i; j < length1; j++) {
if (parseInt(arr1[j]) != 0) {
return 1
}
}
return 0
} else if (length1 < length2) {
for(let j = i; j < length2; j++) {
if (parseInt(arr2[j]) != 0) {
return -1
}
}
return 0
}
return 0
}
let i = '1.10.1';
let j = '2.02.11';
console.log(compareVersion(i,j));
</script>
