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的干扰，事件点击操做