热议：CSS为什么这么难学？一定是你的方法不对

那么我们到底该如何学习CSS呢？ 为此我列了一个简单的大纲，想围绕这几点大概讲一讲

一、书籍、社区文章

---

这应该是大家学习CSS最常见的方式了（我亦如此）。有以下几个场景：

场景一：开发中遇到「文本字数超出后以省略号(…)展示」的需求，打开百度搜索：css字数过多用省略号展示，诶~搜到了！ctrl+c、ctrl+v，学废了，完工！

场景二：某天早晨逛技术社区，看到一篇关于CSS的文章，看到标题中有个CSS属性叫resize，resize属性是啥，我咋没用过？点进去阅读得津津有味~ two minutes later ~ 奥，原来还有这个属性，是这么用的呀，涨姿势了！

场景三：我决定了，我要好好学CSS，打开购物网站搜索：CSS书籍，迅速下单！等书到了，开始每天翻阅学习。当然了此时又有好几种情况了，分别是：

• 就只有刚拿到书的第一天翻阅了一下，往后一直落灰

• 看了一部分，但又懒得动手敲代码，最终感到无趣放弃了阅读

• 认认真真看完了书，也跟着书上的代码敲了，做了很多笔记，最终学到了很多

无论是上面哪几种方式，我觉得都是挺不错的，顺便再给大家推荐几个不错的学习资源

• 张鑫旭大佬的博客

• 大漠老师的W3Cplus

• coco大佬的iCSS

毕竟站在巨人的肩膀上，才是最高效的，你们可以花1个小时学习到大佬们花1天才总结出来的知识

二、记住CSS的数据类型

---

CSS比较难学的另一个点，可能多半是因为CSS的属性太多了，而且每个属性的值又支持很多种写法，所以想要轻易记住每个属性的所有写法几乎是不太可能的。最近在逛博客时发现原来CSS也有自己的数据类型，这里引用一下张鑫旭大佬的CSS值类型文档大全，方便大家后续查阅

简单介绍一下CSS的数据类型就是这样的：

图中用<>括起来的表示一种CSS数据类型，介绍一下图中几个类型：

• ：表示值可以是数字

• ：表示元素的尺寸长度，例如3px、33em、34rem

• ：表示基于父元素的百分比，例如33%

• ：表示值既可以是 ，也可以是

• ：表示元素的位置。值可以是 、、left/right/top/bottom

来看两个CSS属性：

• 第一个是width，文档会告诉你该属性支持的数据类型有 和 ，那么我们就知道该属性有以下几种写法：width: 1px、width: 3rem、width: 33em、width: 33%

• 第二个属性是background-position，文档会告诉你该属性支持的数据类型有 ，那么我们就知道该属性有以下几种写法：background-position: left、background-position: right、background-position: top、background-position: bottom、background-position: 30%、background-position: 3rem

从这个例子中我们可以看出，想要尽可能得记住更多的CSS属性的使用，可以从记住CSS数据类型（现在差不多有40+种数据类型）开始，这样你每次学习新的CSS属性时，思路就会有所转变，如下图

没记住CSS数据类型的我：

记住CSS数据类型的我：

不知道你有没有发现，如果文档只告诉你background-position支持 数据类型，你确定你能知道该属性的全部用法吗？你确实知道该属性支持background-position: 3rem这样的写法，因为你知道 数据类型包含了 数据类型，但你知道它还支持background-position: bottom 50px right 100px;这样的写法吗？为什么可以写四个值并且用空格隔开？这是谁告诉你的？

这就需要我们了解CSS的语法了，请认真看下一节

三、读懂CSS的语法

---

我之前某个样式中需要用到裁剪的效果，所以准备了解一下CSS中的clip-path属性怎么使用，于是就查询了比较权威的clip-path MDN，看着看着，我就发现了这个

我这才意识到我竟然连CSS的语法都看不懂。说实话，以前无论是初学CSS还是临时找一下某个CSS属性的用法，都是直接百度，瞬间就能找到自己想要的答案（例如菜鸟教程），而这次，我是真的傻了！ 因为本身clip-path这个属性就比较复杂，支持的语法也比较多，光看MDN给你的示例代码根本无法Get到这个属性所有的用法和含义（菜鸟教程就更没法全面地教你了）

于是我就顺着网线去了解了一下CSS的语法中的一些符号的含义，帮助我更好得理解语法

因为关于CSS语法符号相关的知识在CSS属性值定义语法 MDN上都有一篇超级详细的介绍了（建议大家一定要先看看MDN这篇文章！！非常通俗易懂），所以我就不多做解释了，这里只放几个汇总表格

属性组合符号

属性组合：表示多个属性值的书写组合情况。例如在border: 1px solid #000中，1px能否和solid互换位置、#000能否省略等等，这些都是属性的组合情况

| 符号 | 名称 | 作用 |

| — | — | — |

| 空格 | 并置 | 空格左右两侧的属性顺序不能互换 |

| , | 逗号(分隔符) | 逗号两侧的属性之间必须用逗号隔开 |

| / | 斜杠(分隔符) | 斜杠两侧的属性之间必须用斜杠隔开 |

| && | "与"组合符 | "与"组合符两侧的属性都必须出现，但左右顺序随意 |

| || | "或"组合符 | "或"组合符两侧的属性至少出现一个，且左右顺序随意 |

| | | "互斥"组合符 | "互斥"组合符两侧的属性恰好只出现一个 |

| [] | 中括号 | 中括号包住的内容表示一个整体，可以类似看成数学中的小括号() |

组合符优先级

"与"组合符、"或"组合符、"互斥"组合符都是为了表示属性值出现的情况，但这三者之间还有个优先级。例如bold | thin || <length>，其中“或”组合符的优先级高于“互斥”组合符，所以该写法等价于bold | [thin || <length>]

| 符号 | 名称 | 优先级（数字越大，优先级越大） |

| — | — | — |

| 空格 | 并置 | 4 |

| && | "与"组合符 | 3 |

| || | "或"组合符 | 2 |

| | | "互斥"组合符 | 1 |

属性重复符号

属性重复：表示某个或某些属性的出现次数。例如在rgba(0, 0, 0, 1)中，数字的个数能否是3个、最后一位能否写百分比。这有些类似于正则的重复符号

| 符号 | 名称 | 作用 |

| — | — | — |

| 无 | 不写符号 | 默认。不写符号表示这个属性只出现一次 |

| + | 加号 | 加号左侧的属性或整体出现一次或多次 |

| ? | 问号 | 问号左侧的属性或整体出现零次或一次 |

| * | 星号 | 星号左侧的属性或整体出现零次或一次或多次 |

| # | 井号 | 井号左侧的属性或整体出现一次或多次，且以逗号(,)隔开 |

| {A, B} | 大括号 | 大括号左侧的属性或整体最少出现A次，最多出现B次 |

| ! | 感叹号 | 感叹号左侧的整体中必须出现一个属性，即使该整体中全部属性都声明了可以出现零次 |

解读CSS语法

以本节clip-path的语法为例，我们来简单对其中某一个属性来进行解读（只会解读部分哦，因为解读全部的话篇幅会很长很长）

先看看整体的结构

一共分为四部分，顺序是从上到下的，每两个部分之间都以where来连接，表示的是where下面的部分是对上面那个部分的补充解释

①：表示的是clip-path这个属性支持的写法为：要不只写 数据类型的值，要不就最起码从 和 这两者之间选一种类型的值来写，要不就为none。

②：我们得知①中的 数据类型支持的写法为：inset()、circle()、ellipse()、polygon()、path()这5个函数

③：因为我们想了解circle()这个函数的具体使用，所以就先只看这个了。我们得知circle()函数的参数支持 和 两种数据结构，且两者都是可写可不写，但如果要写 ，那前面必须加一个at

④：首先看到 支持的属性是 （这个顾名思义就是<length>和<percentage>）、closest-side、farthest-side。而 数据类型的语法看起来就比较复杂了，我们单独来分析，因为真的非常非常长，我将 格式化并美化好给你展现出来，便于你们阅读（我也建议你们如果在学习某个属性的语法时遇到这么长的语法介绍，也像我一下把它格式化一下，这样方便你们阅读和理解）

如图可得，整体分为三大部分，且这三部分是互斥关系，即这三部分只能出现一个，再根据我们前面学习的CSS语法的符号，就可以知道怎么使用了，因为这里支持的写法太多了，我直接列个表格吧（其实就是排列组合）！如果还有不懂的，你们可以仔细阅读一下MDN的语法介绍或者也可以评论区留言问我，我看到会第一时间回复！

类型支持的写法

| 第一部分 | 第二部分 | 第三部分 |

| — | — | — |

| left | left | left 30px top 30px 或 top 30px left 30px |

| center | center | left 30px top 30% 或 top 30% left 30px |

| right | right | left 30px bottom 30px 或 bottom 30px left 30px |

| top | 30% | left 30px bottom 30% 或 bottom 30% left 30px |

| bottom | 3px 或 3em 或 3rem 等长度值 | left 30% top 30px 或 top 30px left 30% |

| left top 或 top left | left top | left 30% top 30% 或 top 30% left 30% |

| left center 或 center left | left center | left 30% bottom 30px 或 bottom 30px left 30% |

| left bottom 或 bottom left | left bottom | left 30% bottom 30% 或 bottom 30% left 30% |

| center center | left 30% | right 30px top 30px 或 top 30px right 30px |

| right top 或 top right | left 30px | right 30px top 30% 或 top 30% right 30px |

| right center 或 center right | center top | right 30px bottom 30px 或 bottom 30px right 30px |

| right bottom 或 bottom right | center center | right 30px bottom 30% 或 bottom 30% right 30px |

| | center bottom | right 30% top 30px 或 top 30px right 30% |

| | center 30% | right 30% top 30% 或 top 30% right 30% |

| | center 30px | right 30% bottom 30px 或 bottom 30px right 30% |

| | right top | right 30% bottom 30% 或 bottom 30% right 30% |

| | right center | |

| | right bottom | |

| | right 30% | |

| | right 30px | |

| | 30% top | |

| | 30% center | |

| | 30% bottom | |

| | 30% 30% | |

| | 30% 30px | |

| | 30px top | |

| | 30px center | |

| | 30px bottom | |

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

| | 30% top | |

| | 30% center | |

| | 30% bottom | |

| | 30% 30% | |

| | 30% 30px | |

| | 30px top | |

| | 30px center | |

| | 30px bottom | |

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

[外链图片转存中…(img-jTUCJvH3-1719254302432)]