隐藏:
display:none; 不以任何方式显示,在页面中不占位,但重新显示任然占位
opacity:属性值 修改的是盒子的透明度,值为0 时完全透明,在页面中占位
阴影:
box-shadow: x轴偏移 y轴偏移 虚化 阴影宽度 red;
box-shadow: 150px 0 10px 0 red, 0 150px 10px 0 green
固定定位: 页面滚动时盒模型不会随页面滚动而滚动,它相对于页面窗口是静止的
1.固定定位的盒模型参照页面屏幕四个边缘进行位置布局,top. right. bottom . left 分别控制着距离页面上右下左四个边缘的距离;
2.top 与 bottom 两个方位布局同时存在时,只有top属性值有布局效果,同理left 与 right同时出现,只有left属性值有布局效果;即 上下取上,左右取左;
3.固定定位的盒模型可能与页面其他的盒模型发生显示区域重叠(因为页面滚动,固定定位盒子的位置相对于页面永远是静止的),固定显示定位的盒模型会在上方
绝对定位:是相对于同一参考系进行的的定位,标签间不会相互影响;
1.绝对定位的标签获取不到父级标签的宽,也撑不开父级的高,因此父级必须自己设置宽高,子级的宽高同样的要自己设置;
2.绝对定位的盒模型参考最近的父级来定位,父级必须采用定位处理才能作为子级的参考系,
3.四个方向的布局会以 上距上,下距下,左距左, 右距右 为参考依据
4.相对方向同时布局时 ,上下取上,左右取左;
注:父相子绝
相对定位:以自身原有位置为参考系的定位,偏移不影响原有位置,它偏移的是图层
注:绝对定位的盒模型可能会与页面上其他的盒模型发生显示区域重叠，一般都是布局所需，不用处理；但是同时采用绝对定位的标签们之间也可能发生重叠，此时往往需要处理谁在上在下显示，z-index属性就是解决这样的问题
z-index :的属性值为大于0的任意正整数,值大的标签会覆盖值小的标签来显示
注:z-index的属性值无需从1依次叠加,可随意设置,属性值越大显示层级越高,当发生重叠时,层级高的显示在外
js 是一种脚本编程语言,是一种弱语言
定义:运行在浏览器上的前端脚本编程语
作用:处理前端数据,渲染页面,修改样式,完成交互,前后台数据通信
三种引入:行间式,内联式,外联式
基本数据类型:数字,布尔,字符串,未定义,数组,对象,函数,
弱语言:会根据当前的实际运行环境,自行决定存储数据类型
// ES5定义变量：var是关键词、num是变量名、=为赋值符、10为变量值、;为JS语言语句的结束标识符 var num = 10; // ES6定义变量 let count = 100;
const PI = 3.14;
ES5语法，我们采用var关键词定义变量，并且没有常量的概念
ES6语法，我们采用let关键词定义变量，用const关键词定义常量
变量命名规范
/* 1. 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符） 2. 区分大小写 3. 不能出现关键字及保留字 */
// 数字类型：number var num = 10; const PI = 3.14; console.log(typeof(num), num); // 结果：number 10 // 字符串类型：string var s1 = "双引号可以表示字符串"; var s2 = '单引号可以表示字符串'; console.log(typeof(s1), s1); // 结果：string 双引号可以表示字符串 // 布尔类型：boolean var b1 = true; var b2 = false; console.log(typeof(b1), b1); // 结果：string 双引号可以表示字符串 // 未定义类型：undefined var u1; var u2 = undefined; console.log(typeof(u1), u1); // 结果：undefined undefined
// 函数类型：function function fn1() {} var fn2 = function() {}; console.log(typeof(fn1), fn1); // 结果：function ƒ fn1() {} // 对象类型：object var obj1 = {} console.log(typeof(obj1), obj1); // 结果：function {} // Array对象类型： var arr1 = [1, 2, 3, 4, 5] console.log(typeof(arr1), arr1); // 结果：object (5) [1, 2, 3, 4, 5]