-webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-fill: auto; -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-fill: auto;
我是一个初学者在css,当我看着一些CSS代码,有一天,我发现这些行。在教程中我习惯了学习CSS,我从来没有见过这样的线。有人可以解释这些线路给我或给我一个源,我可以学习实现这样的线?
提前致谢!
解决方法
这些是由相关呈现引擎(-webkit for Chrome,Safari; -moz for Firefox,-o for Opera,-ms for Internet Explorer)提供的供应商前缀属性。通常,它们用于实现新的或专有的CSS特性,然后由W3进行最终澄清/定义。
这允许为每个单独的浏览器/呈现引擎特定地设置属性,以便实现之间的不一致性被安全地考虑。随着时间的推移,前缀将被移除(至少在理论上),因为属性的未前缀,最终版本在该浏览器中实现。
为此,通常认为良好的做法是首先指定供应商加前缀的版本,然后指定非加前缀的版本,以便非加前缀的属性在实现后将覆盖供应商加前缀的属性设置;例如:
.elementClass { -moz-border-radius: 2em; -ms-border-radius: 2em; -o-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em; }
具体来说,为了解决你的问题中的CSS,你引用的行:
-webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-fill: auto; -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-fill: auto;
指定Webkit浏览器和Firefox的列数,列间距和列填充属性。
参考文献:
> CSS Multi-column layout module。
> ‘In defence of Vendor Prefixes’ (Meyerweb.com)。
> Vendor prefix lists (Meyerweb.com)。