前端学习(四)

前端学习(四)

溢出属性

在CSS中，如果设置了一个盒子的宽度与高度，则盒子中的内容就可能超过盒子本身的宽度或高度

那么他的内容就叫做溢出属性

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

解决方式：
设计好标签块儿的溢出隐藏，然后将内容默认宽度改为百分百
	div {
            overflow: hidden;
        }
	div img {
            width: 100%;
        }

定位属性

定位的状态

1.静态定位			static
		默认值，没有定位
    
2.相对定位		relative
   	1.参照物 参照物是自己原来的位置
	 	2.文档流 没有脱离文档流
   	3.层级属性 z-index 值越大，元素在最上层，值越小，最下层
    
3.绝对定位		absolute
		1.参照物 参照物是整个浏览器
		2.文档流 脱离文档流，飘了
		3.层级属性 z-index 值越大，元素在最上层，值越小，最下层
    
4.固定定位		fixed		
    1.参照物 参照物是浏览器
    2.文档流 没有文档流
    3.层级属性 z-index 值越大，元素在最上层，值越小，最下层

定位操作

position  # 关键词
left\right\top\bottom  # 方向参数

z-index属性

上面不同的定位属性都有一个相同的z-index层级属性

前端界面其实是一个三维坐标系，z轴指向用户；动态的定位属性弹出的分层界面，我们也称之为模拟态

    <style>
        .modal {  /* 底层页面 */
            position: fixed;  /* 固定定位 */
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(128,128,128,0.5);
            z-index: 10;  /* 10层级 */
        }
        .cover {  /* 高层页面 */
            height: 200px;
            width: 400px;
            background-color: white;
            z-index: 11;  /* 11层级 */
            position: fixed;  /* 固定定位 */
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -100px;
        }
    </style>

JavaScript简介

JavaScript诞生于1995年，起初命名为LiveScript，为了蹭热度，才将LiveScript更名为JavaScript；本身和java没有什么关系。

JavaScript是一门前端的编程语言，属于解释型语言

由于开发时间比较短，而且借鉴了很多语法功能，本身使用存在很多bug，为了解决这些bug，程序员们一直编写补丁，补丁本身也不是十分完全；导致最终的js中有很多不符合逻辑的地方，使用起来会有些别扭，需要适应过来。

变量与注释

编写位置：

​ 1.pycharm中的js文件

​ 2.浏览器中的js环境

• 注释语法

  * // 单行注释
  
    /*多行注释*/
  

• 结束符号

  分号结束   console.log('hello world');
  

• 变量声明

  在js中定义变量需要使用关键字声明

  1. var

     全局变量

     var 变量名 = '变量值'

  2. let

     局部变量

     let 变量名 = '变量名'

  3. const

     常量声明

     const 常量名 = 常量值

数据类型

查看数据类型的方式：typeof

1. 数值类型 = 整形int 和 浮点型float

Numbe

NaN：属于数值类型，但是实际意思是'该数据不是一个数值'(not a number)

parseInt('非数字数据')  不报错返回NaN

2. 字符类型 = 字符串str

string

默认只能是单引号和双引号

var 变量名 = '变量值'

var 变量名 = "变量值"

格式化输出字符串小顿号 = f{}、%占位符

var 变量名 = `变量值`

3. 字符的拼接 = join 或者 +

   js中推荐使用加号

4. 统计长度 = len

   js中使用length

5. 移除空白 = strip()、lstrip()、rstrip()

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

6. 切片操作 = [index1:index2]

   js中使用substring(start,stop)、slice(start,stop)

   js中不支持负数索引

7. 大小写转换 = lower()、upper()

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

8. 切割字符串

   js中和python都是用split()

   js中是按数字去切割数量的字符串

布尔类型

相当于bool值，js中是Boolean

js中布尔值是全小写

true false

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

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

对象

相当于python中的列表、字典、对象

数组 = 列表 Array

var 变量名1 = [1, 2, 3 ]

1.追加元素 = append()

js中使用push

2.弹出元素 = pop

js和python都用的pop

3.头部插入元素 = insert

js中使用unshift

4.头部移除元素 = pop(0) remove()

js中使用shift  

5.扩展列表 = extend

js中使用concat 

6.forEach = for循环

​ 用于循环数组中的每一项，只能循环数组

数组.forEach(function(arg1,arg2,arg3)
第一个参数是实际的值
第二个参数是检索值
第三个参数是整个数据的元素个数

7.splice

​ splice(起始位置,删除个数,新增的值)

今日小结

感谢我鸡哥!