溢出属性
/*文本内容超出了标签的最大范围*/
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-index属性
设置对象的层叠顺序。
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
- 从父现象：父亲怂了，儿子再牛逼也没用
"""前端界面其实是一个三维坐标系 z轴指向用户"""
动态弹出的分层界面 我们也称之为叫模态框
# 补充知识
rgba(128,128,128,0.5) 最后一个参数可以调整颜色透明度
RGBA 即红色、绿色、蓝色、透明度（英语：Red, Green, Blue、Alpha）。
JavaScript简介
# 1.JavaScript与Java没有半毛钱关系
之所以叫这么个名字纯粹是为了蹭当时Java的热度
# 2.JavaScript简称JS 也是一门前端的编程语言
前端由于非常受制于后端,所以有一些人异想天开想要通过js来编写后端代码一统江湖 由此开发了一个叫nodejs的工具(支持js跑在后端服务器上)>>>:不好用
# 3.JS最初由一个程序员花了七天时间开发的 里面存在很多bug
为了解决这些bug一直在编写相应的补丁 补丁本身又有bug 最后导致了js中有很多不符合逻辑的地方(成了大家墨守成规的东西)
# 4.JavaScript与ECMAScript
JavaScript原先由一家公司开发 希望其他公司都使用 最后被组织改名
# 5.版本问题
ECMA5
ECMA6
变量与注释
变量声明
- JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
- 声明变量使用
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是字符串
数值类型(Number)
// 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
字符串(String)
// 默认只能是单引号和双引号
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=返回的个数) |
布尔值(Boolean)
// js中布尔值是全小写
var bool1 = true
var bool1 = false
// 布尔值为false的
0 空字符串 null undefined NaN
/*
null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
*/
对象(Object)
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
数组(Array)
数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。
var l1 = [11, 22, 33]
常用方法
| 方法 | 说明 |
|---|---|
| .push() | 追加元素 |
| .pop() | 弹出元素 |
| .unshift() | 头部插入元素 |
| .shift() | 头部移除元素 |
| .concat() | 扩展列表 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除元素，并向数组添加新元素。(起始位置,删除个数,新增的值) |
