前端基础整理

css3新增

CSS3实现圆角（border-radius），阴影（box-shadow）

对文字加特效（text-shado），线性渐变（gradient），旋转（transform）

@Font-face加载字体样式

@font-face { 
　　font-family: Runic; 
　　src:url(RUNICMT0.eot); 
}

transform:rotate(9deg) scale(0.85,0.90) translate(0,-30px,0) skew(-9deg,0deg)

增加了更多的CSS选择器如:first-child :nth-child等

多背景 rgba

在CSS3中唯一引入的伪元素是 ::selection

媒体查询(@media screen and xxx),flex弹性布局

border-image

H5新增

语义的标签化如aside、dialog、time、nav、mark、progress、wbr等
Canvas
draggable：事件ondrop ondragstart ondragover
地理定位：getCurrentPosition
音频、视频标签：audio、video
input新输入类型：email、color、datetime、range、time、week等

新表单元素：datalist标签定义选项列表与 input 元素配合使用该元素用于定义 input 可能的值

<input list="browsers">
　　<datalist id="browsers">
　　<option value="Internet Explorer">
　　<option value="Firefox">
　　<option value="Chrome">
　　<option value="Opera">
　　<option value="Safari">
</datalist>

keygen规定表单的密钥对生成器字段，output定义不同类型的输出，比如脚本的输出
新表单属性：autocomplete、novalidate
input新属性：autofocus、autocomplete、multiple、pattern、placeholder、required等
web存储：sessionStorage、localStorage
离线web应用（应用程序缓存Cache Manifest）：三个优势离线浏览、加载速度更快、减少服务器负载
web worker：运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能，web worker 在后台运行
SSE：Server-Sent Even指的是网页自动获取来自服务器的更新
websocket：单个 TCP 连接上进行全双工通讯的协议进行连接后 send() 方法来向服务器发送数据 onmessage 事件来接收服务器返回的数据

css盒模型

content内容、padding内边距、border边框、margin外边距

box-sizing:

- content-box：content
- border-box：content+2*（padding+border）
- inherit 继承父元素的box-sizing

position

absolute 会使得行内元素会变为块级元素，继承最近的非inherit的父元素定位
relative 相对于当前文档流正常位置进行定位
fixed 相对于屏幕可视区域的定位
inherit 继承父元素的position
static 默认无定位文档流正常位置

清除浮动

父元素设置height，再设置overflow：hidden

父元素添加伪元素如：

父元素::after{
    content: “”;
    display: block;
    visibility: hidden;
    clear: both;
}

垂直水平居中

父元素display:flex；justify-content:center；align-item：center
父元素display:table；justify-content:center；align-item：center 子元素：display：table-cell
父元素position:relative 子元素 position:absolute;left:50%;top:50%;transform:translate(-50% -50%)

css标签

行级元素不独立成行,在一行显示,margin和padding都上下无效,左右有效。常见的行级元素a,b,span,img,input,strong,label , em , textarea 等
块级元素常见的h1-h6,p,div,ul,li,dl,dt,dd,ol,blockquote等
选择器权重 !important>内联样式>id>class=伪类如hover>标签=伪元素如:before>通配符、子选择器、相邻选择器即*、>、+

SVG

SVG 通过 XML 描述 2D 图形的语言
SVG 基于 XML,因此可以为某个元素添加 Js 事件
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形

canvas

Canvas 通过Js 来绘制 2D 图形
Canvas 是逐像素进行渲染的
Canvas 中一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象

js内置对象:

Global:

- eval(string) 判断一个字符串并将其以脚本代码的形式执行
- isFinite(number) 检测一个值是否为一个有限数字,返回True或False
- isNaN(string) 检测一个值是否不是一个有限数字 True为不为数字
- Number() 将一个对象的值转换为一个数字
- parseFloat(string) 将一个字符串解析为一个浮点数字
- parseInt(string) 将一个字符串解析为一个整数,不是四舍五入操作,而是切尾
- String(object) 将一个对象值转换为一个字符串

Math:

- abs(x)绝对值
- max(x,y)
- min(x,y)
- floor(x)向下取整
- ceil(x)向上取整
- round(x)四舍五入
- random()随机

js数据类型 ：Number Boolean String Object unll undefine symbol

基本类型： symbol string number boolean undefined null

复杂类型：object function array date regex等

typeof：返回的是对象的类型用字符串表示分别有七种：number boolean string object undefine function symbol 与js数据类型一一对应

instanceof：返回boolean 判断一个对象在其原型链中是否存在一个构造函数的 prototype 属性

普通对象和函数对象

let a=()=>{};
let b=new Object();
let c=[];

typeof(a) //function 所有通过function创造的对象都称为函数对象
typeof(b) //object 
typeof(c) //object  其余称为普通对象

原型与原型链

实例的构造函数属性（constructor）指向构造函数

function A(){};
let a= new A();

a instanceof A; //true
a.constructor===A; //true a的constructor 从A的prototype 即原型中继承而来

A.prototype.constructor === A; //true
a.__proto__ === A.prototype; //true 
a.constructor === A; //true

任何对象都有__proto__ 只有函数对象有prototype

　 普通对象的__proto__都指向该对象构造函数的原型对象

function E(){};
let a={},b=[],c='',d=2,e=new E();

a.__proto__===Object.prototype; //true
b.__proto__===Array.prototype; //true
c.__proto__===String.prototype; //true
d.__proto__===Number.prototype; //true
e.__proto__===E.prototype; //true

　　除了Object外 所有函数对象的__proto__都指向该对象构造函数的原型对象

function E(){};
let a={},b=[],c='',d=2,e=new E();

a.__proto__.__proto__===null; //true
b.__proto__.__proto__===Function.prototype; //true
c.__proto__.__proto__===Function.prototype; //true
d.__proto__.__proto__===Function.prototype; //true
e.__proto__.__proto__===Function.prototype; //true

b.__proto__.__proto__.__proto__===null; //true
c.__proto__.__proto__.__proto__===null; //true
d.__proto__.__proto__.__proto__===null; //true
e.__proto__.__proto__.__proto__===null; //true

原型链存在于实例 xx 与构造函数的原型对象 XX.prototype之间通过xx.__proto__链接而不是存在于实例 xx 与构造函数 function XX(){} 之间

posted @ 2018-04-17 12:35 莫非王臣阅读(136) 评论(0) 编辑收藏举报

刷新页面返回顶部

莫非王臣

前端基础整理

公告