最新热议：CSS为什么这么难学？一定是你的方法不对，面试高频题目

基础面试题

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

| 符号 | 名称 | 作用 |

| — | — | — |

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

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

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

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

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

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

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

组合符优先级

"与"组合符、"或"组合符、"互斥"组合符都是为了表示属性值出现的情况，但这三者之间还有个优先级。例如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 | |

| | 30px 30% | |

| | 30px 30px | |

嚯！累死我了，这支持的写法也太多太多了吧！

四、多动手尝试

---

上一节，我们在学习clip-path属性的语法以后，知道了我们想要的圆圈裁剪（circle()）的语法怎么写，那么你就真的会了吗？可能你看了MDN给你举的例子，知道了circle(40%)大致实现的效果是咋样的，如下图

如我前文说的一样，MDN只给你列举了circle()这个函数最简单的写法，但我们刚刚学习了其语法，得知还有别的写法（例如circle(40% at left)），而且MDN文档也只是告诉你支持哪些语法，它也并没有明确告诉你，哪个语法的作用是怎么样的，能实现什么样的效果。

此时就需要我们自己上手尝试了

看一下效果，嗯，跟MDN展示的是一样的

再修改一下值clip-path: circle(60%)，看看效果

我似乎摸出了规律，看样子是以元素的中心为基准点，60%的意思就是从中心到边缘长度的60%为半径画一个圆，裁剪掉该圆之外的内容。这些都是MDN文档里没有讲到的，靠我亲手实践验证出来的。

接下来我们来试试其它的语法~

试试将值改成clip-path: circle(40% at top)

诶？很神奇！为什么会变成这个样子，我似乎还没找到什么规律，再把值改一下试试clip-path: circle(80% at top)

看样子圆心挪到了元素最上方的中间，然后以圆心到最下面边缘长度的80%为半径画了个圆进行了裁剪。至此我们似乎明白了circle()语法中at 后面的<position>数据类型是干什么的了，大概就是用来控制裁剪时画的圆的圆心位置

剩下的时间就交给你自己来一个一个试验所有的语法了，再举个简单的例子，比如你再试一下clip-path: circle(40% at 30px)，你一定好奇这是啥意思，来看看效果

直观上看，整个圆向左移动了一些距离，在我们没设置at 30px时，圆心是在元素的中心的，而现在似乎向右偏移了，大胆猜测at 30px的意思是圆心的横坐标距离元素的最左侧30px

接下来验证一下我们的猜测，继续修改其值clip-path: circle(40% at 0)

很明显此时的圆心是在最左侧的中间部分，应该可以说是证明了我们刚才的猜测了，那么不妨再来验证一下纵坐标的？继续修改值clip-path: circle(40% at 0 0)

不错，非常顺利，at 0 0中第二个0的意思就是圆心纵坐标离最上方的距离为0的意思。那么我们此时就可以放心得得出一个结论了，对于像30px、33em这样的 数据类型的值，其对应的坐标是如图所示的

好了，本文篇幅也已经很长了，我就不继续介绍其它语法的使用了，刚才纯粹是用来举个例子，因为本文我们本来就不是在介绍circle()的使用教程，感兴趣的读者可以下去自己动手实践哦~

所以实践真的很重要很重要！！ MDN文档没有给你列举每种语法对应的效果，因为每种都列出来，文档看着就很杂乱了，所以这只能靠你自己。记得张鑫旭大佬在一次直播中讲到，他所掌握的CSS的特性，也都是用大量的时间去动手试出来的，也不是看看啥文档就能理解的，所以你在大佬们的一篇文章中了解到的某个CSS属性的使用，可能是他们花费几小时甚至十几个小时研究出来的。

CSS很多特性会有兼容性问题，因为市面上有很多家浏览器厂商，它们支持的程度各不相同，而我们平常了解CSS某个属性的兼容性，是这样的

查看MDN的某个属性的浏览器兼容性

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件

cGc?x-oss-process=image/format,png)

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件