前端学习笔记(CSS、JS基础篇)

CSS篇

  • 注意:css注释使用/ /,而不是<!– –>或者//,否则很容易导致不明错误!!!

div

  1. padding:内边距。盒子内容与盒子边框的距离设置,相当于给盒子加了厚度,使用此属性后会改变盒子整体大小(一般会设置weight/height=原来weight/height-padding值;

  2. 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

  1. font-size:文本字体,最好设置为偶数;

  2. text-indent:首行空格,使用em或px单位,一般使用em,表示首行缩进多少个字;

  3. line-height:行高,他的值=font-size+文字上下间距,即文字会在一个line-height高度的框中居中。

a标签

  1. 使用target属性设置在原页面还是新开页面打开链接;

  2. <base target=”xxx”/>在head中全局定义链接打开方式;

  3. 当a标签的href不是网址而是文件名(如xxx.doc等)时,点击后将会下载对应的文件;

  4. 当a标签的href是一个id时,称为锚点,点击后将跳转到对应id位置;

  5. 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,说白了就是有利于被搜索到。

样式优先级

  1. 类型 < class < id < 行间样式 < js;

  2. 同一优先级时,定义的层次越多,优先级越高,如 div p{xxx} > p{xxx};

  3. 同一优先级且层次数相同时,定义顺序越后,优先级越高。

css reset

  1. 有些标签有默认的样式,如body默认有8px的外边距,p默认有16px的外边距,ol默认每项前面加数字等。由于不同的浏览器可能会有不同的显示效果,为了做到浏览器兼容,首先要把默认样式重置(css reset),然后再加自己的样式慢慢调试;

  2. 不推荐使用*{xxx:none/0}来重置默认样式,因为这样会降低性能,一般使用复合样式罗列各种标签进行重置。

标签分类

  1. 内联标签(inline):

  • 默认可以与其他内联标签同行显示;

  • 不支持width和height;

  • 不支持margin和padding;

  • 代码换行将会显示一个空格(空格大小=字体大小/2);

  • 内容会撑开宽度。

  1. 块标签(block):

  • 默认独自占一行显示;

  • 没有宽度时,默认撑满一行;

  • 支持所有css命令。

  1. inline-block标签

  • 支持宽高;

  • 没有宽高时内容撑开宽度;

  • 同行显示;

  • ie6/7不支持inline-block;

  • img标签为inline-block标签。

  1. 可用display属性转变类型,如block转为块标签,inline转为内联标签;

  2. 几个注意的规范:

  • p、dt、h标签里面不能嵌套块属性标签;

  • a标签不能嵌套a标签;

  • 内联元素不能嵌套块。

float

  1. 支持宽高;

  2. 不设置宽高时内容撑开宽度;

  3. 同行显示;

  4. 脱离文档流(即飘在上面,会按照指定方向移动直到碰到父级边界或另一个浮动元素才停止);

  5. 提升层级半层(即会将其他块的内容挤到外面):一个元素分为元素本身和元素内容层,元素本身包括背景、宽高等,float设置后将提升层级半层,相当于元素内容被挤出来了。

  6. clear属性:设置元素某一方向不能有浮动元素,如果有,将自己退到下面。

清浮动

  • 问题描述:子块加了float,父块无法包住子块。

  • 解决方法:

    /*
    方法一:
    clear为父元素一个class
    */
    .clear{zoom:1;}
    .clear:after{content:"";display:block;clear:both;}
    /*
    方法二:
    .father为父元素class
    */
    .father{overflow:hidden;}

Ie6/7下的一些bug整理

  1. ie6下最小高度问题:最小高度为19px,即使使用font-size=0也有最小高度2px。解决方法:overflow:hidden;

  2. ie6双边距bug:同时使用float和margin-left/right,左右边距会加倍。解决方法:使用display:inline或者直接使用内嵌元素来解决(或者能使用margin的时候尽量使用padding替代margin);

  3. ie6/7下li间隙问题:解决方法:li之间有间隙。使用vertical-align来清理间隙。

定位

  1. 相对定位(relative):

  • 不影响元素本身特性;

  • 不使元素脱离文档流。

  1. 绝对定位(absolute):

  • 使元素完全脱离文档流;

  • 默认相对整个文档定位;

  • 使内嵌元素支持宽高;

  • 块元素撑开宽高;

  1. 定位具有层级关系,后申明者层级越高,可使用z-index改变层级。

  2. 绝对定位一般配合相对定位使用,如果有定位父级则相对定位父级定位,没有则相对整个文档定位。

  3. 固定定位:跟绝对定位特性基本相同,但也有一些不同点:

  • 固定定位始终相对整个文档定位,而不会受父级定位元素影响;

  • IE6不支持固定定位

  1. IE6下定位的一些bug:

  • relative:父级的overflow包不住子级的相对定位
    解决方法:给父级也加定位元素;

  • absolute:ie6下定位元素的父级宽高都为奇数时,定位元素的right和bottom都有1px的偏差
    解决方法:父级宽高尽量改为偶数。

  1. 可使用绝对定位或者固定定位清浮动,但一般不会特意使用此方法来清浮动,而是当刚好使用到浮动元素时可减少清浮动步骤。

  2. 模拟固定定位的方法:(1)css中控制滚动条方式;(2)css表达式(不常用);(3)使用js来控制。

图片格式问题

  1. 半透明效果的图片必须使用png;

  2. IE6不支持png24图片,解决方法有:

  • 使用网上已有的js处理方法,由于除了IE6以外的其他浏览器不需要加载该js文件,使用IE注释判断语句来判断:(不能处理body之上的png24)

    <!--[if IE 6]>
    xxx
    <![endif]-->
  • 使用css hack:使用特定浏览器才能解析的样式。不推荐使用,一方面代码复杂,另一方面维护性差。

  • 使用png滤镜:IE6下不支持图片平铺。

JS篇

一些基础

  1. IE6、7、8不支持js改变文本type,如xxx.type = “checkbox”,可考虑转换思维来处理:隐藏某个type,再显示另一个type;

  2. 不要对图片相对路径、color和innerHTML进行判断,会有兼容问题;

  3. IE和非IE对浮动控制有差别,IE下xxx.style.styleFloat = “left”,非IE下xxx.style.cssFloat = “left”。转换思维处理:css定义class样式为float:left,再在js里给元素加class;

  4. Js中”.”可以替换成”[]”;

  5. Class或者tagName等都是动态改变的,而Id是静态改变的,具体看例子1.6-js顺序问题.html;

  6. Js中“==”比较的是俩元素值,而“===”先比较俩元素类型,再比较值;

  7. NaN是一种不是数字的数字类型,typeof(NaN) => Number,出现NaN说明程序进行了非法的运算操作;

  8. NaN是false,且NaN == NaN为false;

  9. isNaN(x),Number(x)为数字时返回false,Number(x)为NaN时返回true;

  10. 函数的默认返回值是undefined;

  11. js中xxx.style.width等获取的是行间样式,不能获取到定义在上面的内部样式;

  12. getComputedStyle可以获取元素实际样式,但IE6、7、8不支持;currentStyle在除IE外的浏览器中不兼容;

  13. 定时器:

  • 重复执行:setInterval(fn,time):设置定时器;clearInterval(timer):关闭定时器。
    定时器如果是由事件控制的,要先关再开,避免多次触发而混乱。

  • 执行一次:setTimeout(fn,time);clearTimeout(timer)。

  1. json的length为undefined;

  2. 数组的.length可以改变数组长度,但字符串的.length不能;

  3. 数组的几个方法:push和unshift分别是往后和往前加元素,返回值都是最后数组长度(IE6/7不支持unshift的返回值),pop和shift分别是删除最后和第一个元素,返回值是删除的元素,splice可实现删除、替换、添加:splice(a,b):删除数组中从第a位开始的b个元素,splice(a,b,c):删除数组中从第a位开始的b个元素,并用c替换(所以如果b为0,相当于添加元素了);

  4. 生成给定范围的随机数,如x~y:Math.round(Math.random() * (y – x) + x) ;

  5. 1~x随机数,可使用取上整的方法:Math.ceil(Math.random() * x);

  6. 字符串转为数字:s – 0,数字转为字符串:a + “”;

  7. 数字和字符串比较:将字符串转为数字。字符串和非数字比较:非数字转为字符串;

高阶函数

  1. map:arr.map(function(x){return xxxxx;});对数组中每个元素做处理,得到一个新的array;

  2. reduce:arr.reduce(function(x,y){return xxxxxx;});对数组元素操作,x,y分别为上一次操作结果和数组中下一个元素,最后得到一个计算结果;

  3. filter:arr.filter(function(x){return true/false;});如果返回false,删除元素,最后得到一个新的array;

  4. sort:arr.sort(function(x,y){return -1/0/1;});

Js解析过程

  1. 逐个域解析(一个<script></script>包围的就是一个域,函数内部也是一个域):找出所有var、function等参数定义,放在仓库中(全局仓库或局部仓库)。遇到重名的会覆盖,如果参数与函数重名了,函数会覆盖参数。

  2. 逐行代码解析:当在函数中(局部仓库)找不到某个参数时,会往上一层找。

性能问题

  1. <script>脚本文件下载和执行会造成阻塞,所以最好把<script>脚本文件引用等放在最后面,这样才不会影响到页面的渲染;

  2. 外联脚本会因为HTTP请求造成一定的延时,所以要尽量减少外联脚本的个数,可以合并的尽量合并;

  3. window对象的onload事件是在渲染页面之后进行的,为了无阻塞脚本,可以尝试让脚本在onload事件触发后再下载,有两个能够异步加载和执行脚本的属性:

  • HTML4提出的defer,只有部分浏览器支持,带有此属性的脚本将在DOM加载完成后才下载执行;

  • HTML5提出的async,在页面加载的同时异步下载执行脚本,(下载完成后就会执行,所以执行顺序不定,适合不相互依赖的脚本)。

    原文作者:燕子酱
    原文地址: https://segmentfault.com/a/1190000004671771
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞