CSS3 transform 对HTML文档流带来的影响
html 总是那么的惊奇
来源于“硬件加速”
年初的一个笔记，闲时整理出来。
很多网上文章都说建议打开浏览器的硬件加速，这样页面渲染速度、动画流畅性会提高。这几乎成了很多人页面制作的标配，管实际有没有用都来一个：
html，body {
transform: translate3d(0,0,0);
}但这在很多情况下会引起 html 层级文档流的“异常”。
W3C spec 中有如下描述:
In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block.
The object acts as a containing block for fixed positioned descendants.
意思是：
在 HTML 内，没有比对一个即是层叠对象又是容器块的 DOM 进行 transform 变换更没有意义的了。
这类对象也扮演着 positioned(主要是 absolute/fixed ) 子孙元素容器的角色。
。。。翻译能力有限，不理解的人估计这句话看了后更晕，下面详述。
标准文档流
页面中的 dom 元素按照其在 HTML 中的标签位置顺序进行从上到下、从左往右的排布过程
想必大家对这个基础的定义已经很熟悉了吧。但是，这个究竟在实际中有什么体现呢？
如果你在页面中放置一大堆 display: inline-block 的元素，它们会很乖巧的 上 -> 下 左 -> 右 排的很整齐。这就是标准文档流的基础体现。
当你用position、float等属性使其脱离文档流时，就会又产生一个页面 层级 的概念。(扯远了...)
transform 改变定位默认属性
例子代码如下：
<body> <header style="position: fixed; top: 0; width: 100%; background: red;">header</header> <p style="height: 2000px;"></p> <footer style="position: fixed; bottom: 0; width: 100%; background: blue;">footer</footer> </body>
点击查看例子
dom 元素的默认定位属性是 position: static; 这也是标准文档流的标准定位方式。
例子中，不管 p 怎么上下滚动，header 和 footer 会永远置于屏幕的最上和最下部。
但是如最初所述，给 body 或 html 加上一个 transform: translate3d(0,0,0);，你再去试，就会发现，原本 position: fixed; 的两个元素都不听话了，会随着屏幕进行滚动。
实际上，position: fixed; 的参考对象并不是大家所说的屏幕，而是一个 viewport 的html对象，一般地一个页面(document.documentElement)会生成一个 viewport。
你用 document.documentElement.clientHeight 就可以的看到实际 viewport 的高度，其中 fixed 的元素都是以此为容器进行定位的。
body(或html) 加了 transform 属性以后，整个 body DOM 既会产生相应的变换，但此时的“整个”仅是指 body 下标准文档流元素，对于那些 position: absolute; / position: fixed; 元素，因为已经脱离了 body 所属的文档流，所以无法凭借 body 的变换使自己也自然的达到相应的变换效果。
此时，浏览器为了让此类 DOM 得到相应的变化，会产生一个新的 viewport，这个 viewport 作为定位元素的容器存在，会响应 body 的 transform 变换效果，从而让里面那些脱离文档流的 positioned 元素也能进行变换。
这个 viewport 会严重影响 position: fixed; 的定位，当它随着“本尊”dom同步滚动的时候，会带着 fixed 元素一块滚，此时会产生一种类似 absolute 的诡异效果：
fixed 元素似乎变成了 absolute，存在于一个和document.documentElement大小一致的“看不见”容器内。
引申情况
在一些移动端设备(或APP)上，给 <video> 标签的播放默认开启的硬解码，此时也会产生上述现象，视频会"浮"在页面上面，不会随页面元素正常滚动。
还有一些低版本移动端浏览器上，也会出现类似的情况，可按此思路尝试解决。
总结
其实上面的情况不只会发生在 body 上，一个任意的 dom 添加了 transform 之后都会生产一个类似 viewport 的效果，有兴趣可以去尝试。
引用:
http://www.php.cn/
html 总是那么的惊奇
来源于“硬件加速”
年初的一个笔记，闲时整理出来。
很多网上文章都说建议打开浏览器的硬件加速，这样页面渲染速度、动画流畅性会提高。这几乎成了很多人页面制作的标配，管实际有没有用都来一个：
html，body {
transform: translate3d(0,0,0);
}但这在很多情况下会引起 html 层级文档流的“异常”。
W3C spec 中有如下描述:
In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block.
The object acts as a containing block for fixed positioned descendants.
意思是：
在 HTML 内，没有比对一个即是层叠对象又是容器块的 DOM 进行 transform 变换更没有意义的了。
这类对象也扮演着 positioned(主要是 absolute/fixed ) 子孙元素容器的角色。
。。。翻译能力有限，不理解的人估计这句话看了后更晕，下面详述。
标准文档流
页面中的 dom 元素按照其在 HTML 中的标签位置顺序进行从上到下、从左往右的排布过程
想必大家对这个基础的定义已经很熟悉了吧。但是，这个究竟在实际中有什么体现呢？
如果你在页面中放置一大堆 display: inline-block 的元素，它们会很乖巧的 上 -> 下 左 -> 右 排的很整齐。这就是标准文档流的基础体现。
当你用position、float等属性使其脱离文档流时，就会又产生一个页面 层级 的概念。(扯远了...)
transform 改变定位默认属性
例子代码如下：
<body> <header style="position: fixed; top: 0; width: 100%; background: red;">header</header> <p style="height: 2000px;"></p> <footer style="position: fixed; bottom: 0; width: 100%; background: blue;">footer</footer> </body>
点击查看例子
dom 元素的默认定位属性是 position: static; 这也是标准文档流的标准定位方式。
例子中，不管 p 怎么上下滚动，header 和 footer 会永远置于屏幕的最上和最下部。
但是如最初所述，给 body 或 html 加上一个 transform: translate3d(0,0,0);，你再去试，就会发现，原本 position: fixed; 的两个元素都不听话了，会随着屏幕进行滚动。
实际上，position: fixed; 的参考对象并不是大家所说的屏幕，而是一个 viewport 的html对象，一般地一个页面(document.documentElement)会生成一个 viewport。
你用 document.documentElement.clientHeight 就可以的看到实际 viewport 的高度，其中 fixed 的元素都是以此为容器进行定位的。
body(或html) 加了 transform 属性以后，整个 body DOM 既会产生相应的变换，但此时的“整个”仅是指 body 下标准文档流元素，对于那些 position: absolute; / position: fixed; 元素，因为已经脱离了 body 所属的文档流，所以无法凭借 body 的变换使自己也自然的达到相应的变换效果。
此时，浏览器为了让此类 DOM 得到相应的变化，会产生一个新的 viewport，这个 viewport 作为定位元素的容器存在，会响应 body 的 transform 变换效果，从而让里面那些脱离文档流的 positioned 元素也能进行变换。
这个 viewport 会严重影响 position: fixed; 的定位，当它随着“本尊”dom同步滚动的时候，会带着 fixed 元素一块滚，此时会产生一种类似 absolute 的诡异效果：
fixed 元素似乎变成了 absolute，存在于一个和document.documentElement大小一致的“看不见”容器内。
引申情况
在一些移动端设备(或APP)上，给 <video> 标签的播放默认开启的硬解码，此时也会产生上述现象，视频会"浮"在页面上面，不会随页面元素正常滚动。
还有一些低版本移动端浏览器上，也会出现类似的情况，可按此思路尝试解决。
总结
其实上面的情况不只会发生在 body 上，一个任意的 dom 添加了 transform 之后都会生产一个类似 viewport 的效果，有兴趣可以去尝试。
更多CSS3 transform 对HTML文档流带来的影响相关文章请关注PHP中文网！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
纯CSS3怎么实现波浪效果？（代码示例）
Jun 28, 2022 pm 01:39 PM
纯CSS3怎么实现波浪效果？本篇文章就来给大家介绍一下使用 SVG 和 CSS 动画制作波浪效果的方法，希望对大家有所帮助！
如何使用CSS实现元素的旋转背景图动画效果
Nov 21, 2023 am 09:05 AM
如何使用CSS实现元素的旋转背景图动画效果背景图动画效果可以增加网页的视觉吸引力和用户体验。本文将介绍如何使用CSS实现元素的旋转背景图动画效果，并提供具体的代码示例。首先，我们需要准备一张背景图，可以是任何你喜欢的图片，例如一张太阳或者电风扇的图片。将该图片保存并命名为“bg.png”。接下来，创建一个HTML文件，并在文件中添加一个div元素，将其设置为
css怎么隐藏元素但不占空间
Jun 01, 2022 pm 07:15 PM
两种方法：1、利用display属性，只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素，只需给元素添加“position:absolute;top:-9999px;”样式。
css3怎么实现花边边框
Sep 16, 2022 pm 07:11 PM
在css中，可以利用border-image属性来实现花边边框。border-image属性可以使用图片来创建边框，即给边框加上背景图片，只需要将背景图片指定为花边样式即可；语法“border-image: url(图片路径) 向内偏移值 图像边界宽度 outset 是否重复;”。
css3如何实现鼠标点击图片放大
Apr 25, 2022 pm 04:52 PM
实现方法：1、使用“:active”选择器选中鼠标点击图片的状态；2、使用transform属性和scale()函数实现图片放大效果，语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。
原来利用纯CSS也能实现文字轮播与图片轮播！
Jun 10, 2022 pm 01:00 PM
怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！
Vue中如何对图片进行压缩和格式转换？
Aug 25, 2023 pm 11:06 PM
Vue中如何对图片进行压缩和格式转换？在前端开发中，经常会遇到需要对图片进行压缩和格式转换的需求。特别是在移动端的开发中，为了提高页面加载速度和节省用户流量，对图片进行压缩和格式转换是很关键的。而在Vue框架中，我们可以通过一些工具库来实现对图片的压缩和格式转换。使用compressor.js库进行压缩compressor.js是一款用于压缩图片的JavaS
