• advanced css skills


    1.图片img 

    /* Keyword values */
    object-fit: fill;
    object-fit: contain;
    object-fit: cover;
    object-fit: none;
    object-fit: scale-down;
    
    /* Global values */
    object-fit: inherit;
    object-fit: initial;
    object-fit: unset;

    查了查,具体作用于替换元素,张鑫旭大神已经写过了。。大致就是些img input 这些内容可被src替换的咯

    拿图片来说吧,MDN上一目了然,fill就是按img元素大小填充满,不管src图片的原始比例(高宽)是否协调。

    contain就是保持原始图片比例下,将图片塞进这个img元素下。

    cover,保持图片比例,原始图片覆盖img元素,没在img content大小的部分就不显示了。

    none,保持原始图片!贼酷,只显示img (也就是img元素的宽高内)大小内的部分。

    scale-down,这个属性怪怪的,比较none和cover然后显示内容小的那个???这意思是优雅降级吗?

    2.伪类 

    :empty 比如<div></div> 可以用div:empty定位这个空元素

    :*-of-type 这个是真的酷,跟nth-child()像

    有:fisrt-of-type  :last-of-type  :only-of-type 还有:nth-of-type(2n+3) 这个是初始的第三个以后的+2N个定位(target我翻译成定位,感觉是CSS定位于某元素的意思,目标的话怪怪的)。

    3.calc() 感觉CSS也要开始了,什么LESS SASS 还得转换成CSS,见鬼去吧,我反正习惯CSS,那几个预处理器的好处,我感觉CSS新特性慢慢都会有滴。

    4.css 中属性设为unset 可以reset style .eg:color:unset 

    ??? 可能在调试的时候有用?或者大型项目的CSS处理!星星眼,我想弄一弄大型项目啊@!#@

    5.column 这个就是了 这个又是 

    大型项目 MDZZ 我都没得要用到这个的机会 

    留一手,预备以后用

    column-count 分列 eg:column-count:4 四列

    column-width 列宽

    columns =column-count+column-width eg: columns:3 200px;

    column-gap 间隔

    column-rule 列之间的border 我感觉是这意思没错

    column-span :all | 1 设置某元素横跨所有列 | 横跨一列 - - 

    column-fill 设置列长 auto | balance  自动设置 | 对列进行协调。浏览器应对列长度的差异进行最小化处理

    6.以上全是CSS属性 不是html tag !

    资料来源网络,感谢大佬们支持及 这个时代。

  • 相关阅读:
    验证码图片不刷新解决方法
    表单验证
    Thinkphp显示系统常量信息的方法(php的用法)
    原生sql语句执行
    Python中的模块(2)
    Python 正则表达式中级
    正则表达式 和 原生字符串 r
    collections模块
    时间模块
    random模块
  • 原文地址:https://www.cnblogs.com/bryanz/p/7133847.html
Copyright © 2020-2023  润新知