### **一、CSS 基础概念**
1. **CSS 是什么？**
- **全称**：Cascading Style Sheets（层叠样式表）
- **作用**：控制网页的布局、颜色、字体等样式，实现内容（HTML）与表现（CSS）的分离。
- **核心价值**：提升网页的可维护性、可读性和设计灵活性。
2. **CSS 的三种引入方式**：
- **内联样式（Inline Style）**：直接写在 HTML 标签的 `style` 属性中。
```html
<p style="color: red; font-size: 16px;">文本内容</p>
```
- **内部样式表（Internal Style Sheet）**：写在 HTML 的 `<style>` 标签中。
```html
<style>
p {
color: blue;
font-size: 18px;
}
</style>
```
- **外部样式表（External Style Sheet）**：通过 `<link>` 标签引入外部 `.css` 文件。
```html
<link rel="stylesheet" href="styles.css">
```
3. **CSS 语法结构**：
```css
选择器 {
属性: 值;
属性: 值;
}
```
- **示例**：
```css
h1 {
color: red;
font-size: 24px;
}
```
---
### **二、CSS 选择器**
1. **基础选择器**：
- **标签选择器**：选择所有指定标签的元素。
```css
p { color: green; }
```
- **类选择器（Class）**：以 `.` 开头，选择具有指定 `class` 属性的元素。
```css
.title { font-size: 20px; }
```
- **ID 选择器**：以 `#` 开头，选择具有指定 `id` 属性的元素（唯一）。
```css
#header { background-color: #f0f0f0; }
```
- **通配符选择器**：`*` 选择所有元素。
```css
* { margin: 0; padding: 0; }
```
2. **组合选择器**：
- **后代选择器**：空格分隔，选择某个元素的所有后代。
```css
div p { color: blue; } /* 选择所有 div 内部的 p 元素 */
```
- **子元素选择器**：`>`，选择某个元素的直接子元素。
```css
ul > li { list-style: square; }
```
- **相邻兄弟选择器**：`+`，选择紧接在另一个元素后的兄弟元素。
```css
h2 + p { margin-top: 10px; }
```
- **通用兄弟选择器**：`~`，选择某个元素之后的所有兄弟元素。
```css
h2 ~ p { font-weight: bold; }
```
3. **属性选择器**：
- 选择具有特定属性的元素。
```css
[href] { color: purple; } /* 选择所有有 href 属性的元素 */
[type="text"] { border: 1px solid; } /* 选择所有 type 为 text 的 input 元素 */
```
4. **伪类选择器**：
- **动态伪类**：
```css
a:hover { color: red; } /* 鼠标悬停时的样式 */
a:visited { color: gray; } /* 已访问过的链接 */
```
- **结构性伪类**：
```css
li:first-child { font-weight: bold; } /* 选择第一个子元素 */
p:nth-child(2n) { background: #ccc; } /* 选择偶数位置的 p 元素 */
```
5. **伪元素选择器**：
- **::before/::after**：在元素前后插入内容。
```css
p::before { content: "★"; } /* 在段落前添加星号 */
```
---
### **三、CSS 盒模型**
1. **盒模型组成**：
- **内容（Content）**：元素的实际内容。
- **内边距（Padding）**：内容与边框之间的空间。
- **边框（Border）**：围绕内容和内边距的边框。
- **外边距（Margin）**：元素与其他元素之间的空间。
2. **盒模型示例**：
```css
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
```
3. **盒模型总宽度计算**：
```css
总宽度 = width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right
```
4. **设置盒模型**：
- **标准盒模型**（默认）：
```css
box-sizing: content-box;
```
- **IE 盒模型**（更直观）：
```css
box-sizing: border-box;
```
---
### **四、布局与定位**
1. **display 属性**：
- **block**：块级元素（独占一行，可设置宽高）。
- **inline**：行内元素（共享一行，不可设置宽高）。
- **inline-block**：行内块元素（共享一行，可设置宽高）。
- **none**：隐藏元素（不占空间）。
2. **position 定位**：
- **static**：默认值，不定位。
- **relative**：相对定位（相对于自身位置偏移）。
- **absolute**：绝对定位（相对于最近的非 static 定位的祖先元素）。
- **fixed**：固定定位（相对于浏览器窗口）。
- **sticky**：粘性定位（滚动时固定在某个位置）。
3. **Flexbox 布局**：
- **容器属性**：
```css
display: flex; /* 启用 Flexbox */
flex-direction: row/column; /* 主轴方向 */
justify-content: center; /* 主轴对齐方式 */
align-items: center; /* 交叉轴对齐方式 */
```
- **项目属性**：
```css
flex: 1; /* 自动分配空间 */
```
4. **Grid 布局**：
- **容器属性**：
```css
display: grid; /* 启用 Grid */
grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
grid-gap: 10px; /* 网格间距 */
```
5. **浮动（Float）**：
- **left/right**：元素向左或右浮动。
- **clear**：清除浮动影响。
```css
.clearfix::after {
content: "";
display: table;
clear: both;
}
```
---
### **五、文本与字体**
1. **字体属性**：
- **font-family**：字体类型（如 `Arial`, `微软雅黑`）。
- **font-size**：字体大小（如 `16px`, `1em`）。
- **font-weight**：粗细（`normal`, `bold`, `100-900`）。
- **font-style**：斜体（`italic`, `normal`）。
2. **简写字体**：
```css
font: italic bold 18px/1.5 "微软雅黑";
/* 顺序：样式 粗细 字号/行高 字体 */
```
3. **文本属性**：
- **text-align**：对齐方式（`left`, `center`, `right`）。
- **text-decoration**：装饰线（`underline`, `line-through`）。
- **white-space**：空白处理（`nowrap` 禁止换行）。
- **text-transform**：文本转换（`uppercase`, `lowercase`）。
---
### **六、响应式设计**
1. **媒体查询（Media Queries）**：
```css
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}
```
2. **弹性单位**：
- **百分比**：`width: 50%;`
- **视口单位**：`vw`, `vh`（相对于视口宽度/高度）。
- **rem/vw**：`font-size: 1.5rem;`（基于根元素字体大小）。
3. **图片适配**：
```css
img {
max-width: 100%;
height: auto;
}
```
---
### **七、CSS3 新特性**
1. **动画与过渡**：
- **transition**：平滑过渡效果。
```css
.box {
transition: all 0.5s ease;
}
```
- **@keyframes**：定义关键帧动画。
```css
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
```
2. **阴影与圆角**：
- **box-shadow**：元素阴影。
```css
.box {
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}
```
- **border-radius**：圆角。
```css
.circle {
border-radius: 50%;
}
```
3. **渐变背景**：
```css
background: linear-gradient(to right, red, blue);
```
---
### **八、性能优化**
1. **减少重绘与回流**：
- 避免频繁修改元素的尺寸、位置或样式。
- 使用 `transform` 或 `opacity` 实现动画（触发 GPU 加速）。
2. **合并与压缩 CSS**：
- 使用工具（如 Webpack、PostCSS）合并多个 CSS 文件。
- 删除不必要的空格和注释。
3. **浏览器缓存**：
- 设置 CSS 文件的缓存策略，减少重复加载。
---
### **九、常见问题与技巧**
1. **清除默认样式**：
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
```
2. **垂直居中**：
- **Flexbox**：
```css
.parent {
display: flex;
align-items: center;
justify-content: center;
}
```
- **Grid**：
```css
.parent {
display: grid;
place-items: center;
}
```
3. **隐藏元素**：
- **display: none;**（完全隐藏，不占空间）。
- **visibility: hidden;**（隐藏但占空间）。
4. **CSS 变量（自定义属性）**：
```css
:root {
--primary-color: #007bff;
}
.button {
background-color: var(--primary-color);
}
```
---
### **十、浏览器兼容性**
1. **添加浏览器前缀**（旧版浏览器）：
```css
-webkit-transform: rotate(30deg); /* Safari/Chrome */
-moz-transform: rotate(30deg); /* Firefox */
-ms-transform: rotate(30deg); /* IE */
```
2. **使用 Autoprefixer 工具**：自动添加前缀，减少手动操作。
---
### **十一、CSS 预处理器**
1. **Sass/Less**：
- 变量、嵌套、混合（Mixins）等功能。
- 示例（Sass）：
```scss
$primary-color: #007bff;
.button {
background-color: $primary-color;
}
```
---
### **十二、调试工具**
1. **浏览器开发者工具**（F12）：
- 实时查看元素样式、布局、盒模型。
- 检查样式覆盖和冲突。
2. **CSS Lint 工具**：
- 检查代码规范和潜在错误。
---
### **十三、实践建议**
1. **模块化开发**：
- 将 CSS 拆分为多个小文件（如 `reset.css`, `layout.css`, `components.css`）。
- 使用 `@import` 或构建工具合并。
2. **遵循 BEM 命名规范**：
- **BEM**：Block（块）、Element（元素）、Modifier（修饰符）。
- 示例：
```css
.card {} /* Block */
.card__title {} /* Element */
.card--highlighted {} /* Modifier */
```
3. **保持代码简洁**：
- 避免冗余选择器和样式。
- 使用简写属性（如 `margin: 10px 20px;` 代替 `margin-top: 10px; margin-right: 20px;`）。
**文章由ai编写，文章摘要也是，但不是同一款ai噢，注意甄别**
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
