/*文本内容超出了标签的最大范围*/ overflow: hidden; /*直接隐藏文本内容*/ overflow: auto\scroll; /*提供滚动条查看*/ /*溢出实战案例*/ div { overflow: hidden; } div img { width: 100%; }
可以用溢出属性来实现圆形头像
# 1.定位的状态 1.静态定位 static 所有的标签默认都是静态定位即不能通过定位操作改变位置 2.相对定位 relative 相对于标签原来的位置做定位 3.绝对定位 absolute 相对于已经定位过的父标签做定位 4.固定定位 fixed 相对于浏览器窗口做定位 # 2.定位操作 { position: absolute\relative; left\right\top\bottom:px and %; } # 绝对定位 如果父级设置了position属性,例如position:relative;,那么子元素就会以父级的左上角为原始点进行定位。 如果没有父标签或者父标签没有定位 则以body为准 相当于变成了相对定位 固定定位 eg:右下方回到底部 position: fixed; right: 0; bottom: 50px; # 3.是否脱离文档流 脱离文档流: 绝对定位 固定定位 不脱离文档流: 相对定位
设置对象的层叠顺序。
"""前端界面其实是一个三维坐标系 z轴指向用户""" 动态弹出的分层界面 我们也称之为叫模态框 # 补充知识 rgba(128,128,128,0.5) 最后一个参数可以调整颜色透明度 RGBA 即红色、绿色、蓝色、透明度(英语:Red, Green, Blue、Alpha)。
# 1.JavaScript与Java没有半毛钱关系 之所以叫这么个名字纯粹是为了蹭当时Java的热度 # 2.JavaScript简称JS 也是一门前端的编程语言 前端由于非常受制于后端,所以有一些人异想天开想要通过js来编写后端代码一统江湖 由此开发了一个叫nodejs的工具(支持js跑在后端服务器上)>>>:不好用 # 3.JS最初由一个程序员花了七天时间开发的 里面存在很多bug 为了解决这些bug一直在编写相应的补丁 补丁本身又有bug 最后导致了js中有很多不符合逻辑的地方(成了大家墨守成规的东西) # 4.JavaScript与ECMAScript JavaScript原先由一家公司开发 希望其他公司都使用 最后被组织改名 # 5.版本问题 ECMA5 ECMA6
变量声明
var(let) 变量名;
的格式来进行声明1.注释语法 // 单行注释 /*多行注释*/ 2.结束符号 分号结束 console.log('hello world'); 3.变量声明 在js中定义变量需要使用关键字声明 3.1.var var name = 'jason' 3.2.let let name = 'jason' '''var声明都是全局变量 let可以声明局部变量''' 4.常量声明 const pi = 3.14 /* 注意: 变量名是区分大小写的。 推荐使用驼峰式命名规则。 保留字不能用做变量名。 */
JavaScript拥有动态类型
var x; // 此时x是undefined var x = 1; // 此时x是数字 var x = "Alex" // 此时x是字符串
// JavaScript不区分整型和浮点型,就只有一种数字类型。 var a = 12.34; var b = 20; var c = 123e5; // 12300000 var d = 123e-5; // 0.00123 NaN:属于数值类型 意思是'不是一个数字'(not a number) parseInt('abc') 不报错返回NaN parseFloat('abc') 不报错返回NaN
// 默认只能是单引号和双引号 var name1 = 'rain' var name2 = "rain" // 格式化字符串小顿号 var name3 = `rain` var name = 'rain' var age = 18 console.log(` my name is ${name} my age is ${age} `) my name is rain my age is 18 // 字符的拼接 var name4 = 'rain' + 'NB' // 推荐使用加号
方法 | 说明 |
---|---|
.length | 返回长度 |
.trim() | 移除空白 |
.trimLeft() | 移除左边的空白 |
.trimRight() | 移除右边的空白 |
.charAt(n) | 返回第n个字符 |
.concat(value, ...) | 拼接(推荐使用+号) |
.indexOf(substring, start) | 子序列位置 |
.substring(from, to) | 根据索引获取子序列(不支持负数索引) |
.slice(start, end) | 切片(支持负数索引) |
.toLowerCase() | 小写 |
.toUpperCase() | 大写 |
.split(delimiter, limit) | 分割(delimiter指定分割开始的位置,limit=返回的个数) |
// js中布尔值是全小写 var bool1 = true var bool1 = false // 布尔值为false的 0 空字符串 null undefined NaN /* null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null; undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。 */
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript 允许自定义对象。
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
数组对象的作用是:使用单独的变量名来存储一系列的值。类似于Python中的列表。
var l1 = [11, 22, 33]
方法 | 说明 |
---|---|
.push() | 追加元素 |
.pop() | 弹出元素 |
.unshift() | 头部插入元素 |
.shift() | 头部移除元素 |
.concat() | 扩展列表 |
.forEach() | 将数组的每个元素传递给回调函数 |
.splice() | 删除元素,并向数组添加新元素。(起始位置,删除个数,新增的值) |