Electron-vue 中使用 CSS 布局筆記

1. 禁止用戶鼠標選中文本、圖片等變藍

user-select: none;

 

2. 禁止用戶拖動圖片

-webkit-user-drag: none;

 

3. Electron 窗體可拖動

.drag {
    -webkit-app-region: drag;
  }

設置該屬性后，除拖動外的其它鼠標事件不再響應。在需要響應其它鼠標事件的子元素上，加上：　

.no-drag {
    -webkit-app-region: no-drag;
  }

 

4. 文本水平 / 垂直居中

　　水平居中： text-align: center ;

　　垂直居中：包含文本的對象中設置相同的 height、line-height 值。

 

5. 取消 input 和 textarea 的聚焦邊框

input { 
　　outline: none 
} 

textarea {
    outline: none
} 

 

6. 取消 textarea 可拖動放大（右下角的）

textarea {
    resize:none
} 

 

7. CSS 保留文本中的空格和換行

　　設置 white-space 屬性取值為 pre ，如下所示：

<div style="white-space:pre">AA   BB<div> 

 

8. 窗體不顯示滾動條

body { overflow: hidden; }

 

9.