css實現高度動態變化的佈局

時間 2019-11-07

標籤 css 實現高度動態變化佈局欄目 CSS 简体版

原文原文鏈接

效果圖

圖一 css
圖二 html

思路

將父元素相對定位，粉色區域絕對定位，藍色區域右浮動便可。
複製代碼

對比使用js動態改變元素高度佈局

會引發迴流跟重繪,下降了性能。

迴流：是指瀏覽器從新構建受到影響的dom樹
    重繪：是指瀏覽器從新繪製受影響的部分
    
    引發迴流的緣由：基本上就是改變元素的位置，大小，文本內容，顯示隱藏
    引發重繪的緣由：基本上就是改變元素的外觀，不回影響佈局的。
    
    迴流必定引發重繪，重繪不必定一塊兒迴流。
複製代碼

css性能優化

儘可能不要使用層級選擇器，
不要使用元素選擇器，
不要使用屬性選擇器等。

代碼以下：

<!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title>Document</title>
 8   <style>
 9     *{
10       margin: 0;
11       padding: 0;
12     }
13     .box{
14       width: 800px;
15       overflow: hidden;
16       position: relative;
17       margin: 50px auto;
18     }
19     .left{
20       position: absolute;
21       top: 0;
22       right: 600px;
23       bottom: 0;
24       left: 0;
25       background: pink;
26     }
27     .right{
28       width: 600px;
29       height: 200px;
30       float: right;
31       background: blue;
32     }
33     .btn-wrap{
34       width: 800px;
35       margin: 0 auto;
36       overflow: hidden;
37     }
38     .btn{
39       width: 50px;
40       height: 30px;
41       float: right;
42       margin-left: 50px;
43       background: #eee;
44     }
45   </style>
46 </head>
47 <body>
48   <div class="box">
49     <div class="left"></div>
50     <div class="right"></div>
51   </div>
52 
53   <div class="btn-wrap">
54     <button class="btn add">加</button>
55     <button class="btn sub">減</button>
56   </div>
57   <script>
58     var right = document.getElementsByClassName("right")[0],
59         add = document.getElementsByClassName("add")[0],
60         sub = document.getElementsByClassName("sub")[0];
61 
62     add.onclick = () => {
63       right.style.height = right.offsetHeight + 20 + 'px';
64     }
65 
66     sub.onclick = () => {
67       right.style.height = right.offsetHeight - 20 + 'px';
68     }
69   </script>
70 </body>
71 </html>
複製代碼