参考文章：CSS 基础入门 - CSDN
选择器：精准定位元素
基础选择器
- 标签选择器：通过标签名选中所有同名标签。
- 类选择器：
.类名，最常用的差异化设置方式。 - ID 选择器：
#id名，具有唯一性。 - 通配符选择器：
*，选中所有标签，常用于清除默认样式。
复合选择器
- 后代选择器：
父级 子级（空格隔开），选中所有符合条件的后代。 - 子代选择器：
父级 > 子级，仅选中直接子元素。 - 交集/并集选择器：用于组合多个条件或同时设置多个元素。
- 伪类选择器：如
:hover，用于定义元素在特定状态（如悬停）下的样式。
盒子模型 (Box Model)
盒子模型是网页布局的核心，由以下四部分组成：
- 内容区域 (Content)：
width&height。 - 内边距 (Padding)：内容与边框之间的距离。
- 边框线 (Border)：盒子的轮廓。
- 外边距 (Margin)：盒子之间的间距。
核心技巧：
- 防止撑大：添加
box-sizing: border-box;开启内减模式。 - 水平居中：给有宽度的块级盒子设置
margin: 0 auto;。
布局利器：Flex 布局
Flex 布局（弹性布局）是目前最主流的布局模型，提供了强大的空间分布和对齐能力。
- 主轴对齐：
justify-content(center, space-between, space-around…)。 - 侧轴对齐：
align-items(center, flex-start, flex-end…)。 - 轴向切换：
flex-direction（默认水平row，可改为垂直column）。
定位 (Position)
用于更灵活地改变盒子在页面中的位置：
- 相对定位 (
relative)：不脱标，相对于自身原位置移动，常作绝对定位的父级。 - 绝对定位 (
absolute)：脱标，相对于最近的非static祖先元素定位。 - 固定定位 (
fixed)：脱标，相对于浏览器视口固定，不随滚动条滚动。
平面与空间转换 (Transform)
通过 transform 属性为元素添加动态形态改变：
- 平移：
translate(x, y)。 - 旋转：
rotate(deg)。 - 缩放：
scale(倍数)。 - 3D 呈现：设置
transform-style: preserve-3d;和perspective视距。
动画 (Animation)
实现复杂的动态过程。
- 定义动画：使用
@keyframes 动画名称 { ... }。 - 调用动画：
animation: 名称 时长 速度曲线 延迟 重复次数 ...;。
移动端适配方案
为了让网页在不同尺寸的手机屏幕上都能完美显示：
REM 适配
- 原理：单位
rem相对于html标签的font-size。 - 实现：配合媒体查询或
flexible.js动态修改html的字号。
VW / VH 适配
- 原理：
1vw等于视口宽度的 1%，1vh等于视口高度的 1%。 - 优势：纯 CSS 实现，不需要 JS 脚本干预，是目前的推荐方案。
预处理器：Less
Less 扩展了 CSS 的功能，使样式编写更具逻辑性：
- 变量：使用
@color: #fff;存储常用数据。 - 运算：支持加减乘除。
- 嵌套：模仿 HTML 结构书写 CSS，避免层级混乱。