前端学习笔记（CSS、JS基础篇）

2024年3月6日 183次阅读 来源: 燕子酱

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