CSS的常用技巧

Just Do It — Fri, 27 Nov 2009 02:10:00 GMT

收藏夹小图标

如果你将本站加入收藏夹，可以看到在收藏夹网址之前的IE图标变成了本站特别的图标。要实现这样效果很简单，首先制作一个16x16的icon图标，命名为favicon.ico，放在根目录下。然后将下面的代码嵌入head区：

Just Do It 2009-11-27 10:10 发表评论

IE6.0不支持任意元素的hover伪类替代方案

Just Do It — Mon, 23 Nov 2009 14:46:00 GMT

IE7任意元素均支持hover的css伪类，IE6仅a元素支持，此时，可通过css里加入event:expression的方式来达到css控制的效果：

<html>
<head>
<style>
.c
{
  background:#ff0000;
   event:expression(
      onmouseover=function(){
         this.style.backgroundColor='#FF0000';
      },
      onmouseout=function(){
         this.style.backgroundColor='#0000FF';
      }
   );
}
style>
head>
<body>
<form name="form1">
form>
    <input type="button" class="c" value="VALUE" />
body>
html>

Just Do It 2009-11-23 22:46 发表评论

始终位于文档中心的DIV元素

Just Do It — Mon, 23 Nov 2009 03:34:00 GMT

定义一个始终居中的层，当窗口大小或滚动条发生变化时，它也会随之变化，始终处于文档中心。

Just Do It 2009-11-23 11:34 发表评论

CSS绝对定位、浮动定位

Just Do It — Mon, 23 Nov 2009 02:09:00 GMT

http://www.w3school.com.cn/css/css_positioning_absolute.asp

CSS绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

CSS 绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

普通流中其它元素的布局就像绝对定位的元素不存在一样：

#box_relative {

position: absolute;

left: 30px;

top: 20px;

}

如下图所示：

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。

提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

CSS 浮动

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

Just Do It 2009-11-23 10:09 发表评论

BlogJava-Java Frame Design XML Stream Database-文章分类-HTML

CSS的常用技巧

IE6.0不支持任意元素的hover伪类替代方案

始终位于文档中心的DIV元素

CSS绝对定位、浮动定位