来源:

http://isux.tencent.com/css-animation-skills.html

以记录。

对于 IE6 也可以使用纯 CSS 来实现 position:fixed 的效果。直接上代码吧。
先是结构。

1
2
3
4
5
    <div class="container">
        我是IE6,使用 absolute 模拟 fixed.</br>
        这里多多复制几个,效果明显。
    </div>
    <div class="fixed"></div>

然后是 CSS。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
        body {
            height:100%;
            overflow-y:auto;
            padding:0px;
            margin:0px;
        }
        .container {
            height:1800px;
            background:#CCC;
        }
        .fixed {
            position:fixed;
            top:50px;
            left:50px;
            background:red;
            height:50px;
            width:50px;
        }

还有对于 IE6 来说,加一个单独的样式

1
2
3
4
5
6
7
8
   <!--[if lte IE 6]>
        <style type="text/css">
            html {overflow-x:auto; overflow-y:hidden;}
            .fixed {
                position:absolute;
            }
        </style>
    <![endif]-->

原理就是对于 body 设置高度 100%,html 垂直方向上,超出高度给隐藏掉。然后里面的内容自己滚动,而 absolute 的相对于浏览器窗口的话,因为浏览器窗口就那么大,又不滚动,所以 absolute 看起来就 fixed 了。

但是这个有个问题,就是 所有设置了 absolute 和 relative 的元素,都会表现为 fixed 的,所以还是有副作用的。不过可以用来做遮罩层。

例子可以使用 IE6 浏览器访问。

这里的效率不是说开发者写代码的效率,而是浏览器执行这个选择器的效率。

在看 CSS 的书或者教程的时候,是不是看过这句话:“浏览器是从右至左来处理选择器的”。当然了,如果你没有看到过这句话也无所谓,现在有同样意思的话,就放在这里,现在看也无妨。

那么再来说下浏览器工作的过程,这里是渲染的过程,得到数据之后,浏览器要先绘制一个 DOM 树,然后再有一个 “reflow” 的过程,这个过程就是在 CSS 文件下载之后,确定要渲染的元素在 DOM 中的位置,而 CSS 样式中,很多很多在应用的时候都要有一个 “reflow” 的,过程,所以,避免这个过程,后者减少这个过程,都会相当大的提升浏览器的效率。

还有一个就是 CSS 选择器的优先问题了,这个这里不多说了。

那么,我们不多废话,直接上例子和代码:

例如,我们通常的选择器会这么写

.content a {}

那么根据上面几条理论,浏览器的工作过程是绘制好 DOM 树之后,就会查找页面中所有 a 元素了。查找到所有的 a 元素之后,又开始查找出于 .content 类下面的 a 元素,此时,如果页面有好多好多 a 元素就会是一个非常耗费资源的事情。那么如果这里有更多个 .content 呢?

所以,我们可以这么写,给每一个 a 元素添加一个 class 就可以了。

然后变为

.content .xxx {} 或者 #xxx .xxx {} 这样呢,效率就会更高了。

那么,还有一种情况就是使用太多的层了,也就是限制太多了,例如;

#xxx ul li p a {}

同样的按上面的理论来说,先找所有的 a 然后找所有包含 a 的 p ,依此类推,那么效率肯定是很低喽。

改写后的 可以给 a 添加 class,那么就可以写作 #xxx .xxx {} 效率高了不是一点两点啊。或者给 ul class 嘛,那么就写作 .xxx p a {} 但是这样效率提升并不明显啊。

好了,完了,这只是基本的方法。前端效率的提升,需要慢慢理解,慢慢琢磨,慢慢来嘛。

其实这个问题,我现在比较喜欢使用 float 毕竟对于很多东西,代码量明显减少,不用对很多元素都应用样式,但是各有各的好处,其实还是按个人习惯加上团队的开发习惯来比较好,这里转这篇文章,其实不是完整的一篇,而是来源于知乎中的“在 CSS 布局中,用 float 好还是用 position 好?分别有什么优势?”这个问题,虽然问的是两种布局的优缺点,但是在后面的回答中,会有很多其他的知识出现,所以这才是转载的目的。

呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同。

float和position这两者并没有孰好孰不好的问题,两者按需使用,各得所需的效果。

float从字面上的意思就是浮动,这种在印刷排版之类中可能解释的更加贴切。float能让元素从文档流中抽出,它并不占文档流的空间,典型的就是图文混排中文字环绕图片的效果了。并且float这也是目前使用最多的网页布局方式。不过需要注意的是清除浮动是你可能需要注意的地方。并且如果你要考虑到古老的IE6之类的还会有一些bug诸如双边距等等问题。

而position顾名思义就是定位。他有以下这几种属性:static(默认),relative(相对定位),absolute(绝对定位)和fixed(固定定位)。其中static和relative会占据文档流空间,他们并不是脱离文档的。absolute和fixed是脱离文档流的,不会占据文档流空间。

比较可以发现,float和position最大的区别其实是是否占据文档流空间的问题。虽然position有absolute和fixed这两个同样不会占据文档流的属性,但是这两个并不适合被用来给整个网页做布局。为什么?因为这样你就得为页面上的每一个元素设置一个xy坐标来定位。

float布局就显得灵活多了。但是一些特殊的地方搭配relative和absolute布局可以实现更好的效果。因为absolute是基于父级元素的定位,当父级元素是relative的时候,absolute的元素就会是基于它的定位了。比如你可以让一个按钮始终显示在一个元素的右下角。

如果说到性能问题reflow问题,将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在,而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素,从而在某种程度上缩短浏览器渲染时间。所以如果是制作js动画等,用absolute或者fixed定位会更好。

说得不好的地方请大家补充。总结一句就是不推荐用position来布局整个页面的大框架,而推荐用float或者文档流的默认方式。

PS:

补充一下float的问题。我们常说的文档流其实是指默认文档流。基本显示模型block和inline分别是块狀换行和连续多行模型,前者可以设定尺寸,后者不可以设定尺寸(根据内容决定尺寸和折行)。

不过我们总是遇到固定尺寸,或者固定部分尺寸且不折行的场景,这个时候我们马上会想到使用float来做布局,因为float会触发shrink to fit特性,实现根据内容决定尺寸,float还不会产生折行,我们通过clear来手工模拟折行。这个现状我觉得主要是因为对inline-block的兼容性顾忌产生的,在IE6的时候它没有被广泛支持。使用position实现这样的布局需要配合javascript修正,在某些场景它比float强,因为float模拟的流动布局不是多行连续布局,一些浮动元素经常因为意外的尺寸改变被卡在我们不希望它出现的位置。所以我们可以看到像pinterest这样的网站使用了javascript配合absolute position的方式,讲布局引擎的任务完全交给javascript来实现。从表现与行为分离的角度它不太合理,但是从结果上来说它很让人满意。

但是,我写这段的意思是说,很多时候我们希望控制的布局流问题不需要float和position实现,而应该通过显示模型定义来解决。比如现在的column layout、flex box等等,都是在这个角度解决我们遇到的问题,它们应该才是正解。而我们犯这个错误的最初原因也许就是对像inline-block这样的显示模型的不信任开始的。

希望CSS3的进化能够让我们重建这样的信任。

上面是两个人的回答,都比较有代表性,虽然有些内容是重复的,但是还是建议好好看完,并且最好理解了。

毋庸置疑,CSS 中的 定位 对于从事重构或者前端的人来说,其占用非常重要的地位,但是对于初学者来说,却又有几点不是很清楚,这里就向大家介绍下 CSS  中的 定位 是如何工作的。

首先,我们来看下,什么是 定位。

当浏览器下载页面内容的时候,按下载的 HTML 页面内容的顺序(例如,html、body、head、div、p等),同时就开始渲染页面,而 定位 则就是决定这些元素如何显示,例如相对位置、或者重叠等情况。其实也就是本体相对于上级的定位,这里一共有4种方式来定义 定位,其分别是:static, relative, absolute 和 fixed。其意思也即是 静态、相对、绝对、固定。

Static 定位

即静态定位,也就是在制作 HTML 页面时,元素如何排列,则定位就如何排列。从上往下的顺序。没什么可解释的。

Relative 定位

即相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TOP、RIGHT、BOTTOM、LEFT进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。

有时我们还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,数值范围是自然数。当然有一点要注意,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。
阅读更多...

导航是任何一个网站都不可或缺的部分,对于很多大型的网站来说,很多都使用下拉菜单,这样可以使访客更快的找到需要的内容。本文将包含25个使用jQuery脚本制作的下拉菜单,当然,其中很多都不错呢。

Sexy Drop Down Menu with jQuery and CSS
[使用jQuery和CSS制作的性感菜单]

Sexy Drop Down Menu with jQuery and CSS

How to Create a Drop Down Nav Menu with HTML5, CSS3, and jQuery
[如何使用HTML5、CSS3和jQuery创建一个下拉菜单]

How to Create a Drop Down Nav Menu with HTML5, CSS3, and jQuery

阅读更多...