CSS -- Part1

css和js两种方式实现div右移1000px动画

• https://seviche.cc/2022-07-20-animation

visibility、display、opacity的区别

• https://segmentfault.com/a/1190000015116392

单行截断

• https://segmentfault.com/a/1190000038948266

flex布局

• https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

transition、transform、translate的区别

• https://juejin.cn/post/6844903945987424264

如何画一条 0.5px 的边框

• 怎么画一条0.5px的边（更新）

  细线边框的具体实现方法有：伪元素缩放或渐变，box-shadow模拟，svg画线，border-image裁剪等。要实现小于1px的线条，有个先决条件：屏幕的分辨率要足够高，设备像素比要大于1，即css中的1个像素对应物理屏幕中1个以上的像素点。

  对于普通电脑，屏幕物理像素和css像素一一对应，显示的最小单位就是1px。而现在的手机，屏幕物理宽度一般都大于页面显示宽度。例如苹果6s的屏幕分辨率为1334x750像素，但是以375px的宽度显示页面，设备像素比就是750/375=2；此时在css中定义0.5px的宽度，实际上对应物理屏幕的1个像素点，这就是border小于1px的的实现基础。

  在viewport initial-scale是1的情况下，可以使用transform/SVG画0.5px，而如果viewport的缩放比例不是1的话，那么直接画1px即可

  <meta name="viewport" content="width=device-width,initial-sacle=0.5">

说一下BFC

• 浅析BFC原理及作用

parent元素宽高不定，实现scale固定宽高比始终为4：3

• https://juejin.cn/post/6844904070679887886#heading-0

CSS垂直居中的方案

• CSS垂直居中的12种实现方式

伪元素和伪类的区别

• 总结伪类与伪元素 | AlloyTeam

position的几个属性和含义

• CSS position 属性

说一下盒模型

• https://segmentfault.com/a/1190000013069516

响应式布局方案

• 前端响应式布局原理与方案（详细版）

三栏式布局方案

• https://juejin.cn/post/6844904062224171021

如何提高动画的渲染性能

• 这样使用GPU动画