阅读 82

关于前端应该知道的5个小知识

1.关于计算机的冷知识你知道吗?

Windows鼠标指针的箭头图案是不对称的

关于前端应该知道的5个小知识

451错误,是一种在网站访问过程中,较为少见的错误提示。其通常用来代表“因法律原因而被官方审查禁止访问”的内容

关于前端应该知道的5个小知识


2.你知道浏览器地址栏可以运行代码吗?

(1).浏览器地址栏运行JavaScript代码

javascript:alert('hello 1802:)');浏览器弹出框输出输出hello 1802;

(2).浏览器地址栏运行HTML代码

data:text/html,<h1>Hello, 1802!</h1>浏览器页面输出hello 1802;

(3).浏览器地址栏运行HTML代码

data:text/html, <html contenteditable>浏览器页面变成可编辑页面

归根结底多亏了HTML5中新加的contenteditable属性,

元素的内容成为可编辑状态,可将浏览器页面变成记事本的功能.


3.你清楚这些区别吗?

(1).display:none与visibility:hidden的区别是什么?

display : 隐藏对应的元素但不挤占该元素原来的空间。

visibility: 隐藏对应的元素并且挤占该元素原来的空间。

display:none属性后,元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。

(2).CSS中link和@import的区别是

@import只有在ie5以上才可以被识别,而link是html标签,不存在浏览器兼容性问题

Link引入样式的权重大于@import的引用(@import是将引用的样式导入到当前的页面中)


4.HTML常见兼容性问题

1). 双边距BUG float引起的 使用display

2). 3像素问题 使用float引起的 使用dislpay:inline -3px

3). z-index问题 给父级添加position:relative

4). Min-height 最小高度 !Important 解决

5). 为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)

6). IE5-8不支持opacity,解决办法:

.opacity {

opacity: 0.4

filter: alpha(opacity=60); /* for IE5-7 */

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/

}

7). IE6不支持PNG透明背景,解决办法: IE6下使用gif图片


5.简要了解主流框架和框架鼻祖YUI

三大主流框架:vue 、React、AngularJS

关于前端应该知道的5个小知识

框架鼻祖 YUI 也有自己的 JavaScript 类库,DOM 操作和效果处理也还比较方便,功能和控件也很齐全,但是相比 jQuery 和 Ext JS 显得比较中庸一些。随着 Yahoo!的没落,YUI 的呼声也逐渐被新起的框架淹没,想来也让人惋惜。