前端-CSS学习笔记

CSS（层叠样式表）负责网页的样式与布局，涵盖颜色、字体、布局、动画等。

一、CSS 的写入方式

行内样式 ：直接写在开始标签的 style 属性内。

html
复制代码
```
<div style="color: red;">内容</div>
```
内部样式 ：写在 HTML 文件的 <style> 标签里，通常放在 <head> 内。

html
复制代码
```
<style>
  div { color: red; }
</style>
```
外部样式 ：创建独立的 .css 文件，通过 <link> 引入。

html
复制代码
```
<link rel="stylesheet" href="style.css">
```

优先级：行内样式 > 内部样式 = 外部样式（后两者按书写顺序，后写覆盖前写）

二、选择器

用于精准选中要添加样式的元素。

基础选择器

标签选择器 ：匹配所有该标签
p { color: red; }
类选择器 ：匹配 class 属性
.highlight { color: blue; }
ID 选择器 ：匹配特定 id
#header { color: yellow; }
通配符选择器 ：匹配所有元素
* { margin: 0; }

组合选择器

子代选择器 >：只选直接子元素
.box > h2 { color: red; }
后代选择器 （空格）：所有后代元素
.box h2 { color: blue; }
并集选择器 ,：多个选择器共用样式
p, span { color: green; }
交集选择器 （紧贴）：同时满足多个条件
p.highlight { font-weight: bold; } （p 标签且类为 highlight）

伪类选择器 :

状态伪类：
a:hover { text-decoration: underline; }
input:focus { outline: none; }
结构伪类：
li:first-child li:last-child li:nth-child(odd/even/公式)

例：li:nth-child(even) { background: #f9f9f9; }

伪元素选择器 ::

::before / ::after：在元素内容前后插入内容（需配合 content）
::first-line：首行样式
::first-letter：首字样式
::selection：用户选中文本时的样式

属性选择器 [ ]

[type="text"] 精确匹配
[class^="btn"] 开头匹配
[class$="active"] 结尾匹配
[class*="nav"] 包含匹配

选择器优先级（权重）

行内样式：1000
ID 选择器：100
类选择器、属性选择器、伪类：10
标签选择器、伪元素：1
通配符、继承：0

计算方式：将选择器各权重相加，数值大的生效。
!important 强制最高优先级（谨慎使用）。

三、字体与文本样式

字体属性

font-family：字体族（备选字体列表）
font-family: "Microsoft YaHei", Arial, sans-serif;
font-size：字号（px / em / rem / %）
font-weight：粗细（normal 400、bold 700、100-900）
font-style：斜体（normal / italic / oblique）
font-variant：小型大写字母（normal / small-caps）
简写 font：font: italic bold 16px/1.5 "微软雅黑", sans-serif;

（顺序：style weight size/line-height family，size 和 family 必写）

文本属性

color：文字颜色（名称、hex、rgb/rgba、hsl/hsla）
text-align：水平对齐（left / center / right / justify）
text-decoration：装饰线（none / underline / overline / line-through）
text-indent：首行缩进（常用 2em）
line-height：行高（数字、px、em），单行垂直居中可设等于容器高
letter-spacing：字符间距
word-spacing：单词间距
text-transform：大小写转换（uppercase / lowercase / capitalize）
white-space：空白处理（normal / nowrap / pre / pre-wrap）
text-overflow：溢出文本显示方式（clip / ellipsis），需配合 overflow: hidden 和 white-space: nowrap 实现省略号

Web 字体与图标

使用 @font-face 引入自定义字体
或通过 Google Fonts 等 CDN 链接

四、背景与边框

背景

background-color：背景色
background-image：背景图 url(图片路径)
background-repeat：平铺方式（repeat / no-repeat / repeat-x / repeat-y）
background-position：定位（left top / center / 像素/百分比）
background-size：尺寸（cover 覆盖容器 / contain 完整显示 / 具体数值）
background-attachment：固定滚动（scroll / fixed）
简写 background：background: #fff url(bg.png) no-repeat center/cover;

边框

border-width、border-style（solid / dashed / dotted / double 等）、border-color
简写 border：border: 1px solid #ccc;
单边设置：border-top、border-right 等
border-radius：圆角（像素 / 百分比，最多可设四角不同值）
border-image：图片边框

轮廓 outline

绘制于边框之外，不占空间，常用于 :focus 样式
outline: none; 去除输入框聚焦轮廓（注意可访问性）

阴影

box-shadow：盒阴影（水平偏移垂直偏移模糊半径扩散半径颜色内外阴影）

例：box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
text-shadow：文字阴影（参数类似，无扩散半径和内外）

五、盒模型

每个元素看作一个矩形盒子，由内向外：内容(content) → 内边距(padding) → 边框(border) → 外边距(margin)

width / height：默认指内容区尺寸
padding：内边距（上右下左），可简写
border：边框
margin：外边距，可简写；可负值；外边距合并（垂直相邻元素的外边距会合并取最大值）
box-sizing：
- content-box（默认）：width/height 只包含内容区
- border-box：width/height 包含内容 + padding + border（更直观，常用）
overflow：溢出内容处理（visible / hidden / scroll / auto）

显示与隐藏

display: none; 元素隐藏且不占位
visibility: hidden; 元素隐藏但仍占位
opacity: 0; 完全透明，仍占位且可交互

六、布局

1. 浮动布局 (Float)

float：left / right / none
清除浮动：
- 在浮动元素后使用 clear: both; 的空元素
- 父元素添加 overflow: hidden; 触发 BFC
- 使用伪元素清除法：
  
  css
  复制代码
```
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
```

2. 定位 (Position)

static：默认，无定位
relative：相对定位，相对自身原位置偏移，仍占原空间
absolute：绝对定位，相对于最近的非 static 定位祖先元素定位，脱离文档流
fixed：固定定位，相对于浏览器视口定位，脱离文档流
sticky：粘性定位，基于滚动位置在 relative 和 fixed 之间切换（需设置 top 等）
偏移属性：top right bottom left
z-index：控制层叠顺序，数值越大越靠上（仅对定位元素有效）

3. 弹性布局 (Flexbox)

父容器设为 display: flex;（或 inline-flex）
主轴方向 flex-direction：row（默认） | row-reverse | column | column-reverse
换行 flex-wrap：nowrap | wrap | wrap-reverse
主轴对齐 justify-content：flex-start | flex-end | center | space-between | space-around | space-evenly
交叉轴对齐 （单行）align-items：stretch | flex-start | flex-end | center | baseline
多行对齐 align-content：类似 justify-content 控制多行在交叉轴的分布
子元素属性：
- flex：简写（flex-grow flex-shrink flex-basis），如 flex: 1;
- align-self：单独设置某个子元素的交叉轴对齐
- order：排序（数值越小越靠前）

4. 网格布局 (Grid)

父容器设为 display: grid;
定义列/行：
grid-template-columns: 1fr 2fr 200px;
grid-template-rows: 100px auto;
间距：gap（行间距列间距，或统一用 gap: 10px;）
子元素放置：
- grid-column: 1 / 3;（从第1条线到第3条线，占两列）
- grid-row: 2 / 4;
对齐方式：justify-items（水平）、align-items（垂直）、place-items 简写
网格区域命名：grid-template-areas + 子元素 grid-area

常规流与 BFC

常规流：块级元素垂直排列，行内元素水平排列
BFC（块级格式化上下文）：独立的渲染区域，用于清除浮动、防止边距合并等。触发方式：overflow 非 visible、display: flow-root、float、position: absolute/fixed 等

七、变换与过渡、动画

1. 2D/3D 变换 (`transform`)

位移：translate(x, y) / translateX() / translateY()
旋转：rotate(deg)，3D 旋转 rotateX() rotateY()
缩放：scale(x, y) / scaleX() / scaleY()
倾斜：skew(x-deg, y-deg)
可组合：transform: translate(50px, 0) rotate(45deg);
transform-origin：变换原点

2. 过渡 (`transition`)

让属性变化平滑进行。

transition-property：要过渡的属性（all 或具体属性名）
transition-duration：持续时间（s / ms）
transition-timing-function：速度曲线（ease / linear / ease-in / ease-out / cubic-bezier）
transition-delay：延迟时间
简写：transition: all 0.3s ease 0s;

3. 动画 (`animation`)

定义关键帧：

css

复制代码

@keyframes 动画名 {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

应用动画：
- animation-name：动画名
- animation-duration：时长
- animation-timing-function：速度曲线
- animation-delay：延迟
- animation-iteration-count：播放次数（infinite 无限）
- animation-direction：方向（normal / reverse / alternate）
- animation-fill-mode：结束状态（forwards 保持最后关键帧样式）
- animation-play-state：控制播放/暂停
- 简写：animation: slide 2s ease-in-out 0s infinite alternate;

八、响应式设计

视口设置 （HTML 中）
<meta name="viewport" content="width=device-width, initial-scale=1.0">

媒体查询 @media

css

复制代码

@media (max-width: 768px) {
  .container { flex-direction: column; }
}
@media (min-width: 1024px) { ... }
@media (orientation: landscape) { ... }

响应式单位

百分比 %：相对父容器
em：相对于自身或父元素字体大小（复合易乱）
rem：相对于根元素 (html) 字体大小（推荐）
vw / vh：视口宽/高的 1%
vmin / vmax：视口宽高较小/较大值的 1%

弹性图片/媒体

css

复制代码

img, video { max-width: 100%; height: auto; }

移动优先 ：先写移动端样式，再用 min-width 媒体查询拓展大屏样式。

九、CSS 变量与函数

自定义属性（CSS 变量）

定义：通常在 :root 中声明

css

复制代码

:root {
  --main-color: #3498db;
  --gap: 16px;
}

使用：color: var(--main-color);
margin: var(--gap);
可提供回退值：color: var(--primary, #333);

常用函数

calc()：数学计算，可混用单位
width: calc(100% - 80px);
min() / max()：取最小/最大值
width: min(80%, 600px);
clamp()：限定范围
font-size: clamp(1rem, 2.5vw, 2rem);
rgb() / rgba()、hsl() / hsla()
url()、attr()

十、其他重要概念

层叠与继承

层叠规则 ：重要性（!important） > 特殊性（选择器权重） > 源代码顺序
继承：部分属性（字体、文本颜色等）会从父元素继承，盒模型相关属性通常不继承
强制继承：inherit
重置为默认：initial
取消所有样式：unset

CSS 预处理器简介

Sass/SCSS：变量、嵌套、混合宏 (@mixin)、继承 (@extend)、函数、模块化
Less：类似功能，基于 JavaScript
后处理器（PostCSS）：如 Autoprefixer 自动添加浏览器前缀

浏览器前缀

-webkit-（Chrome/Safari）
-moz-（Firefox）
-ms-（IE/Edge）
-o-（旧版 Opera）

常见技巧

水平居中：
- 行内/文本元素：text-align: center;
- 块元素定宽：margin: 0 auto;
- Flex：父元素 justify-content: center;
- Grid：父元素 place-items: center;
垂直居中：
- 单行文本：line-height 等于容器高
- Flex：父元素 align-items: center;
- Grid：place-items: center;
- 定位 + transform：top: 50%; left: 50%; transform: translate(-50%, -50%);
清除浮动、BFC 用法如上。

前端-CSS学习笔记

CSS（层叠样式表）负责网页的样式与布局，涵盖颜色、字体、布局、动画等。

一、CSS 的写入方式

二、选择器

三、字体与文本样式

四、背景与边框

五、盒模型

六、布局

1. 浮动布局 (Float)

2. 定位 (Position)

3. 弹性布局 (Flexbox)

4. 网格布局 (Grid)

七、变换与过渡、动画

1. 2D/3D 变换 (transform)

2. 过渡 (transition)

3. 动画 (animation)

八、响应式设计

九、CSS 变量与函数

十、其他重要概念

1. 2D/3D 变换 (`transform`)

2. 过渡 (`transition`)

3. 动画 (`animation`)