CSS 经典知识

目前只记录了部分，后续会持续更新，希望大家收藏一波呀

1、如何减少和避免回流重绘

• 使用 visibility: hidden 代替 display：none
• 使用 transform 代替 top， left 等定位场景 （使用到了 GPU 加速）
• 避免使用 table 布局
• 避免 CSS 规制层级过多。浏览器 CSS解析器 解析 CSS文件 时，对 CSS规制是从右到左匹配查找，层级过多会影响回流重绘效率，建议保持 CSS规制 在3层左右
• 尽量使 js 操作 DOM 节点的次数减少
• 动态改变类而不是样式
• 将需要频繁回流重绘的节点单独提升为一个图层

2、属性排序

书写 CSS 属性时按一定的规制顺序去书写，这样写书出来的代码更加优雅，可读性和可维护性也更高。

具体规则如下：布局 → 尺寸 → 界面 → 文字 → 交互 (如同构建一栋楼一样)
布局属性

• ✅ 显示：display、visibility
• ✅ 溢出：overflow
• ✅ 浮动：float、clear
• ✅ 定位：position、left、top、right、bottom、z-index
• ✅ 列表：list-style、list-style-type
• ✅ 表格：table-layout、border-collapse、border-spacing
• ✅ 布局：flex 布局、多列布局、栅格布局 grid

尺寸属性

• ✅ 模型：box-sizing
• ✅ 边距：margin
• ✅ 填充：padding
• ✅ 边框：border
• ✅ 圆角：borer-radius
• ✅ 大小：width、height、min-width、max-width

界面属性

• ✅ 外观：appearance
• ✅ 轮廓：outline
• ✅ 背景：background 系列
• ✅ 遮罩：mask 系列
• ✅ 滤镜：filter 系列
• ✅ 剪切：object-fit、clip
• ✅ 事件：resize、zoom、cursor、pointer-events、user-select

文字属性

• ✅ 模式：line-height、vertical-align、direction、writing-mode
• ✅ 文本：text-overflow、text-decoration、text-align、text-indent、text-shadow
• ✅ 文字：src、font 系列
• ✅ 内容：overflow-wrap、word-wrap、word-space、content 系列

交互属性

• ✅ 模式：will-change、perspective、perspective-origin
• ✅ 变换：transform 系列
• ✅ 过渡：transition 系列
• ✅ 动画：animation 系列

3、SEO

SEO（Search Engine Optimization）：汉译为搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。SEO是指为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，使网站更适合搜索引擎的索引原则的行为。

• 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
• 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
• 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
• 重要内容不要用js输出：爬虫不会执行js获取内容
• 少用iframe：搜索引擎不会抓取iframe中的内容
• 非装饰性图片必须加alt
• 提高网站速度：网站速度是搜索引擎排序的一个重要指标