前端进修笔记（CSS、JS基本篇）

2024年1月5日 174次阅读 来源: 燕子酱

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞