深入理解CSS元素可見性visibility

visibility

值: visible | hidden | collapse | inherit

初始值: visible

應用於: 所有元素

繼承性: 有

visible：元素可見

hidden：元素不可見，但元素還是會影響文件的布局

[注意]可以將乙個hidden元素的後代元素置為visible，這會使該後代元素正常出現

collapse：在**中或中使用，表示該列或列組的所有單元格不顯示。如果用於非**元素，collapse與hidden含義相同

[注意]webkit核心瀏覽器不支援給或元素使用collapse屬性

當元素通過設定visibiliy:hidden之後，雖然還佔據物理區域，但已經不可以接受js效果

//js效果:當滑鼠移入元素時，父級的背景顏色變成黑色；移出時背景顏色恢復初始值

#oshow#oshow:hover

#oshow#oshow:hover

當前瀏覽器大部分都是多tab頁(多標籤頁)的模式，但這些頁面效能卻參差不齊。對於某些效能很差的頁面，當使用者從其他tab頁切換回來時，有可能出現由於頁面效能差出現頁面錯亂、頁面卡死甚至瀏覽器卡死的情況

html5新增了頁面可見性api。該api有兩個屬性，乙個事件

[注意]ie9-和safari瀏覽器不支援。所以可以通過document.hidden !== 'undefined'來做瀏覽器的識別

document.hidden: 表示當前頁面是否可見

當前tab頁處於啟用態時，document.hidden的屬性值是false，否則是true

document.visibilitystate: 返回當前頁面的可見狀態

hidden: 當瀏覽器最小化、切換tab、電腦鎖屏時

visible: 使用者正在檢視當前頁面時
prerender: 文件載入離屏或者不可見
unloaded: 當文件將要被unload時

[注意]prerender和undloaded不是所有瀏覽器都支援，用的也不多

visibilitychange事件: 當document.visibilitystate狀態變化時觸發該事件

應用場景

[1]當頁面屬性是hidden時，停止頁面中選項卡的定時器或頁面中的動畫等，減少記憶體占用

[3]...

頁面為非啟用頁時，暫停頁面中的動畫；重新啟用時，繼續動畫效果

.box@keyframes loop100%}

#div

<

div 
class
="box"
>
<
div 
id="div"
>
div>
div>

function

getcss(obj,style)
return
obj.currentstyle[style];
};var otimer = setinterval(function
(),100);
document.addeventlistener('visibilitychange',function
()else
},false);

<

audio 
id="audio"
src=""
controls 
>
audio
>

var

mark;
document.addeventlistener('visibilitychange',function
()else
}else
}},false);

深入理解偽元素

first letter 指定乙個元素第乙個字母的樣式 注意1 所有前導標點符號應與第乙個字母一同應用該樣式 注意2 只能與塊級元素關聯 注意3 只有當選擇器部分和左大括號之間有空格時，ie6 瀏覽器才支援。因為first letter中存在連線符的原因 div first letter first...

深入理解CSS背景

背景色background接受所有合法的顏色，還可以接受乙個使背景透明的關鍵字。關於顏色的設定請移步至此。背景顏色不能繼承。其預設值是transparent，如果乙個元素沒有指定的顏色，那麼背景就應當是透明的，這樣其祖先元素的背景才能可見。值 transparent inherit 初始值 tran...

深入理解CSS浮動

float 浮動 浮動元素脫離普通流，然後按照指定方向，向左或者向右移動，碰到父級邊界或者另外乙個浮動元素停止 值 left right none inherit 初始值 none 應用於 所有元素 繼承性 無 浮動流正常流中元素乙個接乙個排列 浮動元素也構成浮動流 塊級框浮動元素自身會生成乙個塊級...