小知識記錄

2021-09-30 13:41:48 字數 3704 閱讀 3611

清除浮動:

新增子元素,左右都不允許出現浮動元素。

清除a的下劃線:

text-decoration:none;

清除li前的小圓點:

li 聖杯布局:

negative-margin:

關於文件流,浮動流和position:

input標籤的型別:color,date,email(可使用偽類

或 元素。" style="color:rgb(33,122,192); text-decoration:none; margin:0px; padding:0px; border:0px; font-family:'open sans',arial,sans-serif; font-size:14px; line-height:21px" rel="noopener noreferrer">:valid

或 元素的內容無法通過輸入的型別設定的驗證。 這使您可以輕鬆設定無效欄位的外觀,幫助使用者識別並更正錯誤。" style="color:rgb(33,122,192); text-decoration:none; margin:0px; padding:0px; border:0px; font-family:'open sans',arial,sans-serif; font-size:14px; line-height:21px" rel="noopener noreferrer">:invalid檢測是否通過驗證),file,image,tel

letter-spacing:設定字元間距

text-align,text-transform

position: 

absolute,相對於其

最接近的乙個具有定位屬性的父包含塊

進行絕對定位。如果不存在這樣的包含塊,則相對於body元素

document.documentelement.clientheight

document.documentelement.clientwidth

getcomputedstyle:獲取的是最終應用在元素上的所有css屬性物件(即使沒有css**,也會把預設的祖宗八代都顯示出來)。

設定透明度:alpha,opacity

alpha通道設定透明度的時候需要單獨對每乙個設定,而opacity直接就運用在了整個標籤上,opacity只能設定整個元素的透明值,而alpha通道可以特定對元素的某個屬性設定透明值,比如上面的背景、邊框、文字等

z-index不起作用:

要讓z-index起作用有個小小前提,就是元素的position屬性要是relative,absolute或是fixed。

不起作用的情況:

1.第一種情況(z-index無論設定多高都不起作用情況):

這種情況發生的條件有三個:

1、父標籤 position屬性為relative;

2、問題標籤無position屬性(不包括static);

3、問題標籤含有浮動(float)屬性。

元素樣式有overflow=hidden

pagex和clientx

pagex指滑鼠在頁面上的位置,以頁面左側為參考點

clientx指可視區域內離左側的距離,以滾動條滾動到的位置為參考點。各個瀏覽器相同。

即當有滾動條時clientx 

小於 pagex

screenx

滑鼠在螢幕中的位置,指的是滑鼠到電腦螢幕左側的距離。 各個瀏覽器相同。

與clientx的區別是clientx是到瀏覽器的距離。

例如:當網頁縮小,拖動到螢幕中間時,screnx 大於 clientx

offsetwidth/clientwidth的區別

scrollwidth 

是物件的實際內容的寬,不包邊線寬度,會隨物件中內容的多少改變(內容多了可能會改變物件的實際寬度) 

clientwidth 

是物件可見的寬度,不包滾動條等邊線,會隨視窗的顯示大小改變。 

offsetwidth 

是物件的可見寬度,包滾動條等邊線,會隨視窗的顯示大小改變。 

在文字框內輸入內容,當橫向滾動條沒出來前scrollwidth和clientwidth的值是一樣的。 

當一行內容超出文字框的寬度,就有橫向滾動條出來了,scrollwidth的值就變了。 

scrollwidth是物件實際內容的寬度。 

clientwidth是物件看到的寬度(不含邊線),這個例子裡不會改變。 

offsetwidth的值總是比clientwidth的值打 

clientwidth是物件看到的寬度(不含邊線) 

offsetwidth是物件看到的寬度(含邊線,如滾動條的占用的寬) 

clientwidth是物件看到的寬度(不含邊線,即border)

scrollwidth是物件實際內容的寬度(若無padding,那就是邊框之間距離,如有padding,就是左padding和右padding之間距離)。

offsetwidth是指物件自身的寬度,整型,單位畫素(含邊線,如滾動條的占用的寬,值會隨著內容的輸入而不斷改變)。

scrollheight: 獲取物件的滾動高度。

scrollleft:設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離

scrolltop:設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離

scrollwidth:獲取物件的滾動寬度

offsetheight:獲取物件相對於版面或由父座標 offsetparent 屬性指定的父座標的高度

offsetleft:獲取物件相對於版面或由 offsetparent 屬性指定的父座標的計算左側位置

offsettop:獲取物件相對於版面或由 offsettop 屬性指定的父座標的計算頂端位置

易混淆點:

clientx 設定或獲取滑鼠指標位置相對於

當前視窗

的 x 座標,其中客戶區域不包括視窗自身的控制項和滾動條。 

clienty 設定或獲取滑鼠指標位置相對於

當前視窗

的 y 座標,其中客戶區域不包括視窗自身的控制項和滾動條。 

offsetx 設定或獲取滑鼠指標位置相對於

觸發事件的物件

的 x 座標。 

offsety 設定或獲取滑鼠指標位置相對於

觸發事件的物件

的 y 座標。 

screenx 設定或獲取獲取滑鼠指標位置相對於使用者

螢幕的 x 座標。 

screeny 設定或獲取滑鼠指標位置相對於使用者

螢幕的 y 座標。 

x 設定或獲取滑鼠指標位置相對于父文件的 x 畫素座標(

亦即相對於當前視窗

)。 y 設定或獲取滑鼠指標位置相對于父文件的 y 畫素座標(

亦即相對於當前視窗)。

document.documentelement.scrolltop 垂直方向滾動的值

event.clientx+document.documentelement.scrolltop 相對文件的水平座標+垂直方向滾動的量

getcomputedstyle:

var style = window.getcomputedstyle("元素", "偽類");

例如:

var dom = document.getelementbyid("test"),

style = window.getcomputedstyle(dom , ":after");

linux小知識記錄

1 linux的程序和執行緒 程序建立通常呼叫fork實現。建立後子程序和父程序指向同一記憶體區域,僅當子程序有write發生時候,才會把改動的區域copy到子程序新的位址空間,這就是copy on write技術,它極大的提高了建立程序的速度。linux執行緒是通過程序來實現。linux kern...

css小知識記錄

前端展示 時,有些列文字過多會導致換行,使得 行之間間距變大不美觀,解決辦法是強制不換行,在行標籤中加 tr style white space nowrap js動態控制控制項的顯示和隱藏 方式一 document.getelementbyid 控制項id style.display none d...

js 小知識記錄(一)

1 選擇 map object 字面量,而不是switch語句 特別適合vue裡面的filter過濾 function test color 測試結果 test null test yellow 另兩種寫法更直觀 const fruitcolor function test color const ...