svg作为背景使用时取消长宽比锁定

preserveAspectRatio="none"

svg不继承父元素颜色处理办法

1.svg标签中加入 fill="currentColor"
2.path标签中去掉 fill="blue"

css 计数器

counter-reset:<计数器名>;  //重置计数器
counter-set:<计数器名> <值>; //为计数器设置指定值
counter-increment:<计数器名>; //计数器累+1
counter(<计数器名>); //使用计数器

//https://www.runoob.com/try/try.php?filename=trycss_gen_counter-reset

css 逻辑判断

:not();  //取反选择器
:placeholder-shown // <input> 或 <textarea> 元素显示 placeholder text 时生效。
//input:not(:focus):not(:placeholder-shown)  input未获取焦点 并且 input有文字输入

css文字换行

line-break
这个属性定义在什么位置断开文本行，以防止溢出容器。不过，该属性已被 CSS Text Module Level 4 中的 overflow-wrap 属性取代。取值有：
auto：默认值，由浏览器决定换行位置。
loose：在空白处、字符之间、CJK（中日韩）文字之间换行。
normal：与 auto 相同。
strict：只在字符之间、CJK（中日韩）文字之间换行：
anywhere：在每个印刷字符单元（typographic character unit）的周围，都有一个自动换行（soft wrap）的机会，包括任何标点符号（punctuation character）或是保留的空白字符（preserved white spaces），或是单词之间。但忽略任何用于阻止换行的字符，即使是来自 GL、WJ 或 ZWJ 字符集的字符，或是由 word-break 属性强制的字符。不同的换行机会拥有相同的优先级。也不应用断字符（hyphenation，可能是 "-"）。

word-break
normal 使用浏览器默认的换行规则。
break-all 任意字符都换行，这个会把长英文单词切割换行，但是对符号无效果
keep-all 这个属性对英文单词的表现和normal一致，主要是针对中文，韩文等，会以中文后的符号为节点换行，如果没有符号，则不会换行
break-word (已废弃不建议使用)这个属性可以保证符号和长英文都能换行，不会溢出容器。也就是尽可能语义化换行，所以段尾就有可能有一大段的空白。

overflow-wrap
normal 行只能在正常的单词断点处中断。（例如两个单词之间的空格）。
anywhere 上面word-break:break-word表现形式一样
break-word 这个属性正常表现也是和anywhere一致。不一样的地方是，特殊情况下，anywhere会以元素的最小宽度换行，而break-word不会，它是尽量保证能正常换行。

这种特殊情况要配合width:min-content和max-width就能看出区别

在width: min-content下， break-word是尽可能保证换行，anywhere是以最小宽度换行，normal是长英文和符号溢出，不会换行。

我们平时文本换行，用的word-break:break-word比较多，因为它至少不会溢出和尽可能保证可读性，但是未来可能会废弃这个属性值⚠️。
所以我们可以使用overflow-wrap: anywhere或者overflow-wrap: break-word来代替。

word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。word-wrap 现在被当作 overflow-wrap 的“别名”。稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。

HTML元素 contenteditable 属性

如果contenteditable中的最后一个子元素被设置了user-select: none; 在删除它的时候会导致整个内容被清空