本文从简单到复杂列出了前端常用的一些代码段。善用这些代码可以让你的代码更高雅，别人更难懂。你就是公司的护城河，你就是前端的顶梁柱。

最近在项目中碰到这样一个布局，有一个列表，先按照 4 * 2 的正常顺序排列，当超过 8 个后，会横向重新开始 4 * 2 的布局，有点像一个个独立的分组，然后水平排列，如下 图中序号是 dom 序列

在现代网页设计中，CSS Transform 是一个强大而灵活的工具，可以让我们改变元素的外观和交互方式，而不必依赖于传统的布局方法。

在前端开发中，实现水平垂直居中在Flex布局下有一个更灵活的方式——使用 margin: auto;`来实现居中以及更多实际场景下的特定效果。

前言 Flex布局是一种用于网页布局的CSS模块，全称为Flexible Box Layout Module。 Flex布局通过使用容器和项目来创建灵活的、自适应的页面布局。在Flex布局中，容器是指

一、动态rem适配方案：适合H5项目的适配方案 1. @media媒体查询适配 首先，我们需要设置一个根元素的基准值，这个基准值通常根据视口宽度进行计算。可以在项目的 CSS 文件中，通过媒体查询动态

CSS中的content属性通常与伪元素一起使用，用于创建额外的视觉元素，例如工具提示、装饰性图案或特定于状态的指示器。在设计和美化网页时，content属性的灵活性和功能性使其成为一个有用的工具。

CSS伪类（Pseudo-class）是一种用于选择HTML元素的特殊方式，可以根据元素的状态或位置来应用样式，而不仅仅是基于元素的名称或属性。伪类在CSS中以冒号（:）开头，并且通常用于选择用户交互

在CSS中插何一个元素都是一个盒子，甚至是文本节点也是一个盒子（匿名盒子）；都有自己的视觉格式化（不同的盒子）。而其中CSS的display属性又可以显式的修改每个盒子的视觉格式化模型!