页面布局和编写(续)

概述

之前根据自己的心得写了一篇页面布局和编写的解决方案, 感觉意犹未尽, 再写一篇续. 供以后开发时参考, 相信对其他人也有用.

z-index

css叫做层叠样式表, 层叠2个字很重要, 之前写页面没考虑这么多, 今天总结了一下记下来.

需求一: z-index有哪些规范?

我个人觉得如果一个页面分了很多层的话, 如果一开始不设定好层叠关系, 后期维护将会非常困难. 所以我总结了一下z-index的规范:

1. cont内容, z-index的值是99. 主要是为了预留一个z-index=10来被cont内容盖住.
2. logo, 分享等需要叠在cont内容上面的, z-index的值定为999.
3. 被cont内容压住的, z-index定为10.
4. 弹窗, 蒙版等要盖住一切内容的, z-index设定为9999.

注意, 这套规则有利也有弊, 如果实行了这一套规则, 那么所有与cont并列的标签都需要设置z-index, 不然会发生消失不见的情况哦.

需求二: 除了z-index还有没有其它影响层叠的样式?

有. css3的transform的translate3d(x,y,z), z参数是z方向上的偏移, 如果设定为正数的话, 会碾压一切z-index哦~

绝对定位

对, 还是绝对定位. 之前对绝对定位不明不白的, 之后我去查了相关资料, 整理如下:

需求一: 什么情况下不使用绝对定位?

cont的内容一律禁止使用绝对定位(特殊情况例外), 因为这是给人看的内容, 需要良好的布局. 而绝对定位元素从文档流中除去了, 整个页面相当于是空的, 显然不好.

需求二: 绝对定位就这么垃圾吗?

并不是, 绝对定位的元素因为从文档流中除去了, 所以他们在改变宽高的时候并不会引起页面的重排和重绘, 对渲染效率有很大的提高, 这就是绝对定位的优点. 所以, 一些有动画的元素, 和除cont外的元素都尽量使用绝对定位.

需求三: 有没有特殊情况?

有. 有些页面需要快速开发, 并且后续不太需要维护, 只使用几次就扔了. 这样的页面, 可以对cont使用绝对定位.

css动画

上面说过, 改变元素的宽高会引起重排和重绘, 所以一些元素的动画尽量不要改变top, right, bottom, left, width, height等, 运用transform的translate和scaleX,scaleY来替代它们.不过要注意的是, 由于低版本ie不支持transform, 所以如果要兼容低版本ie的话, 还是不要用transform吧.

另外还可以用translateZ(0)来替代position: fixed.

去掉css和js

页面编写还有一条重要的准则, 去掉css和js后页面仍然具有良好的可读性.

这条准则在我们选用语义化标签和img还是background-img方面有很强的指导作用. 比如没有css和js, ul是一个列表, 而div只是一个块罢了. 再比如没有css和js, 一些大的img会占据相当大的位置, 可读性很差.

虽然随着时代的进步, 现在几乎碰不到打开网页却加载不了css和js的情况, 但是却在内容和SEO方面能给我们指导. SEO通常是看不到css和js的, 所以SEO就相当于看去掉了css和js的页面, 而且这种情况是经常发生的.

变量缓存

在使用闭包或者事件绑定的时候一定要注意释放变量, 具体可以看我的这一篇博文:js中的内存泄漏.