4 前端 溢出 定位 模态框 透明度 JavaScript简介

前端

1 溢出属性overflow

标签内部的内容超出了标签自身的范围会造成内容的溢出。
overflow属性规定当内部内容溢出元素框时发生的事情。

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

案例：制作圆形头像

2 定位

position属性

position: static 静态（默认值）按照标准文档流定位，无法改变位置；
position: relative 相对定位 相对于标签原来的位置做移动；
position: absolute 绝对定位 相对于已经定位过的父标签做移动，如果没有父标签那么就以body为参照；
position: fixed 固定定位 相对于浏览器窗口做移动。

如果标签的position属性设置为非静态的，可以使用属性 left / right / top / bottom 修改位置。
即使没有移动，仅将标签的position属性设置为非静态，例如relative，该标签的性质也已经改变了，从没有定位过的标签变为了已经定位过的标签。

3 浮动和定位是否脱离文档流

可以通过标签原来的位置是否还保留来判断。

1. 不脱离文档流
   相对定位
2. 脱离文档流
   浮动
   绝对定位
   固定定位

4 z-index和模态框

模态框（Modal）是覆盖在父窗体上的子窗体，用于在不离开父窗体的情况下显示一些内容，进行一些互动操作等。

z-index属性用于设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

案例：三层结构登陆页面

1. 最底部是正常父窗体的内容 z=0 底层
2. 灰色的半透明区域 z=99 中间层
3. 白色的注册区域 z=100 模态框

5 透明度 opacity

opacity属性设置元素的不透明级别。

rgba只能修改颜色的透明度；
opacity可以修改颜色和字体的透明度。

6 JavaScript

6.1 介绍

1. JavaScript也是一门编程语言，是一种轻量级的脚本语言。
   nodejs支持js代码在后端服务器上运行。
2. JavaScript与java没有任何关系。
3. ECMAScript与JavaScript的关系。
   ECMAScript是JavaScript的规格，JavaScript是ECMAScript的一种实现。

6.2 注释

6.3 两种引入方式

1. script标签内部直接书写js代码；
2. script标签的src属性引入外部js代码。

6.4 语法结构

js是以分 作为语句的结束，通常可以省略分 ，但建议使用分 。

6.5 变量 var let

使用关键字 var 和 let 声明变量。

var 和 let 的区别：
var：存在变量提升现象，即无论声明在何处，都会被提至其所在作用域的顶部；
let：无变量提升现象，即未到let声明时，是无法访问该变量的。

1. 使用未声明的变量，表现不同

2. 重复声明同一个变量时，表现不同

3. 变量作用范围不同

6.6 常量 const

7 练习