2019年6月28 前端高级预备课

猫先生M

于 2019-08-07 20:28:40 发布

阅读量221

点赞数 1

分类专栏：高级前端进阶

本文链接：https://blog.csdn.net/u010125836/article/details/94001852

版权

高级前端进阶专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、边界扩展

积累积累 != 聪明 !=天赋取决你是否愿意不断学习、不断积累；广积粮缓称王
英语最新的文档资料最新的技术不要寄希望于别人翻译加强英文阅读水平
分享输入、输出分享过程中对知识的强化、整理总结就是最好的学习独学而无友则孤陋而寡闻
二八原则 80%的时间设计 20% codeing debug

不要等待闲的再干什么…
自己去写去敲

作业考核：学分

JS是面向对象的语言，不足优势
什么是对象？《面向对象分析与设计》

用类的方式描述对象： C++ java
用原型的方式描述对象: javaScript new this

对象的本质：
唯一标识性，即使完全相同的2个对象，也不是同一个对象（内存地址）
对象有状态同一对象可能处于不同的状态之下
对象有行为对象的状态可能因为行为而发生改变

var obj1 = {}, obj2 = {};
obj1 === obj2;
false

C++  状态 = 成员变量  行为 =  成员函数 
Java  状态 = 属性    行为 = 方法 
JavaScript 状态 = 属性   行为 = 属性    

var obj  = {
	name:'max',
	fn:function(){
		
	}
}
 
js 独特性 ： 对象具有高度的动态性，因为js赋予了使用者 在 运行时修改  对象状态 行为的能力
提高抽象的能力：
属性描述对象：
数据属性： value  writable enumerable configurable 
访问属性： get set 

JavaScript中有哪些对象？ 

数字的直接量可以是十进制  带小数点 的，单不可以前后都省略

特殊的东西： 
1.toString();  //输出  把1转换成 number

装箱转换， 每一种基本类型 都有对应的类（产生临时的对象）
拆箱操作： 把对象转换成原始类型的值 
toPrimitive(input,preferedType);
input 输入 对象 
preferedType 输出    字符串 || 数字
1，输入原始值 直接返回
2，输入对象 调用 input.valueOf() 原始值 直接返回 
3，调用input.toString() 原始值 直接返回 
4， 报错
如果输入的是String的话， toString在前  valueOf在后



[] + [] //[].valueOf() 得到[] ;  [].toString() 得到 "" ; "" + "" = ""
[] + {}
	{} + {} Object对象的字面量   代码块  + [] 最终为0
	+ 
	
	隐士转换  ==    拆箱操作 对象与原始值   原始类型的值   运算 比较 
	= = =  不会隐士值  拆箱操作

	prototype 对象的属性  函数对象的属性   当成构造函数 定义它的原型对象 

__proto_   属性存在  对象的  任意对象  指向自身构造函数的原型对象
对象的区分：内置对象    JavaScript  宿主对象 window  自定义对象

一、css reset : 清除浏览器默认样式，针对特定网站设置大多数的标签样式值。
二、页面架构中的居中布局
1，水平居中
inline-block + text-align

<!DOCTYPE html>
<html>
	<style>
		.child{
			display: inline-block;
		}
		.parent{
			text-align: center;
		}
		
		.child{
			display: table;
			margin: 0 auto;
		}
		
		.parent{
			position: relative;
		}
		.child{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);//参照物是自己
		}
		
		//2. 水平居中 flex + justify-content
		.parent{
			display: flex;
			justify-content: center;
		}
		或者可以
		.child{
			margin: 0 auto;
		}
		
	</style>
	<body>
		<!-- 水平居中布局 1. inline-block + text-align -->
		<div class="parent">
			<div class="child">DEMO</div>
		</div>
	</body>
</html>

垂直居中

<!DOCTYPE html>
<html>
	<style>
		1>表格中单元格的特性
		.parent{
			display: table-cell;
			vertical-align: middle;
		}
		
		2>absolute + transform 高度一半的值往上偏移
		.parent{
			position: relative;
		}
		.child{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
		
		3>flex+ align-items
		.parent{
			display: flex;
			align-items: center;
		}
		
	</style>
	<body>
		<!-- 垂直居中布局 1. table-cell + vertical-align -->
		<div class="parent">
			<div class="child">DEMO</div>
		</div>
	</body>
</html>

水平垂直居中

<!DOCTYPE html>
<html>
	<style>
	1>inline-block + text-align +  table-cell + vertical-align 
	.parent{
		text-align: center;
		display: table-cell;
		vertical-align: middle;
	}
	.child{
		display: inline-block;
	}
	
	2>absolute + transform
	.parent{
		position: relative;
	}
	.child{
		position: absolute;
		left: 50%;
		top:50%;
		transform: translateX(-50%,-50%);
	}
		
	3>flex + justify-content + align-items
	.parent{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	</style>
	<body>
		<!-- 水平垂直居中布局 -->
		<div class="parent">
			<div class="child">DEMO</div>
		</div>
	</body>
</html>

猫先生M

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2019年6月28 前端高级预备课

一、边界扩展积累积累 != 聪明 !=天赋取决你是否愿意不断学习、不断积累；广积粮缓称王英语最新的文档资料最新的技术不要寄希望于别人翻译加强英文阅读水平分享输入、输出分享过程中对知识的强化、整理总结就是最好的学习独学而无友则孤陋而寡闻二八原则 80%的时间设计 20% codeing debug不要等待闲的再...
复制链接

扫一扫