transform布局不會脫離文檔流
阿新 • • 發佈：2018-11-24
元素 sheet type edge 不改變 sel pat head width
transform布局不會脫離文檔流
transform布局不會脫離文檔流，也不改變文檔流的大小和位置。
- width
- offsetWidth
- clientWidth
- offsetLeft
- ...
設置元素的 transform 屬性後，上述等屬性均不會發生改變
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <style> * { padding: 0; margin: 0; } .box { width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div class="box">box</div> </body> <script> var box = document.querySelector(‘.box‘) console.log(box.offsetWidth) // 200 console.log(box.offsetLeft) // 0 box.style.transform = ‘translate3d(10px, 10px, 0)‘ console.log(box.offsetWidth) // 200 console.log(box.offsetLeft) // 0 </script> </html>
transform布局不會脫離文檔流