今日内容详细
《溢出属性》
溢出属性
文本内容超出了标签的最大范围 overflow: hidden;显然直接隐藏有点不对劲· overflow: auto\scroll; 提供滚动条查看
hidden 隐藏 隐蔽性 overflow 溢出 溢流 overflow: hidden 相对位置和溢出隐藏 scroll 滚动 滚屏 overflow:scroll
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>day4.27</title> <style type="text/css"> p{ height: 100px; width: 100px; border:5px solid seagreen; overflow: hidden; overflow: auto; overflow: scroll; } body{background-color: dimgray;} div{ height: 300px; width: 300px; border-radius: 50%; border: 5px solid red; overflow: hidden; float: right; } div img{width: 100%;} #ctx{height: 200px; width: 200px; border-radius: 50%; border: 3px solid green; overflow: hidden; float: left;} #ctx img{width: 100%;} </style> </head> <body> <p>懵逼树上懵逼果懵逼树下你和我</p> <div> <img src="img/ctx1.png" > </div> <div id="ctx"> <img src="img/ctx.jpg" > </div> </body> </html>
今日内容详细
《定位属性》
定位属性
static 静态的 静态 静止的 relative 相对的 相关的 absolute 绝对的 纯粹的 绝对定位、 fixed 固定 定点 固定定位 position 位置 职位 定位 部位
static:代表默认值,没有定位,也可以用来取消之前设置的定位值。 relative:相对定位,它的参照物是自己本身,可以通过left、top、right、bottom设置偏移值。它并没有脱离文档流,所以原来所占的位置依然会保留。相对定位并不会影响其他元素的布局。 absolute:绝对定位,它的参照物是包含块,也就是离自己最近的有定位属性的祖先级元素。如果祖先元素都没有定位属性,则默认按照浏览器的窗口(body)来定位。我们可以通过给祖先元素设置position:relative/absolute/fixed来让祖先元素变成包含块,通常情况下,我们会用position:relative来设置祖先元素为包含块,因为它不会脱离文档流,不会对布局造成影响。通过left、top、right、bottom来给绝对定位的元素设置偏移值。绝对定位是脱离文档流的,它原来所占位置不会保留。 fixed;固定定位,fixed参照物是浏览器的整个窗口。也会使元素脱离文档流。也是通过设置left、top、right、bottom来确定位置。 sticky:黏性定位。设置该属性后,只有当滑动到这个位置时,才会生效。生效后效果相当于固定定位fixed。也是通过设置left、top、right、bottom来确定位置。 # 1.定位的状态 1.静态定位 static 所有的标签默认都是静态定位即不能通过定位操作改变位置 2.相对定位 relative 相对于标签原来的位置做定位 3.绝对定位 absolute 相对于已经定位过的父标签做定位 4.固定定位 fixed 相对于浏览器窗口做定位 # 2.定位操作 position left\right\top\bottom 绝对定位 如果没有父标签或者父标签没有定位 则以body为准 相当于变成了相对定位 eg:小米商城购物车 固定定位 eg:右下方回到底部 position: fixed; right: 0; bottom: 50px;
今日内容详细
《z-index属性》
z-index属性
Z-index 层级 空间位置
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 """前端界面其实是一个三维坐标系 z轴指向用户""" 动态弹出的分层界面 我们也称之为叫模态框 记得加定位属性 <!-- Z-index层叠性原则: 1.同层级元素(或position:static)默认情况下文档流后面的元素会覆盖前面的。(后来居上) 2. 对于同级元素,position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素, 即z-index越大优先级越高。 -->
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>z-index Demo</title> <style type="text/css"> div{ width: 200px;height: 200px; text-align: center; font-size: 50px; line-height: 200px; position: absolute; } #red{left: 100px;top: 100px;} #green{left: 200px;top: 200px;} </style> </head> <body> <!-- Z-index层叠性原则: 1.同层级元素(或position:static)默认情况下文档流后面的元素会覆盖前面的。(后来居上) 2. 对于同级元素,position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素, 即z-index越大优先级越高。 --> <div id="red" style="background: red;z-index: 0;">A</div> <div id="green" style="background-color: green;">B</div> <div id="blue" style="background-color: blue;z-index: -1;">C</div> </body> </html>
今日内容详细
《JavaScript》
JavaScript简介
JavaScript诞生于1995年,它的出现主要是用于处理网页中的前端验证。所谓的前端验证,就是指检查用户输入的内容是否符合一定的规则。比如:用户名的长度,密码的长度,邮箱的格式等。但是,有的同学可能会有疑问,这些验证,后端不也可以进行验证吗?确实,后端程序的确可以进行这些验证,但你要清楚,在1995年那个年代,网速是非常慢的,向后端发送一个请求,浏览器很久才能得到响应,那这无疑是一种非常不好的用户体验。
JavaScript的使用 标签引用 在HTML中在script标签中就可以编写JavaScript代码,以下是一个简单演示。 <script> alert('你们怎么突然这么安静 怎么了!!!') console.log(123) <!--窗口弹出--> alert("Hello,World!"); console.log(123) </script>
变量与注释
""" 编写js代码的位置 1.pycharm提供的js文件 2.浏览器提供的js环境(学习阶段推荐) """ # 1.注释语法 单行注释:// 注释内容 多行注释:/* 注释内容 */ # 2.结束符号 分号结束 (;) console.log('hello world'); 变量声明 变量的作用是给某一个值或对象标注名称。比如我们的程序中有一个值123,这个值我们是需要反复使用的,这个时候 我们最好将123这个值赋值给一个变量,然后通过变量去使用123这个值。 变量的声明: 使用var关键字声明一个变量。 # 3.变量声明 在js中定义变量需要使用关键字声明 1.var var name = 'jason' 2.let let name = 'jason' '''var声明都是全局变量 let可以声明局部变量''' 4.常量声明 const pi = 3.14
数据类型
数据类型决定了一个数据的特征,比如:123和”123”,直观上看这两个数据都是123,但实际上前者是一个数字,而后者是一个字符串。对于不同的数据类型我们在进行操作时会有很大的不同。 """ JavaScript查看数据类型的方式用typeof 使用typeof操作符可以用来检查一个变量的数据类型。 """ JavaScript中一共有5种基本数据类型: 字符串型(String) 数值型(Number) 布尔型(Boolean) undefined型(Undefined) null型(Null)
Number数值类型
Number 类型用来表示整数和浮点数,最常用的功能就是用来表示10进制的整数和浮点数。 Number表示的数字大小是有限的,如果超过了这个范围,则会返回 ±Infinity。 NaN:属于数值类型 意思是'不是一个数字'(not a number) parseInt('abc') 不报错返回NaN parseFloat('abc')不报错返回NaN Infinity:正无穷 -Infinity:负无穷 NaN:非法数字(Not A Number) 注意:使用typeof检查一个Number类型的数据时(包括NaN 和 Infinity),会返回"number"。
String字符串类型
默认只能是单引号和双引号 var name1 = 'jason' var name2 = "jason" 格式化字符串小顿号(`) var name3 = `jason` 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
3.布尔类型(相当于python中的布尔值bool)
Boolean js中布尔值是全小写 布尔型也被称为逻辑值类型或者真假值类型。 布尔型只能够取真(true)和假(false)两种数值。除此以外, 其它的值都不被支持
Null Null 类型是第二个只有一个值的数据类型,这个特殊的值是 null。 undefined值实际上是由null值衍生出来的,所以如果比较undefined和null是否相等,会返回true。 注意:从语义上看null表示的是一个空的对象,所以使用typeof检查null会返回一个Object。 null的意思是空 undefined的意思是没有定义 Undefined Undefined 类型只有一个值,即特殊的 undefined。 在使用 var 声明变量但未对其加以初始化时,这个变量的值就是 undefined。 注意:使用typeof对没有初始化和没有声明的变量,会返回“undefined”。
对象(相当于python中的列表、字典、对象)
Object类型,我们也称为一个对象,是JavaScript中的引用数据类型。它是一种复合值,它将很多值聚合到一起,可以通过名字访问这些值。对象也可以看做是属性的无序集合,每个属性都是一个名/值对。对象除了可以创建自有属性,还可以通过从一个名为原型的对象那里继承属性。除了字符串、数字、true、false、null和undefined之外,JavaScript中的值都是对象。 #创建对象有两种方式: #1.第一种方式: var person = new Object(); person.name = "孙悟空"; person.age = 18; console.log(person); #2.第二种方式: var person = { name: "孙悟空", age: 18 }; console.log(person);
数组
数组也是对象的一种,数组是一种用于表达有顺序关系的值的集合的语言结构,也就是同类数据元素的有序集合。 数组的存储性能比普通对象要好,在开发中我们经常使用数组来存储一些数据。但是在JavaScript中是支持数组可以是不同的元素,这跟JavaScript的弱类型有关,此处不用纠结,我们大多数时候都是相同类型元素的集合。数组内的各个值被称作元素,每一个元素都可以通过索引(下标)来快速读取,索引是从零开始的整数。 数组(相当于python中的列表)Array var l1 = [11, 22, 33] 使用typeof检查一个数组对象时,会返回object。 1.追加元素 push()方法演示:该方法可以向数组的末尾添加一个或多个元素,并返回数组的新的长度 js中使用push() python中使用append() 2.弹出元素 js和python都用的pop() pop()方法演示:该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回不能指定弹出 3.头部插入元素 unshift()方法演示:该方法向数组开头添加一个或多个元素,并返回新的数组长度 js中使用unshift() python中使用insert() 4.头部移除元素 js中使用shift() python中可以使用pop(0) remove() shift()方法演示:该方法可以删除数组的第一个元素,并将被删除的元素作为返回值返回 js中使用shift() python中可以使用pop(0) remove() 5.扩展列表 js中使用concat() python中使用extend() concat()方法演示:该方法可以连接两个或多个数组,并将新的数组返回,该方法不会对原数组产生影响 强烈建议使用赋值操作符(+, +=)代替 concat 方法 代码: const arr = [1, 2, 3].concat([4, 5]) console.log(arr) // [1,2,3,4,5] 6.forEach forEach()方法演示:该方法可以用来遍历数组 forEach()方法需要一个函数作为参数,像这种函数,由我们创建但是不由我们调用的,我们称为回调函数。数组中有几个元素函数就会执行几次,每次执行时,浏览器会将遍历到的元素,以实参的形式传递进来,我们可以来定义形参,来读取这些内容,浏览器会在回调函数中传递三个参数: value:当前的值 index:当前的索引 array:整个数组 splice()方法演示:该方法可以用于删除数组中的指定元素,该方法会影响到原数组,会将指定元素从原数组中删除,并将被删除的元素作为返回值返回 参数: 第一个参数:表示开始位置的索引 第二个参数:表示要删除的元素数量 第三个参数及以后参数:可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边 var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"]; var result = arr.splice(3, 2); console.log(arr); console.log(result); result = arr.splice(1, 0, "牛魔王", "铁扇公主", "红孩儿"); console.log(arr); console.log(result);