前端基础学习-CSS、JS

今日学习内容

		CSS浮动和定位
		静态页面简单布局、响应式布局简单介绍
		JavaScript概述于与引用、基本类型
		JS流程控制

CSS浮动和定位

		一、浮动
		float:left/right;(左浮动或右浮动)
			1.浮动会让元素脱离文档流,后面不浮动的元素会占据原来的位置
            2.停止浮动:
                a.碰到父级元素的边界会停止
                b.碰到前面有浮动的元素(紧跟在浮动元素之后排列)
                c.当碰到没有浮动的元素
            3.浮动会把元素转换成行内块元素(让我元素并在一行)
            4.当父元素没有设置固定高度时,子元素都浮动,父级元素的高度就无法被撑开
                给父级元素添加overflow:hidden;
            5.当父级元素不够时,浮动元素会换行显示
		二、定位
		position:absolute\realtive\fixed\static;绝对(脱离文档流)\相对(不脱离文档流)\
		固定(脱离文档流，以浏览器为参考点)\默认值
		绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素
		top\left\right\bottom:100px;设置定位不同方向的数值
		z-index:定位元素是浮动在正常的文档流之上的，可以用z-index属性来设置元素的层级

页面布局

		一、静态布局：元素不变的布局。
				布局特点：窗口缩小后内容被遮挡时，拖动滚动条显示布局	
				设计方法：
				PC：居中布局，所有样式使用绝对宽度，高度
				移动设备：另外建立移动网站，以m.域名为域名
		二、
			响应式布局：创建多个布局，分别对应一个屏幕分辨率范围
			特点：分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面
			元素宽度随着窗口调整而自动适配
			@media (max-width:960px)
					{.a{width:50%;}}

JavaScript概述与页面引用

	        JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，
	    包括使用交互与数据交互。JavaScript是浏览器解释执行的。
	    JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
	    特点： 1. 弱类型 2. 基于对象。(因为面向对象需要具有封装、继承、多态的特征)
	    			3. 安全4. 兼容性
	    页面引入方式三种：
	    1、页面script标签嵌入
			<script type="text/javascript">
				var a = '你好！';
				alert(a);
			</script>
		2.外部引入
			<script type="text/javascript" src="js/index.js"></script>
		3.行间事件（主要用于事件）
			<input type="button" name="" onclick="alert('ok！');">

JS数据类型与运算符

		1、数据类型
		boolean ,number,string,object,function函数  ,undefined(变量没赋值就是undefined类型)	
		对象类型 var obj={name:'x',age=18};
		数组对象 var list=[1,2,3,4];
		数据类型转换：Number() 字符串中有非数值的字符返回NaN
					 parseInt() 返回字符串中从头开始的数值整型
					 parseFloat()返回字符串中从头开始的浮点数
		isNaN()      是数字返回false 不是数字返回true
		Boolean()    参数是string：空字符串返回false其他都是true
				     参数是Number:0或0,0或NaN返回false其他都是true
					 参数是obj :null返回false,其他都是true
		console.log()	结果输出到控制台
	
		2、运算符
		===全等运算符 	在比较时除了值相同类型也必须相同
		!==全不等运算符  在比较时除了值相同类型也必须相同
		其他运算符类似java语言

JS流程控制

	流程控制用于基于不同的条件来执行不同的动作。
	if...else if ... else if ... else...
	switch（）{case :...break; default:}
	for(var i=0;i<len;i++){}
	以上3种类似java语言
	for-in 语句是严格的迭代语句，用于枚举对象的属性。
	var a = [10,20,30,40,50];
	for(i in a){
	 document.write(a[i]);迭代的是数组的下标。
	}

	（只简单记录了部分重点和容易出错的内容）日期2020-05-11