CSS篇
注意:css注释使用/ /,而不是<!– –>或者//,否则很容易导致不明错误!!!
div
padding:内边距。盒子内容与盒子边框的距离设置,相当于给盒子加了厚度,使用此属性后会改变盒子整体大小(一般会设置weight/height=原来weight/height-padding值;
margin:外边距。盒子与盒子之间的距离设置。需要注意的几个问题:
外边距会叠压。例如设置了上面的div的margin-bottom,又设置了下面的div的margin-top,结果两个div的距离不是两个margin值之和,而是最后一个设置的margin值;
父子级包含时子级的margin会传递给父级,如:
<div id=’father’><div id=’child’ style=’margin-top:10px’></div></div>
页面效果是两个div组成的整体距离外部上方10px,而两个div之间不会相距10px。若想要子div上边框距离父div10px,应使用padding(设置父div的padding);
auto属性设置后,拉伸缩小浏览器后,div位置保持不变;
font
font-size:文本字体,最好设置为偶数;
text-indent:首行空格,使用em或px单位,一般使用em,表示首行缩进多少个字;
line-height:行高,他的值=font-size+文字上下间距,即文字会在一个line-height高度的框中居中。
a标签
使用target属性设置在原页面还是新开页面打开链接;
<base target=”xxx”/>在head中全局定义链接打开方式;
当a标签的href不是网址而是文件名(如xxx.doc等)时,点击后将会下载对应的文件;
当a标签的href是一个id时,称为锚点,点击后将跳转到对应id位置;
4个伪类:
link:未访问(默认,初始状态)
hover:鼠标悬停(鼠标划过)
active:链接激活(鼠标按下瞬间)
visited:访问过后(点击过后)
4个伪类优先级相同,所以要注意顺序,若将visited放在最后,点击一次过后(发现谷歌浏览器第一次就失效了),hover和active将会失效,因为visited放在最后从而优先级最高了。
一般使用顺序为:link、visited、hover、active。记忆方法:love hate。
其他标签也有这4个伪类,但ie6只支持a标签的这4个伪类。
SEO
SEO:搜索引擎优化。搜索引擎中有一个爬虫模块,在页面中使用诸如h1/h2/h3/strong/em等强调式的标签,有利于seo,说白了就是有利于被搜索到。
样式优先级
类型 < class < id < 行间样式 < js;
同一优先级时,定义的层次越多,优先级越高,如 div p{xxx} > p{xxx};
同一优先级且层次数相同时,定义顺序越后,优先级越高。
css reset
有些标签有默认的样式,如body默认有8px的外边距,p默认有16px的外边距,ol默认每项前面加数字等。由于不同的浏览器可能会有不同的显示效果,为了做到浏览器兼容,首先要把默认样式重置(css reset),然后再加自己的样式慢慢调试;
不推荐使用*{xxx:none/0}来重置默认样式,因为这样会降低性能,一般使用复合样式罗列各种标签进行重置。
标签分类
内联标签(inline):
默认可以与其他内联标签同行显示;
不支持width和height;
不支持margin和padding;
代码换行将会显示一个空格(空格大小=字体大小/2);
内容会撑开宽度。
块标签(block):
默认独自占一行显示;
没有宽度时,默认撑满一行;
支持所有css命令。
inline-block标签
支持宽高;
没有宽高时内容撑开宽度;
同行显示;
ie6/7不支持inline-block;
img标签为inline-block标签。
可用display属性转变类型,如block转为块标签,inline转为内联标签;
几个注意的规范:
p、dt、h标签里面不能嵌套块属性标签;
a标签不能嵌套a标签;
内联元素不能嵌套块。
float
支持宽高;
不设置宽高时内容撑开宽度;
同行显示;
脱离文档流(即飘在上面,会按照指定方向移动直到碰到父级边界或另一个浮动元素才停止);
提升层级半层(即会将其他块的内容挤到外面):一个元素分为元素本身和元素内容层,元素本身包括背景、宽高等,float设置后将提升层级半层,相当于元素内容被挤出来了。
clear属性:设置元素某一方向不能有浮动元素,如果有,将自己退到下面。
清浮动
问题描述:子块加了float,父块无法包住子块。
解决方法:
/* 方法一: clear为父元素一个class */ .clear{zoom:1;} .clear:after{content:"";display:block;clear:both;} /* 方法二: .father为父元素class */ .father{overflow:hidden;}
Ie6/7下的一些bug整理
ie6下最小高度问题:最小高度为19px,即使使用font-size=0也有最小高度2px。解决方法:overflow:hidden;
ie6双边距bug:同时使用float和margin-left/right,左右边距会加倍。解决方法:使用display:inline或者直接使用内嵌元素来解决(或者能使用margin的时候尽量使用padding替代margin);
ie6/7下li间隙问题:解决方法:li之间有间隙。使用vertical-align来清理间隙。
定位
相对定位(relative):
不影响元素本身特性;
不使元素脱离文档流。
绝对定位(absolute):
使元素完全脱离文档流;
默认相对整个文档定位;
使内嵌元素支持宽高;
块元素撑开宽高;
定位具有层级关系,后申明者层级越高,可使用z-index改变层级。
绝对定位一般配合相对定位使用,如果有定位父级则相对定位父级定位,没有则相对整个文档定位。
固定定位:跟绝对定位特性基本相同,但也有一些不同点:
固定定位始终相对整个文档定位,而不会受父级定位元素影响;
IE6不支持固定定位
IE6下定位的一些bug:
relative:父级的overflow包不住子级的相对定位
解决方法:给父级也加定位元素;absolute:ie6下定位元素的父级宽高都为奇数时,定位元素的right和bottom都有1px的偏差
解决方法:父级宽高尽量改为偶数。
可使用绝对定位或者固定定位清浮动,但一般不会特意使用此方法来清浮动,而是当刚好使用到浮动元素时可减少清浮动步骤。
模拟固定定位的方法:(1)css中控制滚动条方式;(2)css表达式(不常用);(3)使用js来控制。
图片格式问题
半透明效果的图片必须使用png;
IE6不支持png24图片,解决方法有:
使用网上已有的js处理方法,由于除了IE6以外的其他浏览器不需要加载该js文件,使用IE注释判断语句来判断:(不能处理body之上的png24)
<!--[if IE 6]> xxx <![endif]-->
使用css hack:使用特定浏览器才能解析的样式。不推荐使用,一方面代码复杂,另一方面维护性差。
使用png滤镜:IE6下不支持图片平铺。
JS篇
一些基础
IE6、7、8不支持js改变文本type,如xxx.type = “checkbox”,可考虑转换思维来处理:隐藏某个type,再显示另一个type;
不要对图片相对路径、color和innerHTML进行判断,会有兼容问题;
IE和非IE对浮动控制有差别,IE下xxx.style.styleFloat = “left”,非IE下xxx.style.cssFloat = “left”。转换思维处理:css定义class样式为float:left,再在js里给元素加class;
Js中”.”可以替换成”[]”;
Class或者tagName等都是动态改变的,而Id是静态改变的,具体看例子1.6-js顺序问题.html;
Js中“==”比较的是俩元素值,而“===”先比较俩元素类型,再比较值;
NaN是一种不是数字的数字类型,typeof(NaN) => Number,出现NaN说明程序进行了非法的运算操作;
NaN是false,且NaN == NaN为false;
isNaN(x),Number(x)为数字时返回false,Number(x)为NaN时返回true;
函数的默认返回值是undefined;
js中xxx.style.width等获取的是行间样式,不能获取到定义在上面的内部样式;
getComputedStyle可以获取元素实际样式,但IE6、7、8不支持;currentStyle在除IE外的浏览器中不兼容;
定时器:
重复执行:setInterval(fn,time):设置定时器;clearInterval(timer):关闭定时器。
定时器如果是由事件控制的,要先关再开,避免多次触发而混乱。执行一次:setTimeout(fn,time);clearTimeout(timer)。
json的length为undefined;
数组的.length可以改变数组长度,但字符串的.length不能;
数组的几个方法:push和unshift分别是往后和往前加元素,返回值都是最后数组长度(IE6/7不支持unshift的返回值),pop和shift分别是删除最后和第一个元素,返回值是删除的元素,splice可实现删除、替换、添加:splice(a,b):删除数组中从第a位开始的b个元素,splice(a,b,c):删除数组中从第a位开始的b个元素,并用c替换(所以如果b为0,相当于添加元素了);
生成给定范围的随机数,如x~y:Math.round(Math.random() * (y – x) + x) ;
1~x随机数,可使用取上整的方法:Math.ceil(Math.random() * x);
字符串转为数字:s – 0,数字转为字符串:a + “”;
数字和字符串比较:将字符串转为数字。字符串和非数字比较:非数字转为字符串;
高阶函数
map:arr.map(function(x){return xxxxx;});对数组中每个元素做处理,得到一个新的array;
reduce:arr.reduce(function(x,y){return xxxxxx;});对数组元素操作,x,y分别为上一次操作结果和数组中下一个元素,最后得到一个计算结果;
filter:arr.filter(function(x){return true/false;});如果返回false,删除元素,最后得到一个新的array;
sort:arr.sort(function(x,y){return -1/0/1;});
Js解析过程
逐个域解析(一个<script></script>包围的就是一个域,函数内部也是一个域):找出所有var、function等参数定义,放在仓库中(全局仓库或局部仓库)。遇到重名的会覆盖,如果参数与函数重名了,函数会覆盖参数。
逐行代码解析:当在函数中(局部仓库)找不到某个参数时,会往上一层找。
性能问题
<script>脚本文件下载和执行会造成阻塞,所以最好把<script>脚本文件引用等放在最后面,这样才不会影响到页面的渲染;
外联脚本会因为HTTP请求造成一定的延时,所以要尽量减少外联脚本的个数,可以合并的尽量合并;
window对象的onload事件是在渲染页面之后进行的,为了无阻塞脚本,可以尝试让脚本在onload事件触发后再下载,有两个能够异步加载和执行脚本的属性:
HTML4提出的defer,只有部分浏览器支持,带有此属性的脚本将在DOM加载完成后才下载执行;
HTML5提出的async,在页面加载的同时异步下载执行脚本,(下载完成后就会执行,所以执行顺序不定,适合不相互依赖的脚本)。