transform对普通元素的渲染影响

最新推荐文章于 2024-03-01 18:06:27 发布

cwzhsi

最新推荐文章于 2024-03-01 18:06:27 发布

阅读量2k

点赞数

分类专栏： css 文章标签： transform

本文链接：https://blog.csdn.net/cwzhsi/article/details/45887771

版权

本文探讨了transform属性如何影响CSS布局，包括如何使overflow对absolute元素生效、限制absolute元素的100%宽度、改变元素的叠加顺序，以及影响position:fixed元素的滚动效果。通过对父元素应用transform:scale(1)或translate(0,0)，可以解决overflow对absolute元素的限制问题。" 103709429,7529826,Web实验课程：利用Cookie实现登录注册功能,"['Web开发', '前端开发', '后端开发', '登录注册', 'Cookie管理', 'Node.js']

摘要由CSDN通过智能技术生成

transform对普通元素的渲染影响

1、transform改变overflow对absolute元素的限制

absolute绝对定位元素，如果含有overflow不为visible的父类元素，同时该父级元素以及到该绝对定位元素之间任何嵌套元素都没有position为非static的属性，则overflow对该absolute元素不起作用。”

例如下面的代码：

<p style="width:200px;height:300px;overflow:hidden;">
	<img src="images/1.jpg" alt="" style="position:absolute">
</p>

overflow对img元素不起作用，展示结果如下：

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cwzhsi

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

探究transform动画元素的z-index

前端栈开发

07-11

166

z-index 和 translate3d在一次需求中，需要做出三张卡牌走马灯式滚动的效果，由于在前面的一张卡牌需要挡住后面的卡牌，自然而然地就用 z-index 使前面的卡牌显示在最上面，配以 transform 动画让“走马灯”滚起来，在开发过程中，在 PC 侧 Chrome 中表现良好，在本人手机浏览器中也表现良好，最后测试时却发现，在微信客户端或 QQ 客户端中打开页面出现问题，“走马灯”...

transform对fixed的影响

tiny_qi的博客

11-18

193

引用来源 https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/

参与评论您还未登录，请先登录后发表或查看评论

transform影响fixed定位

weixin_68542759的博客

10-20

340

transform提升了元素的地位。

CSS中transform对fixed定位的影响-父级加上了transform属性之后就会影响子级的固定定位

学习记录总结分享

02-03

2119

我们知道，设置了position: fixed固定定位属性的元素会脱离文档流，达到“超然脱俗”的境界。也就是说此时给这种元素设置top, left, right, bottom等属性是根据浏览器窗口定位的，与其上级元素的位置无关。

transform影响position: fixed的解决方法

ferwagrea的博客

03-29

2048

在transform不为none的元素中，定位是会受到影响的。

从前端角度看网页渲染慢的原理及解决方案

weixin_30808253的博客

07-30

5171

【史上最全】前端页面深入浅出浏览器渲染原理

qq_31532979的博客

01-18

1159

浏览器的核心组件，即通常所说的浏览器内核，是支撑整个浏览器运行的关键性底层软件架构，它由两个关键组成部分构成：一个是负责网页内容解析和渲染的渲染引擎，另一个则是用于执行JavaScript代码的JS引擎。各浏览器厂商在其产品中使用的渲染引擎并不一致，这种差异化构成了不同浏览器间表现差异的基础。举例来说，在Mozilla Firefox浏览器中，其采用的自主研发的渲染引擎名为Gecko，它负责将HTML、CSS等内容转换为用户可见的网页布局和样式。

（三.1）渲染原理

Ellie棒棒哒的博客

04-05

1542

GUI 渲染页面时，当遇到其他请求时的两种处理方法：让 GUI 线程自己去拿：在CSS文件没有从服务器加载回来之前，下面的代码不会继续渲染在开辟一个线程，专门去服务器加载CSS文件：不用管CSS是否加载回来，GUI线程继续向下渲染三种 CSS 样式的渲染区别 -1).在渲染过程中遇到 < link> 引入式样式 : 异步操作浏览器会新开辟一个 HTTP 的请求线程...

大屏超宽屏自适应最优解决方案（transform:scale）

Z_Gleng的博客

03-01

3077

① 大屏使用rem 耗时而且对浏览器最小字体不支持，② 使用transform:scale可以节省百分之九十工作量③ 好处不多说：看一篇文章学习一下咱们再来实战！优点：前期可以直接写页面，后期直接加上组件就行了，不用适配，直接用px写缺点：在和设定比例不一样的情况下，会被缩小展示，上下左右两边会存在一定的空白。

Transform 对元素渲染的影响

Mirror_r的博客

09-24

716

CSS 的 transfrom 属性真的让人又爱又恨，虽然功能挺不错，但有些情况下，还是常常对页面产生莫名其妙的影响。来看下 HTML 结构： <div class="container"> <div class="child"></div> </div> 当容器设置了溢出隐藏，其子元素溢出容器的部分自然会被隐藏，但是当子元素设置了绝对定...

transform 的副作用

前端精髓

08-12

1034

transform 想必大家都很熟悉，可以通过其转换（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）等属性来对元素进行变换，不过这篇文章想探讨的不是这些内容，而是 transform 对元素布局、页面渲染方面的影响。例如，你知道它会影响 fixed 元素的位置吗？你有想过它会改变元素的层叠顺序吗？在我们近期的一个项目中，碰到过这个问题，fixed元素居然好端端的失效了，后来不断的排查，最终发现了问题出在 CSS3 transform上的，只因为fixed元素的父层添加.

逆战小白提升日記——css3 transform位移在复合写法中所受影响

vitasAA的博客

02-23

542

css3 transform属性主要所影响的值主要有以下几种，旋转rotate，扭曲skew，缩放scale，和移动translate。而在复合写法时translate的位置不同，其最终实现效果也会受影响，其影响原理是什么呢？废话不多说，看图↓ ↓ ↓ 黑色块分别右移400px，200px 上图红色块：transforms：scale（2）translateX（200px）下图红色块：tran...

使用transform:translate()出现内容模糊问题

weixin_44708870的博客

11-21

1227

<div class="tancc" v-if="ifshow"> <div class="main"> <button class="close" @click="close()">X</button> <ul> <li> ...

用transform:scale();缩放