CSS盒子类型与JS简介

今日内容

盒子模型

所有的标签都可以看成一个快递盒

1.两个快递盒之间的距离		标签之间的距离		外边距
	margin
2.两个快递盒的厚度		标签的边框		边框
	border
3.盒子内物体距离盒子内壁		内部文本域边框的距离		内边距
	padding
4.物体自身的大小		标签内部的内容		内容
	content

需要掌握的内容
	margin-left: 100px;
	margin-right: 100px;	
	margin-top: 20px;
	margin-bottom: 100px;
        
body标签自带8px的外边框
	margin:0;  # 简写形式 作用于上下左右
	margin: 10px 20px;  # 上下  左右
	margin: 10px 20px 30px;  # 上 左右	下
	margin: 10px 20px 30px 40px;  # 上 右 下 左
 
margin还可以让内部标签居中展示
	margin:100px aotu  # 仅限于水平方向

'padding使用方式与margin一致'

浮动布局

1.浮动的作用 页面布局必不可少的操作
	float:left\right
浮动会造成父标签塌陷 这是一个不好的现象 因为会引起歧义
2.解决浮动造成的父标签塌陷
	.clearfix:after {
				content: '';
				display: block;
				clear: both;
				}
提前写好上述的css操作 遇到标签的塌陷就给标签加clearfix类值即可
'
浏览器针对文本是优先展示的 (浮动的元素如果遮挡会想办法展示)
'

溢出属性

值	作用
visible	默认值 内容不会被修剪 会呈现在元素框之外
hidden	内容会被修剪 并且其余内容是不可见的
scroll	内容会被修剪 但是浏览器会显示滚动条以便查看其余的内容
auto	如果内容被修剪 则浏览器会显示滚动条以便查看其余的内容
inherit	规定应该从父元素继承 overflow 属性的值

圆形头像案例

div {
	height: 200px;
	width: 200px;
	background-color: aqua;
	border-radius: 50%;
	overflow: hidden;
}

div img {
		max-width: 100%;
	}

定位

1.static(静态)
	所有的标签默认值都不能直接通过定位位置 必须要切换成下面三种之一
2.relative(相对定位)
	相对于标签原来的位置做定位
3.absolute(绝对定位)
	基于已经定位过的父标签做定位(如果没有父标签则boby作为参照)
4.fixed(固定定位)
	相对于浏览器窗口定位

z-index

其实浏览器是个三维坐标系界面 就是x,y,z

x,y指向电脑的平面 z轴指向用户

1.语法结构
	#d1 {
    z-index: 999;
    }
    
2.设置对象的层叠顺序
	1.z-index 值表示谁压着谁，数值大的压盖住数值小的，
	2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对	定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
	3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
	4.从父现象：父亲怂了，儿子再牛逼也没用

纯手搭页面练习

1.先分析页面结构 
	然后使用div和span构建出基本骨架
2.给标签起id和class便于后续查找并修改样式
	id与class的命名也要做到见名知意
3.正儿八经的写不同的语言应该存储不同的文件
	html文件、css文件、js文件

JavaScript简介

1.跟java没有关系 
	单纯是因为那时java比较火 蹭热度
    
2.JavaScript与ECMAScript区别
	该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标
 
3.JavaScript是一门编程语言(NodeJS)  
	逻辑性比较差 只能实现简单的功能
    
4.html页面两种引入js的方式
	1.在html页面上引入外部js文件
		语法:<script src="xx.js"></script>
	2.在页面中直接写js代码 这个方法也是最常用的方法
		语法:<script type="text/javascript">js代码</script>
            
5.两种注释语法
	/单行注释/
	/*多行注释*/
    
6.建议的结束符号是分号
	console.log();
'console.log(); 相当于python中的print'

JS变量与常量

1.支持编写js代码的地方
	pycharm
	浏览器
2.在JS中声明变量和常量都需要使用关键字
	var:全局有效
	let:如果在局部名称空间中使用 那么仅在局部名称空间有效
	const:定义常量 定义之后就不能改变
3.JS也是动态类型:变量名绑定的数据值类型不固定
	var name = 'jason'
	name = 123
	name = [11, 22, 33, 44]
'
js中变量名建议使用驼峰体
'

JS数据类型之数值类型

1.在js中查看数据类型
	typeof
2.在js中整型浮点型统称为数值类型nubber
	parseInt()  # 转成整型
	parseFloat  # 转成浮点型
3.NAN:全称(Not A Number)
	表示不是一个数字

JS数据类型之字符串类型(string)

1.使用的三种方式
	name = 'jason'
	name = "jason"
	name = `jason`  # 换行:按住shift才加回车键
2.内置方法
	1.js中涉及到字符串的拼接 推荐使用加号 不是同一个类型也能拼接
	2.统一长度 lenght()
	3.移除空格 trim()
	4.移除左边的空格 trimLeft()
	5.移除右边的空格 trimRight()
	6.切片操作substring(start,end)、slice(start,end)
    	前者不支持负数索引 后者支持
	7.大写 toUpperCase()
	8.小写 toLowerCase()
	9.分割 split()
	10.字符串序列化
    	`my name is ${name} my age is ${age}`