居中 div

水平居中

# 1. 朴素
div {
  width: 200px;
  margin: 0auto;
}

# 2. 改变为行内块
.container {
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
}

# 3. 绝对定位
div {
  position: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink;
}

水平垂直居中

# 1. 确定容器宽高

div {
position:absolute;/*绝对定位*/
width:500px;
height:300px;
top:50%;
left:50%;
margin:-150px -250px;
background-color:pink;
}


# 2. 未知容器的宽高
div {
  position: absolute;
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink;
}

# 3. 计算属性(单独有一篇介绍)
div {
    width: 200px;
    height: 200px;
    position: absolute;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    background: pink;
}

# 4. flex 布局
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.container div {
  width: 100px;
  height: 100px;
  background-color: pink;
}

# 5. 改成 inline-block 之后再改 text-align:center和vertical-align:middle，太长了不写了

创建一个三角形

采用的是相邻边框连接处的均分原理

# 将元素的宽高设为0，只设置border
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

对 BFC 规范（块级格式化上下文：block formatting context）的理解

BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。
如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

触发BFC的条件:

浮动元素（float 不为 none）
绝对定位元素（position 为 absolute 或 fixed）
溢出元素（overflow 不为 visible）
表格元素或弹性元素（display 为 table-cell，table-caption，flex，grid，inline-block 等）
根元素或包含根元素的元素

BFC 特性:

BFC 是一个独立的容器，容器内子元素不会影响容器外的元素。反之亦如此。
盒子从顶端开始垂直地一个接一个地排列，盒子之间垂直的间距是由 margin 决定的。
在同一个 BFC 中，两个相邻的块级盒子的垂直外边距会发生重叠。
BFC 区域不会和 float box 发生重叠。
BFC 能够识别并包含浮动元素，当计算其区域的高度时，浮动元素也可以参与计算了。

响应式布局

百分比布局

媒体查询布局
rem 布局
1. 设置根元素的字体大小，必备条件 <meta name="viewport" content="width=device-width, initial-scale=1.0">
2. 使用 rem 单位
3. 动态调整根元素的字体大小

rem布局的本质是等比缩放，一般是基于宽度,如果让html元素字体的大小，恒等于屏幕宽度的1/100，那1rem和1px就等价了document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px';

vw、vh 响应式布局
flex、grid 弹性布局

实现视差滚动特效

实现方式：

fixed 属性

.parallax-box {
  width: 100%;
  height: 100vh;
  background-image: url("https://picsum.photos/800");
  background-size: cover;
  background-attachment: fixed;

  display: flex;
  justify-content: center;
  align-items: center;
}

Transform 3D

.parallax {
  perspective: 1px; /* 设置透视效果，为3D变换创造深度感 */
  overflow-x: hidden;
  overflow-y: auto;
  height: 100vh;
}

.parallax__group {
  transform-style: preserve-3d; /* 保留子元素3D变换效果 */
  position: relative;
  height: 100vh;
}

.parallax__layer {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 背景层样式，设置为最远的层 */
.parallax__layer--back {
  transform: translateZ(-2px) scale(3);
  z-index: 1;
}

/* 中间层样式，设置为中等距离的层 */
.parallax__layer--base {
  transform: translateZ(-1px) scale(2);
  z-index: 2;
}

/* 前景层样式，设置为最近的层 */
.parallax__layer--front {
  transform: translateZ(0px);
  z-index: 3;
}

计算滚动进度

用requestAnimationFrame来做帧动画

相关组件库

1. https://www.framer.com/motion/scroll-animations
2. https://github.com/jscottsmith/react-scroll-parallax
3. https://github.com/dixonandmoe/rellax

设备像素、css 像素、设备独立像素、dpr、ppi

设备像素指的是物理像素，一般手机的分辨率指的就是设备像素，一个设备的设备像素是不可变的。
css像素和设备独立像素是等价的，不管在何种分辨率的设备上，css像素的大小应该是一致的，css像素是一个相对单位，它是相
对于设备像素的，一个css像素的大小取决于页面缩放程度和dpr的大小。
dpr指的是设备像素和设备独立像素的比值，一般的pc屏幕，dpr=1。在iphone4时，retina屏幕dpr为2。屏幕的缩放会改变dpr的值。

利用 meta 标签对 viewport 进行控制 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

内容	含义
width	设置layout viewport 的宽度，为一个正整数，或字符串”device-width”
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许

像素换算

DPR = 设备像素 / CSS像素 = 屏幕横向设备像素 / 理想视口的宽
CSS像素 = 设备独立像素 = 逻辑像素

回流 (Reflow) 和重绘 (Repaint)

回流 (Reflow) 是指网页渲染引擎根据元素的尺寸、位置和显示属性来重新计算页面的排版和布局，是网页渲染过程中的一个重要步骤。
重绘 (Repaint) 是指网页渲染引擎根据显示属性 (如颜色、文字大小等) 重新绘制页面元素，不影响元素的位置和尺寸。

浏览器硬件加速（视频播放卡顿问题）

哪些属性会触发硬件加速：transform、opacity、translate3d()、will-change、filter、perspective 等属性.

will-change 告诉浏览器某个元素即将发生变化，浏览器会提前为该元素做好优化准备（例如硬件加速）。但如果滥用，可能导致性能问题，因为会消耗更多的内存和 GPU 资源。

显式设置 transform: none 来关闭硬件加速。

图片格式

BMP是无损的、既支持索引色也支持直接色的、点阵图。这种图片格式几乎没有对数据进行压缩，所以BMP格式的图片通常
具有较大的文件大小。
GIF是无损的、采用索引色的、点阵图。采用LZW压缩算法进行编码。文件小，是GIF格式的优点，同时，GIF格式还具
有支持动画以及透明的优点。但，GIF格式仅支持8bit的索引色，所以GIF格式适用于对色彩要求不高同时需要文件体积
较小的场景。
JPEG是有损的、采用直接色的、点阵图。JPEG的图片的优点，是采用了直接色，得益于更丰富的色彩，JPEG非常适合用来
存储照片，与GIF相比，JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，
又会导致图片文件较GIF更大。
PNG-8是无损的、使用索引色的、点阵图。PNG是一种比较新的图片格式，PNG-8是非常好的GIF格式替代者，在可能的
情况下，应该尽可能的使用PNG-8而不是GIF，因为在相同的图片效果下，PNG-8具有更小的文件体积。除此之外，PNG-8
还支持透明度的调节，而GIF并不支持。现在，除非需要动画的支持，否则我们没有理由使用GIF而不是PNG-8。
PNG-24是无损的、使用直接色的、点阵图。PNG-24的优点在于，它压缩了图片的数据，使得同样效果的图片，PNG-24格
式的文件大小要比BMP小得多。当然，PNG24的图片还是要比JPEG、GIF、PNG-8大得多。
SVG是无损的、矢量图。SVG是矢量图。这意味着SVG图片由直线和曲线以及绘制它们的方法组成。当放大一个SVG图片的时候，看到的还是线和曲线，而不会出现像素点。这意味着SVG图片在放大时，不会失真，所以它非常适合用来绘制企
业Logo、Icon。
WebP是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的、点阵图。从名字就可以看出来它是
为Web而生的，什么叫为Web而生呢？就是说相同质量的图片，WebP具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。

在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%；
在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%；
WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。

浏览器如何判断是否支持 webp 格式图片:

宽高判断。通过创建image对象，将其src属性设置为webp格式的图片，然后在onload事件中获取图片的宽高，如果能够获取，则说明浏览器支持webp格式图片。如果不能获取或者触发了onerror函数，那么就说明浏览器不支持webp格式的图片。
canvas判断。我们可以动态的创建一个canvas对象，通过canvas的toDataURL将设置为webp格式，然后判断返回值中是否含有image/webp字段，如果包含则说明支持WebP，反之则不支持。

练习题

实现一个三角形
左100右200中间自适应的三栏布局
实现居中
flex grid 布局

工具

前缀：使用工具如 Autoprefixer 来自动添加浏览器前缀。
调试：使用工具（如 BrowserStack）测试跨浏览器兼容性。
Polyfill：对不支持的 CSS 功能使用 polyfill，比如 position: sticky。

bajiu

css常见知识点总结

居中 div

创建一个三角形

对 BFC 规范（块级格式化上下文：block formatting context）的理解

响应式布局

实现视差滚动特效

设备像素、css 像素、设备独立像素、dpr、ppi

回流 (Reflow) 和重绘 (Repaint)

浏览器硬件加速（视频播放卡顿问题）

图片格式

练习题

工具