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 !

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

原文地址:https://www.cnblogs.com/bryanz/p/7133847.html