CSS 樣式記錄

2022-08-26 23:45:21 字數 1075 閱讀 9917

1、element.style.border加邊框時會改變原有div等元素的size

可以改成設定輪廓,即改為element.style.outline="2px dotted",清除時設定為"2px dotted transparent"

2、獲取頁面元素的座標

var rect = element.getboundingclientrect();

console.log(rect.top, rect.right, rect.bottom, rect.left);

3、res = element.getelementsbyclassname('classname')的時候注意,返回的是陣列,如果搜尋結果只有乙個元素需要通過res[0]來獲取。

4、滑鼠事件穿透上層div,及上層div不響應滑鼠點選,下層響應

頁面上如果有乙個div蓋住了下面的div或者鏈結元素後,那麼下層元素事件將不會被觸發。

但是現在firefox3.6+/safari4+/chrome支援乙個稱為pointer-events的css屬性。

使用該屬性可以決定是否能穿透絕對定位元素去觸發下面元素的某些行為:

pointer-events:none;

5、div居中

span居中

text-align: center;display: block;

其他居中問題參見:

6、vue中style增加了scope不起作用

例如我想修改滾動條樣式由

overflow: auto;改為overflow: overlay;發現不起作用。

不加scope,會影響其他元件;加了,反而樣式不起作用。

解決方法:其他的樣式還是放在中。新增乙個不帶scope的,同時為了不影響其他元件,給目標元素增加乙個id。這樣就解決了。

7、button等行內塊級元素在div裡居中

8、滑鼠點選事件穿透上層元素

即a元素在b元素的上層,當滑鼠點選在a元素上時,b直接響應點選事件(如同a不存在)

方法為:在a的css中增加乙個樣式 pointer-events: none;  

9、游標的形狀cursor.style

10、

css樣式 記錄(不常用)

border 1px solid 3b80fa box sizing border box 一般用於百分比或者其他 必須要新增border等操作問題 語法 box sizing content box border box inherit 值 描述content box 這是由 css2.1 規定的...

css背景樣式css背景樣式

css背景樣式 css背景樣式 序號中文說明 標記語法 1背景顏色2背景 3背景重複 4背景固定 5背景定位 6背影樣式 1 背景顏色 background color 語法 說明 引數取值和顏色屬性一樣 注意 在 html當中,要為某個物件加上背景色只有一種辦法,那就是先做乙個 在 中設定完背景色...

CSS樣式 文字樣式

文字擷取 employorganizalistctrl listtext 文字對齊方式 text align justify 文字超出固定高度 顯示滾動條 overflow scroll 顯示邊框 border 1px dashed ff6b6b 虛線 border top style 1px so...