css随笔

作者: D_R_M | 来源:发表于2024-03-24 21:42 被阅读0次

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

    相关文章

      网友评论

          本文标题:css随笔

          本文链接:https://www.haomeiwen.com/subject/dvglartx.html