FrankKai

### 9.内容两行展示，多余文字显示省略号 - Chrome官方对于多行文本截断的说明：https://chromestatus.com/feature/5680142707851264 - 截断测试：firefox77上测试生效；基于Chromium开发的Edge83也测试生效 - 如果在ie上无法使用-webkit-line-clamp，可以通过clamp.js实现截断效果: [line-clamp](https://css-tricks.com/almanac/properties/l/line-clamp/) - 有些情况需要结合`overflow:hidden;text-overflow:ellipsis`一起实现截断 ```css .line-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } ``` 如何解决"打包后`-webkit-box-orient:vertical;`消失"问题？ 注释掉autoprefixer对它的处理。 ```js /* autoprefixer: ignore next */...

### 10. Edge浏览器不生效`word-break: break-word;` 需要使用`word-break: break-all`替代，这对于Edge和Chrome均适用。

### 11.@charset是什么？ - 指明样式表中的字符编码格式，必须位于样式文件最前面。 - 由于它不是@nested statement，所以不能再contiditional group at-rules中生效。 - 多个@charset定义时，第一个设置的生效。 #### 拓展知识点 ##### at-rule是什么？ at-rule是一个指明CSS如何表现的CSS语句。 语法：`@IDENTIFIER(RULE)` - @chatset-定义样式表使用的字符集 - @import-告诉CSS引擎包括其他的样式表 - @namespace-告诉CSS引擎所有的内容必须带XML命名空间的前缀 - **Nested at-rules**-一个嵌套语句的子集，可以用来作为样式表的语句以及条件组规则： - @media 媒体查询 -...

### 12.继承属性(inheritable properties)和非继承属性(non-inherited properties) 在CSS中，继承控制了一个元素属性值没有特别指定时的表现。任何CSS属性都可以查看是否是可继承的。 #### 继承属性 - 如果一个继承属性没有为元素指定值，这个元素会从父元素获得属性的计算值 - 只有文档的根元素，才可以获得属性摘要给定的初始值 color是一个典型的继承属性。 ```css p { color: green; } ``` ```html This paragraph has emphasized text in it. ``` ”emphasized text“也是绿色的，是因为em元素从p元素继承了color的值。所以它没有使用自己本身的初始值。（这个初始值是用于页面没有指定color时用于根元素的。）...

### 13.word-break的break-all和break-word的区别是什么 - break-all 不管是不是单词都能break，但是chrome80上不能。 - break-word 只在单词处break。

### 14.overflow:auto与overflow:scroll的区别？ 浏览器在内容溢出时增加滚动条：`overflow:auto` 。 >Desktop browsers provide scrollbars if content overflows. 明确告诉用户这里有滚动条：`overflow:scroll`。 因为scroll的话，滚动条一直在。 浏览器总是显示滚动条，不管是否实际剪切了任何内容，以防止滚动条在内容更改时出现或消失。 >Browsers always display scrollbars whether or not any content is actually clipped, preventing scrollbars from appearing...

### 15. rem，em，vh，vw，vmin，vmax - rem 继承root元素的font-size，比如html Represents the font-size of the root element (typically ). When used within the root element font-size, it represents its initial value (a common browser...

### 文字截断换行 ```js -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; text-overflow: ellipsis; white-space: pre-wrap; overflow: hidden; ```

#### 匹配后3个child div ```css div: nth-last-child( -n + 3) { ... } ```

### 最简demo 这个demo包含了，参与者，带箭头实线，带箭头虚线，备注，循环，可以覆盖常见场景。 - mermaid作为markdown代码片段的一种类型，标注后支持md即可解析 - sequenceDiagram声明图形为时序图 ```mermaid sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John:...