溢出、定位、z-index、JavaScript
学习内容总结
今日学习内容总结
在昨日的学习中，我们学习了伪元素选择器，也是我们学习的最后一个选择器。因为有很多选择器，所以我们需要知道这些选择器的优先级。然后就开始了对css的学习。今天同样是对css的学习。同时还要学习JavaScript。
溢出属性
当一个元素固定为某个特定大小，但内容在元素中放不下。此时就可以利用overflow属性来控制这种情况。这种情况也叫溢出。
定义
overflow溢出
值: visible | hidden | scroll | auto | inherit
初始值: visible
应用于: 块级元素、替换元素、表单元格
继承性: 无
属性
1. visible
元素的内容在元素框之外也可见
2. auto
如果内容被剪裁，则浏览器会显示滚动条以便查看其余的内容
3. scroll
元素的内容会在元素框的边界处剪裁，但浏览器会显示滚动条以便查看其余的内容
4. hidden
元素的内容会在元素框的边界处剪裁，并且超出剪裁区域的内容不可见
定位
CSS中的定位使用来布局的熟练应用对页面美化有很好的帮助，下面就进行详细介绍：定位分为静态定位，相对定位，绝对定位，固定定位这四种。
静态定位 static
一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流，即不能通过定位操作改变位置。
相对定位 relative
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位 absolute
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
相对于其包含块定位的意思就是：绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
固定定位 fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。也就是说，如果一个元素被fixed定位了，不管你怎么滑动，他都相对于窗口位置不变。
z-index属性
定义
通常情况下，HTML页面可以被认为是二维的，因为文本，图像和其他元素被排列在页面上而不重叠。在这种情况下，只有一个渲染进程，所有元素都知道其他元素所占用的空间。 z-index属性可让你在渲染内容时调整对象分层的顺序。
z-index 属性是设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。元素可拥有负的 z-index 属性值。Z-index 仅能在定位元素上奏效。
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
层级关系比较
1. 对于同级元素，默认(或 position:static)情况下文档流后面的元素会覆盖前面的。
2. 对于同级元素，position 不为 static 且 z-index 存在的情况下 z-index 大的元素会覆盖 z-index 小的元素，即 z-index 越大优先级越高。
3. IE6/7 下 position 不为 static，且 z-index 不存在时 z-index 为 0，除此之外的浏览器 z-index 为 auto。
4. z-index 为 auto 的元素不参与层级关系的比较，由向上遍历至此且 z-index 不为auto 的元素来参与比较
优先级规则：
1. 顺序规则
如果不对节点设定 position 属性，位于文档流后面的节点会遮盖前面的节点。
2. 定位规则
2.1. 如果将 position 设为 static，位于文档流后面的节点依然会遮盖前面的节点 浮动,，所以 position:static 不会影响节点的遮盖关系。
2.2. 如果将 position 设为 relative (相对定位)，absolute (绝对定位) 或者 fixed(固定定位)，这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点，说明前者比后者的默认层级高。
2.3. 在没有 z-index 属性干扰的情况下, 根据这顺序规则和定位规则, 我们可以做出更加复杂的结构. 这里我们对 A 和 B 都不设定 position, 但对 A 的子节点 A-1 设定 position:relative. 根据顺序规则, B 会覆盖 A, 又根据定位规则 A’ 会覆盖 B。
3. 参与规则
我们尝试不用 position 属性, 但为节点加上 z-index 属性. 发现 z-index 对节点没起作用. z-index 属性仅在节点的 position 属性为 relative, absolute 或者fixed 时生效。
4. 默认值规则
如果所有节点都定义了 position:relative. z-index 为 0 的节点与没有定义 zindex 在同一层级内没有高低之分; 但 z-index 大于等于 1 的节点会遮盖没有定义。z-index 的节点; z-index 的值为负数的节点将被没有定义 z-index 的节点覆盖。
5. 从父规则
如果 A, B 节点都定义了 position:relative, A 节点的 z-index 比 B 节点大, 那么 A 的子节点必定覆盖在 B 的子节点前面。
JavaScript
JavaScript简介
JavaScript（通常缩写为JS）是一种高级的、解释型的编程语言。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。它已经由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、Firefox、Safari、Opera）支持。
JavaScript特定
1. 简单性: 它是基于Java基本语句和控制流之上的简单而紧凑的设计，是学习Java的好过渡，而且，它的变量类型是采用弱类型，未采用严格的数据类型。但是JavaScript与Java没有半毛钱关系。
2. 安全性: JS不允许访问本地硬盘，不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，从而有效的防止数据的丢失。
3. 动态性: JS可以直接对用户或客户输入做出响应，无须经过Web程序。它对用户的响应采用以事件驱动的方式进行，即由某种操作动作引起相应的事件响应，如：点击鼠标、移动窗口、选择菜单等。
4. 跨平台性: JS依赖于浏览器本身，与操作环境无关。只要能运行浏览器的计算机，并安装了支持JS的浏览器就可以正确执行，从而实现了“编写一次，走遍天下”的梦想。
变量与注释
# 1.注释语法
// 单行注释
/*多行注释*/
# 2.结束符号
分号结束 console.log('hello world');
# 3.变量声明
在js中定义变量需要使用关键字声明
1.var
var name = 'jason'
2.let
let name = 'jason'
'''var声明都是全局变量 let可以声明局部变量'''
# 4.常量声明
const pi = 3.14
编写js代码的位置。
1.pycharm提供的js文件
2.浏览器提供的js环境(学习阶段推荐)
数据类型
JavaScript中有几种简单数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number和String。还要一种复杂类型——Object，Object本质是一组无序的名值对组成。JavaScript中不支持任何创建自定义的类型的机制，而所有值都是这6种数据类型之一。
数值类型 Number类型
在JavaScript中number类型定义了不同的数值字面量格式。相当于python里面的整型int和浮点型float等。
1. var intNumber = 55; //十进制整数
2. var octalNum1 = 070; //八进制的56
3. var octaNum2 = 079; //无效的八进制数，解析为79
4. var octaNum3 = 08; //无效的八进制数，解析为8
5. var hexNum1 = 0xA; //十六进制的10
6. var hexNum2 = 0x1f; //十六进制的31
NaN即非数值，是一个特殊的数值。这个数用于表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）。NaN本身有两个特点：
1. 任何涉及NaN的操作（例如NaN/10）都会返回NaN，这个特点在多步计算中有可能导致问题。
2. NaN与任何值都不相等，包括NaN本身。
字符类型 String类型
string类型用于表示零或多个Unicode字符组成的字符序列，即字符串。字符串可以由双引号（"）或单引号（’）表示，相当于python里面的字符串str。
1.字符的拼接
js中推荐使用加号
2.统计长度
js中使用length python中使用len()
3.移除空白(不能指定)
js中使用trim()、trimLeft()、trimRight()
python中使用strip()、lstrip()、rstrip()
4.切片操作
js中使用substring(start,stop)、slice(start,stop)
前者不支持负数索引后者支持
python中使用[index1:index2]
5.大小写转换
js中使用.toLowerCase()、.toUpperCase()
python中使用lower()、upper()
6.切割字符串
js中和python都是用split() 但是有点区别
ss1.split(' ')
['jason', 'say', 'hello', 'big', 'baby']
ss1.split(' ', 1)
['jason']
ss1.split(' ', 2)
['jason', 'say']
7.字符串的格式化
js中使用格式化字符串(小顿号)
var name = 'jason'
var age = 18
console.log(`
my name is ${name} my age is ${age}
`)
my name is jason my age is 18
python中使用%或者format
字符串的特点：
JavaScript中的字符串是不可变的，也就是说，字符串一旦创建，它的值就是不可更改的。要更改某个变量中保存的字符串，首先要销毁原来的字符串，然后用另一个包含新值得字符串填充变量。
布尔类型 Boolean类型
Boolean类型是JavaScript中使用最多的一种类型，该类型只有两个字面值：true和false。这两个值与数字值不是一回事，因此true不一定等于1，而false也不一定等于0。相当于python中的布尔值bool。
Boolean
js中布尔值是全小写
true false
布尔值为false的 0 空字符串 null undefined NaN
python中布尔值时首字母大写
True False
布尔值为False的 0 None 空字符串 空列表 空字典...
# null的意思是空 undefined的意思是没有定义
对象 Object类型
JavaScript中的对象是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型名称来创建。而创建Object类型的实例并为其添加属性或方法，就可以创建自定义对象。相当于python中的列表、字典、对象。
Object的每个实例都具有以下下列属性和方法：
1.追加元素
js中使用push() python中使用append()
2.弹出元素
js和python都用的pop()
3.头部插入元素
js中使用unshift() python中使用insert()
4.头部移除元素
js中使用shift() python中可以使用pop(0) remove()
5.扩展列表
js中使用concat() python中使用extend()
6.forEach
var l2 = ['jason', 'tony', 'kevin', 'oscar', 'jerry']
l2.forEach(function(arg1){console.log(arg1)})
VM3143:1 jason
VM3143:1 tony
VM3143:1 kevin
VM3143:1 oscar
VM3143:1 jerry
l2.forEach(function(arg1,arg2){console.log(arg1,arg2)})
VM3539:1 jason 0
VM3539:1 tony 1
VM3539:1 kevin 2
VM3539:1 oscar 3
VM3539:1 jerry 4
l2.forEach(function(arg1,arg2,arg3){console.log(arg1,arg2,arg3)})
VM3663:1 jason 0 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM3663:1 tony 1 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM3663:1 kevin 2 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM3663:1 oscar 3 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM3663:1 jerry 4 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
7.splice
splice(起始位置,删除个数,新增的值)
浙公网安备 33010602011771号