标签的隐藏
display: none;
不以任何方式显示，在页面中不占位，但重新显示，仍然占位
opacity:0.5; 修改盒子的透明度，值为0，完全透明，但在页面中占位 盒子的阴影
box-shadow: 150px 0 10px 0 red, 0 150px 10px 0 green;
x轴偏移 y轴偏移 虚化程度 阴影宽度 颜色
盒子的三种定位固定定位
当前页面窗口的宽高(锁屏幕尺寸变化而变化)：vw vh
一旦打开定位属性，left、right、top、bottom四个方位词均能参与布局
固定定位参考浏览器窗口布局依据：固定定位的盒子四边距浏览器窗口四边的距离：eg：left - 左距左，right - 右距左右取左，上下去上
z-index值就是大于等于1的正整数，多个重叠图层通过z-index值决定上下图层显示先后z-index: 666;
总结：
1. z-index属性值不需要从1依次叠加，随意设置
2. z-index属性值越大显示层级越高，显示层级不同的发生显示区域重叠时，显示层级高的显示区域覆盖显示层级低的显示区域
总结：
1. 固定定位的盒模型参照页面屏幕四个边缘进行位置布局，top、right、bottom、left分别控制着距离页面屏幕上右下左四个边缘的距离
2. top与bottom两个方位布局同时存在时，只有top属性值有布局效果，同理left与right同时出现，只有left属性值有布局效果
3. 固定定位的盒模型可能会与页面上其他的盒模型发生显示区域重叠（因为页面滚动，固定定位盒子的位置相对于页面永远是静止的），固定定位的盒模型会在上方显示
绝对定位 子标签获取不到父级标签的宽，也撑不开父级的高
子标签必须自己设置宽高，父级也必须自己设置宽高position: absolute;绝对定位的标签都是相对于一个参考系进行定位，直接不会相互影响 参考系：最近的定位父级打开了四个定位方位上距上...下距下上下去上、左右取左
子级采用绝对定位，一般都是想参考父级进行定位，父级必须采用定位处理才能作为子级的参考系父级可以选取 fixed、 absolute，但这两种定位都会影响盒模型，relative定位不会影响盒模型父相子绝position: relative;
绝对定位：
1、一个标签要随着父级移动而移动(子级布局完毕后相对于父级位置是静止的)，且兄弟标签之间布局不影响(兄弟动，自身相对父级还是保持静止)
2、z-index 值能改变重叠的兄弟图层上下关系
3、子级相对的父级一定要 定位处理 （三种定位均可以）
父级要先于子级布局，所以子级在采用绝对定位时，父级一般已经完成了布局，如果父级采用了 定位 来完成的布局，子级自然就相当于父级完成 绝对定位
如果父级没有采用 定位 来完成的布局，我们要后期为父级增加 定位 处理，来辅助子级 绝对定位，父级的 定位 是后期增加的，我们要保证增加后不影响父级之前的布局，相对定位可以完成
相对定位
.box { /*相对定位偏移的是图层*/ position: relative; /*left: 100px;*/ /*right: 100px;*/ /*top: 100px;*/ /*bottom: 100px;*/ /*参考系：自身原有位置，且自身偏移不影响原有位置*/}1.辅助绝对定位解决需求2、相对定位也存在独立使用，但是可以用盒模型完全取代，所以一般不用
总结：
1. 父标签采用相对定位(relative)来辅助于子标签绝对定位(absolute)布局，这样每一个子标签都独立参考父标签的四个边缘进行位置布局，top、right、bottom、left分别控制着距离父标签的上右下左四个边缘的距离
2. top与bottom两个方位布局同时存在时，只有top属性值有布局效果，同理left与right同时出现，只有left属性值有布局效果
3. 绝对定位的盒模型可能会与页面上其他的盒模型发生显示区域重叠，一般都是布局所需，不用处理；但是同时采用绝对定位的标签们之间也可能发生重叠，此时往往需要处理谁在上在下显示，z-index属性就是解决这样的问题
*/
js 前台脚本语言 - 编程语言 - 弱语言类型 - 完成页面业务逻辑及页面交互
1、可以自己生成页面数据
2、可以请求后台数据
3、可以接受用户数据 - 可以渲染给页面的其他位置；提交给后台
4、修改页面标签的 内容、样式、属性、事件(页面通过js可以完成与电脑的输入输出设备的交互)
<body> <!-- 点击弹出：hello js --> <!--行间式: 写在标签的 事件属性 中--> <!--<div id="dd" onclick="alert(‘hello js‘)"></div>-->
onclick：鼠标点击
ondblclick：鼠标双击
onmousedown：鼠标按下
<div id="dd"></div>导入方式</body><!--内联式：写在script标签中，script标签应该出现在body的最下方(可以将其放在body结束后)--><!--<script>--> <!--dd.onclick = function () {--> <!--alert(‘hello js‘)--> <!--}--><!--</script>-->
<!--外联式：通过script标签的src属性，链接外部js文件--><script src="js/js导入.js"> // 一个script标签拥有src引入外部js文件后，就相当于单标签，所以内部的代码会被自动屏蔽 dd.onclick = function () { // 不会起作用 alert(666) }</script>js语法
<script> let aaa = 123; let bbb = ‘123‘;
console.log(aaa == bbb); // == 只做数据比较 console.log(aaa === bbb); // === 做数据与类型比较
// 弱语言类型：会自己根据环境决定如何选择类型存储数据 console.log(1 + 2); // 3 console.log(‘1‘ + ‘2‘); // 12 console.log(1 + ‘2‘); // 12 console.log(1 - ‘2‘); // -1
</script>
<script> // 三、数据类型 // 值类型 // 1) 数字类型 let a = 123; console.log(a, typeof(a)); a = 3.14; console.log(a, typeof(a));
// 2) 布尔类型 let b = false; console.log(typeof(b), b);
// 3) 字符串类型：‘‘ "" `` let c = `123456789`; console.log(c, typeof(c));
// 4) 未定义类型：未初始化的变量 let d; console.log(d, typeof(d));
// 引用类型 // 5) 数组（相当于list）： let arr = [1, 2, 3]; console.log(arr, typeof(arr));
// 6) 对象（相当于dict）：所有的key必须是字符串 let sex = ‘男‘; let dic = { name: ‘Owen‘, age: 17.5, sex, // value如果是变量，变量名与key同名，可以简写 }; console.log(dic, typeof(dic));
// 7) 函数类型 function fn() { } console.log(fn, typeof(fn));
// 8) null类型 let x = null; console.log(x, typeof(x));</script>
<script> // 二、变量与常量 let num = 123; num++; console.log(num);
const str = ‘123‘; // str = ‘456‘; // 常量声明时必须赋初值，且一旦赋值，不可改变 console.log(str);</script>
<script> // 一、三种输出信息的方式 // 控制台输出语句 console.log(‘你丫真帅‘)
// 弹出框提示信息 alert(‘你丫确实帅‘)
// 将内容书写到页面 document.write(‘<h2 style="color: red">你丫帅掉渣</h2>‘)</script>
原文地址：https://www.cnblogs.com/komorebi/p/11129760.html