https://flukeout.github.io/ 

**CSS Diner** 是一个练习CSS中的选择器很不错的网站，本文复盘每题答案（共32题）


常用英文单词：

- plates：盘子
- bento：盒饭、便当
- pickle：腌黄瓜

⭐如果闯关过程中看不懂英文建议把题目翻译一下

选择盘子，类型选择器，答案：`plate`
![CSS Diner 通关教程001](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-001.png)

第一题右边的提示是类别选择器，选择`plate`则会把所有`plate`选中(好像说了句废话)。这里强调一点，题目的`plate`并不是HTML/CSS的标签之类的，只是题目需要
![CSS Diner 通关教程002](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-002.png)


第一题的类似，答案是`bento`
![CSS Diner 通关教程003](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-003.png)

ID选择器，右边有例子，答案是`#fancy`
![CSS Diner 通关教程004](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-004.png)

后代选择器，答案是`plate>apple`或者`plate apple`
![CSS Diner 通关教程005](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-005.png)

将后代选择器与ID选择器结合，答案是`#fancy pickle`
![CSS Diner 通关教程006](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-006.png)

class选择器，答案是`.small`
![CSS Diner 通关教程007](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-007.png)

将类别选择器与元素选择器结合，要注意如果有元素选择器，则需将元素选择器放在前面。答案是`orange.small`
![CSS Diner 通关教程008](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-008.png)

还是类别选择器与元素选择器结合，答案是`bento orange.small`
![CSS Diner 通关教程009](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-009.png)

并集，答案是`plate，bento`
![CSS Diner 通关教程010](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-010.png)

通配，答案是`*`
![CSS Diner 通关教程011](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-011.png)

通配的应用
![CSS Diner 通关教程012](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-012.png)

兄弟选择器，答案是`plate + apple`
![CSS Diner 通关教程013](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-013.png)

也是兄弟选择器，答案是`bento ~ pickle`
![CSS Diner 通关教程014](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-014.png)

**两种兄弟选择器：**
1. +表示只要一个
2. ~表示全都要
**两种后代选择器：**
1. 空格表示只要是后代都行
2. `>`表示只要第一个
后代选择器，答案是`pickle > apple`

![CSS Diner 通关教程015](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-015.png)

伪类选择器，选择第几个后代，答案是`orange:first-child`
![CSS Diner 通关教程016](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-016.png)

注意这题的答案不能是`plate:first-child`，因为首先要选中该类，然后再是该类的限制
![CSS Diner 通关教程017](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-017.png)
唯一子元素，答案是`apple:only-child,plate>pickle`
![CSS Diner 通关教程018](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-018.png)

这题我的答案比较简单，网上有更好的答案：`plate>:only-child`
![CSS Diner 通关教程019](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-019.png)
尾元素，答案是`apple:last-child,pickle:last-child`
![CSS Diner 通关教程020](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-020.png)

第几个子元素，答案是`plate:nth-child(3)`
![CSS Diner 通关教程021](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-021.png)

倒数第几个元素，答案是`bento:nth-last-child(3)`
![CSS Diner 通关教程022](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-022.png)

同样是子元素，换成了类型，这里与`first-child`区别开来，因为这里并不要紧接着父元素，答案是`apple:first-of-type`
![CSS Diner 通关教程023](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-023.png)

还是子类伪元素，现在变成了偶数次，答案是`plate:nth-of-type(2n)`
![CSS Diner 通关教程024](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-024.png)

`plate:nth-of-type(2n+3)`
![CSS Diner 通关教程025](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-025.png)

唯一，答案是`apple:only-of-type`
![CSS Diner 通关教程026](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-026.png)

最后一种类型，答案是`orange:last-of-type,apple:last-of-type`
![CSS Diner 通关教程027](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-027.png)

取空，答案是`bento:empty`
![CSS Diner 通关教程028](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-028.png)

取非，答案是`apple:not(.small)`
![CSS Diner 通关教程029](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-029.png)

属性值，答案是`[for]`
![CSS Diner 通关教程030](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-030.png)

属性值搭配元素，答案是`plate[for]`
![CSS Diner 通关教程031](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-031.png)

具体属性值，答案是`for="Vitaly"`
![CSS Diner 通关教程032](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-032.png)

匹配前缀，答案是`[for^="Sa"]`
![CSS Diner 通关教程033](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-033.png)

匹配后缀，答案是`[for$="to"]`
![CSS Diner 通关教程033](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-033.png)

匹配中间部分，答案是`[for*="obb"]`
![CSS Diner 通关教程034](https://dageling003-vanblog-picgo-1323173970.cos.ap-shanghai.myqcloud.com/Article%20Picture/%E5%89%8D%E7%AB%AF/css/CSS%20Diner%20%E9%80%9A%E5%85%B3%E6%95%99%E7%A8%8B/CSS%20Diner-034.png)

CSS Diner 通关教程

flexboxFROGGY每题答案复盘

## HTML 概念

> **H**yper**T**ext **M**arkup **L**anguage 超文本标记语言。



## HTML 作用

> HTML 就是负责描述页面的语义

## 一个 demo 认识 html

```html
<!DOCTYPE html>
<html>
      
  <head>
            
    <meta charset="utf-8" />
            
    <title>页面标题</title>
        
  </head>
      
  <body>
            
    <h1>标题</h1>
            
    <p>段落</p>
        
  </body>
</html>
```

| 标签                  | 说明                                                         |
| --------------------- | ------------------------------------------------------------ |
| `**<!DOCTYPE html>**` | 声明为 HTML5 文档                                            |
| `**<html>**`          | 元素是 HTML 页面的根元素                                     |
| `**<head>**`          | 元素包含了文档的元（meta）数据，如 <`meta charset="utf-8">` 定义网页编码格式为  `**utf-8**`。 |
| `**<title>**`         | 元素描述了文档的标题，浏览器标签名                           |
| `**<body>**`          | 元素包含了可见的页面内容                                     |
| `**<h1>**`            | 元素定义一个大标题                                           |
| `**<p>**`             | 元素定义一个段落                                             |
| `****`   | 注释内容                                                     |



## 字符集

| 字符集 | 说明                                                 |
| ------ | ---------------------------------------------------- |
| UTF-8  | 字多，有各种国家的语言，但是保存尺寸大，文件臃肿；   |
| gb2312 | 字少，只用中文和少数外语和符号，但是尺寸小，文件小巧 |



## 关键字和描述

### head 和 meta

| head meta               | 说明                              |
| ----------------------- | --------------------------------- |
| meta name="Description" | 定义 html 页面描述有助于 seo 优化 |
| meta name="Keywords"    | 定义关键，告诉搜索引擎网页的内容  |



### head 和 title

| 名字  | 说明                                          |
| ----- | --------------------------------------------- |
| title | 是网页的标题，也是有助于 SEO 搜索引擎优化的。 |



## HTML 基本语法特点

### 不敏感形式

- 换行不敏感
- tab 不敏感

### html 标签种类

- 容器级别（能容纳任何 html 元素）
- 文本级别（能容纳文字、图片、表单元素）

## html 表现形式

- 双标签 `<div></div>`
- 单标签 `<img />`
- 标签中的元素属性 `<div id="ab"></div>`

### 全局属性

更多的全局属性查看 MDN 总结的 [全局属性](https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FHTML%2FGlobal_attributes)。

## html 语义化标签

### HTML5 新特性、语义化

1.**概念**

HTML5 的语义化指的是`合理正确的使用语义化的标签来创建页面结构`。【正确的标签做正确的事】

1. **语义化的优点**:

- 更好的展示展示效果
- 代码结构清晰，易于阅读与维护，
- 有利于搜索引擎优化（SEO）

#### 1. 语义化标签

- header：定义文档的页眉（头部）；
- nav：定义导航链接的部分；
- footer：定义文档或节的页脚（底部）；
- article：定义文章内容；
- section：定义文档中的节（section、区段）；
- aside：定义其所处内容之外的内容（侧边）；

#### 2. 媒体标签

- audio：音频
- video 视频
- form: 表单
- progress： 进度条
- meter 度量器

## HTML 注释

```html

```

## HTML 字符实体

**HTML 中的预留字符必须被替换为字符实体。**

[字符实体](https://link.juejin.cn/?target=https%3A%2F%2Fwww.w3school.com.cn%2Fhtml%2Fhtml_entities.asp)

| 显示结果 | 描述              | 实体名称        | 实体编号 |
| -------- | ----------------- | --------------- | -------- |
|          | 空格              | ` `             | ` `      |
| <        | 小于号            | `<`             | `<`      |
| 大于号   | `>`               | `>`             |          |
| &        | 和号              | `&`             | `&`      |
| "        | 引号              | `"`             | `"`      |
| '        | 撇号              | `'` (IE 不支持) | `'`      |
| ￠       | 分（cent）        | `¢`             | `¢`      |
| £        | 镑（pound）       | `£`             | `£`      |
| ¥        | 元（yen）         | `¥`             | `¥`      |
| €        | 欧元（euro）      | `€`             | `€`      |
| §        | 小节              | `§`             | `§`      |
| ©        | 版权（copyright） | `©`             | `©`      |
| ®        | 注册商标          | `®`             | `®`      |
| ™        | 商标              | `™`             | `™`      |
| ×        | 乘号              | `×`             | `×`      |
| ÷        | 除号              | `÷`             | `÷`      |



## html 图片

插入图片的方法：

```html
<img **src="baby.jpg" ** alt="提示" /> 
```

| img 属性 | 属性说明                   |
| -------- | -------------------------- |
| src      | 地址属性名                 |
| alt      | 不能正常显示的备用显示文字 |



## 超链接

```html
<a href="1.html">结婚照</a>
```

| a 属性 | 属性说明                                               |
| ------ | ------------------------------------------------------ |
| href   | 表示 a 指向的链接                                      |
| title  | 悬停显示文本                                           |
| target | `_blank`新建一个窗口，另外还支持：`_self/_parent/_top` |



## 列表

### 有序

有序列表使用 `ol > li` 方式进行书写，注意 li`(容器标签)` 元素不能单独存在。

```html
<ul>
  <li>A Cat</li>
  <li>A Dog</li>
</ul>
```

### 无序

无序列表使用 `ul > li` 方式进行书写，注意 li`(容器标签)` 元素不能单独存在。

```html
<ul>
  <li>A Cat</li>
  <li>A Dog</li>
</ul>
```

### 自定义

|      |                      |
| ---- | -------------------- |
| dl   | 定义列表             |
| dt   | 定义标题（容器标签） |
| dd   | 定义描述（容器标签） |



使用什么标签根据语义来做是做好，这样最大程度的满足了机器和人的阅读。

## div

使用广泛的元素（本意是 division），如上面元素所示，是一个容器元素任何元素都能用。

## span 的却别

与 div 有很多的相似之后， span 表示一个区域标签，一般用于放置文本。

## 表格

| 表格相关元素 | 说明           |
| ------------ | -------------- |
| table        | 包裹元素       |
| th           | 定义表格的表头 |
| tr           | 定义表格的行   |
| td           | 定义表格单元   |



几个核心元素

```html
<table border="1">
  <tr>
    <td>1111</td>
    <td>1122</td>
  </tr>
  <tr>
    <td>2211</td>
    <td>2222</td>
  </tr>
</table>
```

## 表单

form 元素

### 文本框

- input type=text

### 密码框

- input type=password

### 单选按钮

- input type=radio

### 复选框

- input type=checkbox

### 下拉列表

```html
<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
  <option>F</option>
  <option>G</option>
</select>
```

### 多行文本框（文本域）

```html
<textarea cols="30" rows="10"></textarea>
```

常见属性：

- cols 属性列
- rows 属性行

查看更多 [textarea 属性](https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FHTML%2FElement%2Ftextarea)

### 三种按钮

1）普通按钮：

```html
<input type="**button**" value="I'm a button" />
```

2）提交按钮：

```html
<input type="**submit**" />
```

3）重置按钮：

```html
<input type="**reset**" />
```

## HTML 元素

### 块元素

**块级（block）元素的特点：**

- 总是在新行上开始；
- 高度，行高以及外边距和内边距都可控制；
- 宽度缺省是它的容器的 100%，除非设定一个宽度；
- 它可以容纳内联元素和其他块元素

| 块元素     | 说明             |
| ---------- | ---------------- |
| p          | 段落             |
| table      | 表格             |
| blockquote | 引用             |
| center     | 居中对齐         |
| dir        | 目录列表         |
| div        | 常用块级标签     |
| form       | 表单             |
| h1         | 标题（6 个级别） |
| hr         | 水平分割线       |
| isindex    | input prompt     |
| menu       | 菜单列表         |
| ol         | 排序列表         |
| pre        | 格式化文本       |
| ul         | 无序列表         |



### 内联元素

**内联（inline）元素的特点：**

- 和其他元素都在一行上；
- 高，行高及外边距和内边距不可改变；
- 宽度就是它的文字或图片的宽度，不可改变；
- 内联元素只能容纳文本或者其他内联元素。

| 块状元素 | 说明                         |
| -------- | ---------------------------- |
| abbr     | 缩写                         |
| acronym  | 首字                         |
| b        | 粗体                         |
| big      | 大字体                       |
| br       | 换行                         |
| cite     | 引用                         |
| code     | 引用代码                     |
| dfn      | 定义字段                     |
| em       | 强调                         |
| i        | 斜体                         |
| img      | 图片                         |
| input    | 输入框                       |
| label    | 表格标签                     |
| q        | 行内引用                     |
| s        | 中划线                       |
| select   | 项目选择                     |
| small    | 小字体                       |
| span     | 常用内联容器，定义文本内区块 |
| strike   | 中划线                       |
| strong   | 粗体强调                     |
| sub      | 下标                         |
| sup      | 上标                         |
| a        | 锚点                         |



### 可变元素

根据上下文确定块状元素和内联元素：

| 可变元素 | 说明          |
| -------- | ------------- |
| `applet` | java applet   |
| `button` | 按钮          |
| `del`    | 删除文本      |
| `frame`  | inline frame  |
| `ins`    | 插入的文本    |
| `map`    | 图片区块(map) |
| `object` | object 对象   |
| `script` | 客户端脚本    |



## 参考

- [全局属性](https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FHTML%2FGlobal_attributes)

HTML 基础知识点总结

**SCSS（Sassy CSS）** 是CSS的一个超集，它增加了许多特性，如变量、嵌套、混合、继承等，使得CSS的编写更加高效和模块化。以下是一些基础的SCSS语法和概念：



## 1. 变量
在SCSS中，你可以使用变量来存储颜色、字体、边距等值，然后在需要的地方引用这些变量。

```scss
$primary-color: #3498db;
$font-stack: Helvetica, Arial, sans-serif;

body {
  color: $primary-color;
  font-family: $font-stack;
}
```

## 2. 嵌套
SCSS允许你在选择器中嵌套，这样可以更清晰地表示层级关系。

```scss
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
```

## 3. 混合（Mixins）
混合类似于函数，可以在多个地方复用一组CSS规则。

```scss
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.button {
  @include border-radius(10px);
}
```

## 4. 继承
继承允许一个选择器继承另一个选择器的所有样式。

```scss
%message-shared {
  padding: 10px;
  border: 1px solid #ccc;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}
```

## 5. 导入
你可以将多个SCSS文件导入到一个主文件中，便于模块化管理。

```scss
@import 'variables';
@import 'mixins';
@import 'base';
```

## 6. 计算
SCSS支持基本的数学运算，如加、减、乘、除。

```scss
$base-padding: 10px;
$base-margin: $base-padding * 2;

.container {
  padding: $base-padding;
  margin: $base-margin;
}
```

## 7. 条件和循环
SCSS支持`@if`、`@for`、`@each`和`@while`等控制结构。

```scss
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
```

## 8. 函数
SCSS允许你定义自己的函数。

```scss
@function calculate-rem($px) {
  @return $px / 16 * 1rem;
}

body {
  font-size: calculate-rem(16);
}
```

## 编译SCSS
SCSS需要编译成CSS才能在浏览器中使用。你可以使用命令行工具如`sass`，或者使用IDE插件来实时编译。

```bash
sass input.scss output.css
```

## 总结
SCSS提供了许多强大的功能，使得CSS的编写更加高效和可维护。通过使用变量、嵌套、混合、继承等特性，你可以编写更加模块化和可读性强的样式代码。

scss教程

CSS中有一个叫做`媒体查询（Media queries）`的功能，这个功能可以让你查询当前运行网页的设备的一些信息，让你可以通过这些信息来调整网页的布局和样式等。



# 设备屏幕宽度常用断点

> 设备屏幕设备尺寸很多，一般写断点时以 Apple 设备的屏幕尺寸为标准

- `min-width`  表示**移动端优先**
  - 样式默认在所有屏幕尺寸下都有效
  - 常用于先写移动端的场景
- `max-width`  表示  **PC 端优先**
  - 样式默认在指定屏幕尺寸下有效
  - 常用于先写 PC 端的场景

# 移动端

> 移动端包含手机和平板

```css
/* iPhone 4 / 5 等 */
@media (min-width: 320px) {
}

/* iPhone 6 - 8 / X / XS 等 */
@media (min-width: 375px) {
}

/* iPhone 6 - 8 Plus / XR 等 */
@media (min-width: 414px) {
}

/* 常用断点（无特定机型） */
@media (min-width: 640px) {
}

/* iPad mini 等 */
@media (min-width: 768px) {
}

/* 常用断点（无特定机型） */
@media (min-width: 960px) {
}

/* iPad Pro 12.9 */
@media (min-width: 1024px) {
}
```

# PC 端

```css
@media (max-width: 1280px) {
}

@media (max-width: 1366px) {
}

@media (max-width: 1440px) {
}

@media (max-width: 1920px) {
}

@media (max-width: 2560px) {
}
```

# 屏幕尺寸查询工具

- [屏幕尺寸大全](https://uiiiuiii.com/screen/index.htm)
- [screen size map](https://screensizemap.com/)  可视化屏幕尺寸比较