CSS3 transform对普通元素的N多渲染影响
来源:互联网 发布:华为手机应用数据清理 编辑:程序博客网 时间:2024/06/08 13:41
今天有个事儿超满足,那就是:
当当当当,买了海贼王代言的眼药水-罗,收藏用~
———————————–正题分割线———————————–
一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0,0)),但是,实际上,对这些元素还是造成了写深远的影响。所谓表面无恙,内心奔溃的真实写照。
一、transform提升元素的垂直地位
我们可能都知道这样一个规则,当遭遇元素margin负值重叠的时候,如果没有static以外的position属性值的话,后面的元素是会覆盖前面的元素的。
img src="mm1"><img src="mm2" style="margin-left:-60px;">
在transform出现之前,这个规则一直很稳健;但是,自从transform降临,这个规则就变了。元素应用了transform属性之后,就会变得应用了position:relative一个尿性,原本应该被覆盖的元素会雄起,变成覆盖其他元素,修改为如下代码:
<img src="mm1" style="-ms-transform:scale(1);transform:scale(1);"><img src="mm2" style="margin-left:-60px;">
只要是支持transform元素的浏览器,包括IE9(-ms-), 都会提高普通元素的垂直地位,使其覆盖其他元素而不是被覆盖。
二、transform限制position:fixed的跟随效果
我们应该都知道,position:fixed可以让元素不跟随浏览器的滚动条滚动,而且这种跟随效果连它的兄弟们position:relative/absolute都限制不了。但是,真是一物降一物,position:fixed固定效果却被小小的transform给干掉了,直接降级变成position:absolute的蛋疼表现。
例如下面示意代码:
<p style="transform:scale(1);"><img src="mm1.jpg"style="position:fixed;" /></p>
结果,本来应该不跟着滚动条滚动的傲娇fixed元素,变成absolute一样的行为表现,其position属性值1000%是fixed,但是,却大失所望跟着滚动条混了,归根结底就是父元素加了个小小的transform属性值。
注意,这个特性表现,目前只在Chrome浏览器/FireFox浏览器下有,IE浏览器,包括IE11, fixed还是fixed的表现。
三、transform改变overflow对absolute元素的限制
在以前,overflow与absolute之间的限制规范内容大致是这样的:
absolute绝对定位元素,如果含有overflow不为visible的父级元素,同时,该父级元素以及到该绝对定位元素之间任何嵌套元素都没有position为非static属性的声明,则overflow对该absolute元素不起作用。
比方说如下示意代码:
<p style="width:96px; height:96px; border:2px solid #beceeb; overflow:hidden;"> <img src="mm1.jpg"style="position:absolute;" /></p>
但是,一旦我们给overflow容器或者与图片有嵌套关系的子元素使用transform声明,呵呵呵,估计absolute元素就要去领便当了!
结果出现了有意思的浏览器兼容性差异:Chrome/Opera浏览器下,只有嵌套元素含有transform属性的时候,absolute元素才会被overflow隐藏;但是在IE9+/FireFox浏览器下,无论是overflow容器还是嵌套子元素,只要有transform属性,就会hidden溢出的absolute元素。
其中,有个表现是没有兼容性问题:就是absolute元素和overflow元素间,含有transform的时候,absolute会被隐藏。
四、transform限制absolute的100%宽度大小
以前,我们设置absolute元素宽度100%, 则都会参照第一个非static值的position祖先元素计算,没有就window. 现在,诸位,需要把transform也考虑在内了。
无论是IE9+,还是Chrome还是FireFox浏览器,所有绝对定位图片100%宽度,都是相对设置了transform的容器计算了,于是,上面的图片拉长到了西伯利亚;
- CSS3 transform对普通元素的N多渲染影响
- CSS3 transform对普通元素的N多渲染影响
- CSS3 transform对普通元素的N多渲染影响
- transform对普通元素的渲染影响
- 关于CSS3中transform属性对元素布局的影响。
- CSS3-transform-transform影响子级的固定定位
- CSS3 元素的变形(transform)
- css3中transform对位置的应用
- CSS3 -webkit-transform(元素变换)
- CSS3 -webkit-transform(元素变换)
- CSS3 -webkit-transform(元素变换)
- 渲染性能:读写style对渲染过程的影响
- 【初级-个人理解】float是否脱离普通流?是否占据空间?以及浮动对内联和块元素的影响。
- 对css3中的transform transiton animate的理解
- CSS3 Transform的应用
- 负margin对元素高度的影响
- css3改变元素基点transform-origin
- javascript的加载、解析、执行对浏览器渲染的影响
- 操作系统的目标和功能
- 4.3 初识Android Studio中的Gradle
- iOS:iOS笔记
- Python类与对象
- RVO vs std:move
- CSS3 transform对普通元素的N多渲染影响
- Flutter实战一Flutter聊天应用(十三)
- 操作系统的发展与分类
- YV12,I420,YUV420P 像素数据格式
- HttpClient之模拟post请求示例
- crond和crontab调研
- vue v-if v-else v-else-if
- 【批量生成10万条sql数据库数据+IO流的使用】生成简单sql插入语句大量数据,以及输出流生成文件2017年
- 5.1 常用工具之ADB介绍与快速入门