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; 在删除它的时候会导致整个内容被清空
网友评论