CSS-- 實用CSS樣式

自用實用CSS樣式

1.清除DIV浮動

<span style="font-family:KaiTi_GB2312;">clear: both;</span>

原效果：

對下面移位的標籤加入該CSS後效果以下：

<span style="font-family:KaiTi_GB2312;">element.style {
clear: both;
}</span>

２.使用min-width解決縮小瀏覽器窗口滾動條右邊部分留白問題

使用min-width前，咱們能夠看到class="top"這個div，當前width爲636px，可是因爲top這個div的最外層的div當前已經被固定爲960px,因此當窗口小於960px的時候，滾動條往右拉時對右邊寬度超出636px那部分並無起做用，由於瀏覽器雖然有滾動條了，但並不知道咱們哪一個位置須要開始使用滾動條顯示

對於這種狀況，咱們只須要加入min-width:960px，由於咱們當前網頁的內容都顯示在寬度爲960px區域內，設置Min-width至關於告訴瀏覽器:當窗口寬度小於960px時，你就要給可滾動顯示我要展現的區域啦

3.使用pointer-events:none;解決上層DIV被下層DIV阻止點擊事件

案例：目前有兩個同級的DIV，下層DIV只用於顯示透明的樣式，上層DIV只用於數據展現，看起來就像被包裹在一個透明的面板上，效果以下：

上圖咱們能夠看到，實際上recommend 這個DIV其實是跟gray 同級的，而經過z-index這個屬性使它們分別處在上下層，可是加入pointer-events:none; 以前，我想點擊recommend這個div 上的"more.."超連接是點擊不了的，由於這時被下層DIV gray阻止了全部事件，經過把pointer-events:none;設置到下層元素gray上，就能夠去除下層DIV對上層DIV的干擾，事件點擊操做