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

追_光_者發表於2018-05-04
CSS

效果圖

  • 圖一

    例如

  • 圖二

    例如

思路

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

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

  1. 會引起迴流跟重繪,降低了效能。
    迴流：是指瀏覽器重新構建受到影響的dom樹
    重繪：是指瀏覽器重新繪製受影響的部分
    
    引起迴流的原因：基本上就是改變元素的位置，大小，文字內容，顯示隱藏
    引起重繪的原因：基本上就是改變元素的外觀，不回影響佈局的。
    
    迴流一定引起重繪，重繪不一定一起迴流。
複製程式碼

css效能優化

  1. 儘量不要使用層級選擇器，
  2. 不要使用元素選擇器，
  3. 不要使用屬性選擇器等。

程式碼如下：

<!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>
複製程式碼

有錯誤之處，歡迎指教。謝謝，閱讀。

相關文章