前端（四）

目录

• 溢出属性
• 定位属性
• z-index属性
• rgba
• JavaScript简介
• 变量与注释
• 数据类型、

溢出属性

文本内容超出了标签的最大范围

overflow: hidden; /* 直接隐藏文本内容 */
overflow: auto\scroll;  /* 提供滚动条查看 */

溢出实战案例

div {
	overflow: hidden;
}
div img {
	width: 100%;
}
/* 真正制作圆形头像的方法 */

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

定位属性

定位可以让元素自由的摆放在网页的任意位置，一般用于盒子之间的层叠情况。

1. 定位的状态

2. 静态定位 static
   所有的标签默认都是静态定位即不能通过定位操作改变位置

3. 相对定位 relative
   相对于标签原来的位置做定位，在页面中占位置，没有脱标

4. 绝对定位 absolute
   相对于已经定位过的父标签做定位，如果没有父标签，相对于游览器可视区域进行移动，不占位置，脱标。

5. 固定定位 fixed
   相对于浏览器窗口做定位

以后大多数是子绝父相的使用。

2. 定位操作

   position
   left\right\top\bottom
   绝对定位

如果没有父标签或者父标签没有定位，则以body为准，相当于变成了相对定位
eg:小米商城购物车

​ 固定定位
​ eg:右下方回到底部
​ position: fixed;
​ right: 0;
​ bottom: 50px;

3. 定位的常见应用场景

   1. 可以解决盒子与盒子之间的层叠问题

      定位之后的元素层级最高，可以层叠在其他盒子上面

   2. 可以让盒子始终固定在屏幕中的某个位置

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

选取的原则一般是就近原则 （离哪边近用哪个）

z-index属性

前端界面其实是一个三维坐标系 z轴指向用户
动态弹出的分层界面 我们也称之为叫模态框

rgba

rgba(128,128,128,0.5)  最后一个参数可以调整颜色透明度\

JavaScript简介

1.JavaScript与Java没有半毛钱关系

之所以叫这么个名字纯粹是为了蹭当时Java的热度

2.JavaScript简称JS，也是一门前端的编程语言

前端由于非常受制于后端,所以有一些人异想天开想要通过js来编写后端代码一统江湖 由此开发了一个叫nodejs的工具(支持js跑在后端服务器上)>>>:不好用

3.JS最初由一个程序员花了七天时间开发的，里面存在很多bug

为了解决这些bug一直在编写相应的补丁，补丁本身又有bug，最后导致了js中有很多不符合逻辑的地方(成了大家墨守成规的东西)

4.JavaScript与ECMAScript

JavaScript原先由一家公司开发，希望其他公司都使用，最后被组织改名

5.版本问题

ECMA5
ECMA6

变量与注释

编写js代码的位置
1.pycharm提供的js文件
2.浏览器提供的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

数据类型、

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

查看数据类型的方式 typeof

var name = 'king';
console.log(typeof(name));  // string

1. 数据类型

   parseInt('abc') 不报错返回NaN，NaN属于特殊的数字值，属于Number
   如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。
   如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。
   如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。

   parseFloat('abc') 不报错返回NaN
   该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数 字的末端为止，然后以数字返回该数字，而不是作为字符串。

2. 字符类型

   String

   // 默认只能是单引号和双引号 
   var name1 = 'jason'
   var name2 = "jason"
   // 格式化字符串小顿号
   var name3 = `jason`
   

   1. 字符的拼接
      js中推荐使用加号

      var name1 = 'king';
      var name2 = 'baby';
      var name3 = name1 + name2;
      console.log(name3);
      

   2. 统计长度

      js中使用length python中使用len()

      console.log(name3.length);
      

   3. 移除空白(无法指定)

      js中使用trim()、trimLeft()、trimRight()

      var name4 = ' sdaad '
      console.log(name4)
      console.log(name4.trim())
      

   4. 切片操作

      js中使用substring(start,stop)不支持负数索引、slice(start,stop)支持负数索引

      var name5 = 'dalkjldsaj';
      nameSub = name5.substring(1, 5);
      console.log(nameSub);
      // 顾头不顾尾
      nameSlice = name5.slice(-5, -1);
      console.log(nameSlice)
      

   5. 大小写转换

      js中使用.toLowerCase()、.toUpperCase()

      var name6 = 'awoieaofj';
      console.log(name6.toUpperCase());
      console.log(name6.toUpperCase());
      

   6. 切割字符串

      js中是用split()

      string.split(separator,limit)

      结果是数组

      var title = 'hello world king'
      console.log(title.split(' ', 2));
      

   7. 字符串的格式化

      格式化输出就是为了将变量，和输出想要打印的字符串一并输出

      方法1:

      var name = 'jason'
      var age = 18
      console.log(`my name is ${name} my age is ${age}`)
      

      方法2:

      console.log('my name is' + name + 'my age is' + age)
      

3. 布尔类型

   Boolean

   js中布尔值是全小写的

   true false

   布尔值为false的有 0 空字符串 null undefined NaN

   null的意思是空 undefined的意思是没有定义

4. 对象(相当于python中的列表、字典、对象)

   数组(相当于python中的列表)
   Array

   var l1 = [11, 22, 33]
   

   1. 追加元素
      js中使用push() python中使用append()

      var l1 = [11, 22, 33];
      l1.push(22);
      console.log(l1);  // [11, 22, 33, 44]
      

   2. 弹出元素

      js用的pop()

      console.log(l1.pop());
      console.log(l1);
      

   3. 头部插入元素、移除元素

      js中使用unshift()、shift()

      l1.unshift(11);
      console.log(l1);
      l1.shift();
      console.log(l1);
      

   4. 扩展列表

      js中使用concat()

      var str1 = 'Hello ';
      var str2 = 'World!';
      console.log(str1.concat(str2));
      

   5. forEach

      forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

      array.forEach(function(currentValue, index, arr), thisValue)

      数组中每个元素需要调用的函数。

      参数	描述
      function(currentValue, index, arr)	必需。 数组中每个元素需要调用的函数。 函数参数:参数描述currentValue必需。当前元素index可选。当前元素的索引值。arr可选。当前元素所属的数组对象。
      thisValue	可选。传递给函数的值一般用 "this" 值。 如果这个参数为空， "undefined" 会传递给 "this" 值

      var l2 = [11, 22, 33, 44, 55];
      l2.forEach(function(name, index, arr){
      	console.log(name);
      });
      

   6. splice() 用于添加或删除数组中的元素

      array.splice(index,howmany,item1,.....,itemX)

      参数	描述
      index	必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
      howmany	可选。规定应该删除多少元素。必须是数字，但可以是 "0"。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
      item1, ..., itemX	可选。要添加到数组的新元素

      var l3 = [11, 22, 33, 44, 55, 66, 77];
      l3.splice(2, 0, 44, 55, 66);
      console.log(l3);  // [11, 22, 44, 55, 66, 33, 44, 55, 66, 77]