前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

css3几个特殊属性

css3
1. <style scoped>
m20,scoped令CSS的作用范围限定到style节点的父级节点div。
例:<div><style scoped>p { color: red }</style><p>Hello</p></div><p>world</p>

2. 新的width属性值:-webkit-fill-available, -webkit-min-content, -webkit-max-content, -webkit-fit-content
fill-available:不像100%那样直接使内容与父级元素占用同样的宽度,而是考虑到padding、margin和border,尽量占用最大的宽度。
min-content:宽度取其子元素中最宽的元素的宽度,若无子元素,则取文本中最长的单词的宽度
max-content:当元素(不仅仅是其内容)宽度小于父级元素宽度时,类似100%的效果;否则会突破父级元素的限制,直到达到元素内容应有的最小宽度。
fit-content:取min-content和「fill-available与max-content两者中的较小值」中的较大值。
上述所说的所有元素内容宽度,是不包括padding、margin和border的。


3. position: -webkit-sticky
m23,需开启实验性webkit功能。
和position: fixed类似,不过可以设置一个阈值作为开关,超过阈值则变为relative属性,否则为fixed属性
暂时来说是未完全实现的,很多bug,不建议使用。关注一下就好。

4. image-resolution
m21,貌似实现中……


转载请注明:前端录»css3几个特殊属性