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.
.
意思是：
在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
你用 document.documentElement.clientHeight你用 document.documentElement.clientHeight
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
大小一致的「看不見」容器內。引申情況
總結其實上面的情況不僅會發生在 body
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.
.
意思是：
在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
你用 document.documentElement.clientHeight你用 document.documentElement.clientHeight
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
大小一致的「看不見」容器內。引申情況
總結其實上面的情況不僅會發生在 body
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
