1. 定位
1.1 隐藏
在一些网站中，某些内容在鼠标点击上去时候才会显示出来，在鼠标一走以后就会消失。
这些内容就隐藏起来了。此时我们可以通过display或者opacity来对内容就行隐藏。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; /*background-color: orange;*/ border-radius: 50%; border: 1px solid black; /* normal正常字体，Arial代表备用字体， 30px字体大小，100px行高*/ font: normal 30px/100px 'Arial'; color: green; text-align: center; } .d1:hover~.d2 { display: block; } .d2 { /*不以任何方式显示，在页面中不占位，但重新显示，仍然占位*/ display: none; } .d3 { /*修改盒子的透明度，值为0，完全透明，但在页面中占位*/ opacity: 0; } </style> </head> <body> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> <div class="d4">4</div> <div class="d5">5</div> </body> </html
1.2 阴影
在网站中存在一种图片状态，当鼠标点上去的时候，图片会浮动起来，给人一种立体的感觉，这个时候就用到了阴影。本质上就是图片
向上浮动的一点距离，然后下放用阴影覆盖，这样就能给人一种浮动起来的立体的假象了。
阴影采用的是box-shadow,有五个参数，分别代表着：x轴 y轴 虚化程度 阴影宽度 颜色。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .dd { width: 100px; height: 100px; background-color: red; border: 1px solid black; margin: 100px auto; /* 参数介绍: x轴 y轴 虚化程度 阴影宽度 颜色*/ box-shadow: 200px 0 10px 10px blue, 0 200px 10px 0 green; } </style> </head> <body> <div class="dd"></div> </body> </html>
1.3 固定定位
1.3.1 display和opacity存在的问题：
display:不以任何方式显示，在页面中不占位，但重新显示，仍然占位
opacity:通过opacity可以修改样式的透明度，但是即使透明度为0的时候，依然占据着位置，即不管怎样，opacity都是占着一个位置的。
1.3.2 目标：显示和隐藏都不占位，用来做一些标签的显示影藏切换
1.3.3 固定定位
定位：就是把子级内容给抠出来。
我们通过浮动布局，将子级在父级中飘起来，就不会再撑开腹肌高度，但浮动受父级宽度影响，即父级的宽度决定了一行能拍多少个，
然后我们可以通过清浮动让父级能够获得一个刚好的宽度。通过定位把子级内容抠出来以后，父级就无法获得子级的高度，这个时候
父级子级都需要自己定义自己的宽高。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* vw:当前视图的宽度， wh:当前视图的高度*/ .box { height: 500vw; background-color: red; } .tag { width: 180px; height: 300px; background-color: orange; /*一旦打开定位属性，left、right、top、bottom四个方位词均能参与布局*/ /*固定定位参考浏览器窗口*/ /*布局依据：固定定位的盒子四边距浏览器窗口四边的距离：eg：left - 左距左，right - 右距右*/ /*左右取左，上下去上*/ position: fixed; left: 0; top: calc(50% - 150px); right: 50vw; bottom: 20vw; z-index: 2; } /*z-index值就是大于等于1的正整数，多个重叠图层通过z-index值决定上下图层显示先后*/ .flag { width: 220px; height: 330px; background-color: purple; position: fixed; left: 0; top: calc(50% - 165px); z-index: 1; } </style> </head> <body> <div class="box"></div> <div class="tag"></div> <div class="flag"></div> </body> </html>
1.3.4 绝对定位
在没有定位之前，如果父级没有高度，子级没有长度，那么父级高找由子级撑开，子级宽继承父级
绝对定位：子标签获取不到父级标签的宽，也撑不开父级的高，子标签西部子级设置宽高，父级也必须自己设置宽高
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 300px; height: 300px; background-color: red; margin: 100px auto 0; } .s { width: 100px; height: 100px; font: normal 20px/100px 'Arial'; text-align: center; } .s1 { background-color: blue; } .s2 { background-color: green; } .s3 { background-color: yellow; } /* 在没有定位之前，如果父级没有高度，子级没有长度，那么父级高找由子级撑开，子级宽继承父级*/ .s { /*绝对定位：子标签获取不到父级标签的宽，也撑不开父级的高*/ /*子标签必须自己设置宽高，父级也必须自己设置宽高*/ position: absolute; /*绝对定位的标签都是相对于一个参考系进行定位，之间不会相互影响*/ /*参考系：最近的定位父级*/ /*打开了四个定位方位*/ /*上距上...下距下*/ /*上下去上、左右取左*/ } .box { /*子级采用绝对定位，一般都是想参考父级进行定位，父级必须采用定位处理才能作为子级的参考系*/ /*父级可以选取 fixed、 absolute，但这两种定位都会影响盒模型，relative定位不会影响盒模型*/ /*父相子绝*/ position: relative; } .s1 { right: 0; left: 0; bottom: 0; z-index: 1; } .s2 { bottom: 50px; left: 0; z-index: 10; } </style> </head> <body> <div class="box"> <div class="s s1"></div> <div class="s s2"></div> <div class="s s3"></div> </div> </body> </html>
1、一个标签要随着父级移动而移动(子级布局完毕后相对于父级位置是静止的)，且兄弟标签之间布局不影响(兄弟动，自身相对父级还是保持静止)
2、z-index 值能改变重叠的兄弟图层上下关系
3、子级相对的父级一定要 定位处理 （三种定位均可以）
父级要先于子级布局，所以子级在采用绝对定位时，父级一般已经完成了布局，如果父级采用了 定位 来完成的布局，子级自然就相当于父级完成 绝对定位
如果父级没有采用 定位 来完成的布局，我们要后期为父级增加 定位 处理，来辅助子级 绝对定位，父级的 定位 是后期增加的，我们要保证增加后不影响父级之前的布局，相对定位可以完成
1.3.5 相对定位
父级可以选取 fixed、 absolute，但这两种定位都会影响盒模型，relative定位不会影响盒模型
相对定位的参考系是图层的原有位置
相对定位与margin的区别：
margin下方若有内容时，则上下移动的时候会对下方的内容产生影响，下方的内容也会跟着改变位置
相对定位，相对于图层原有的位置进行移动，即使下方存在内容，也不会让下方内容也随之改变。
父相子绝
2. JavaScript
2.1 JavaScript介绍
js:前台脚本语言 - 编程语言 - 弱语言类型 - 完成页面业务逻辑及页面交互 1、可以自己生成页面数据 2、可以请求后台数据 3、可以接受用户数据 - 可以渲染给页面的其他位置；提交给后台 4、修改页面标签的 内容、样式、属性、事件(页面通过js可以完成与电脑的输入输出设备的交互)
2.2 三种输出方式
// 一、三种输出信息的方式 // 控制台输出语句 console.log('你丫真帅') // 弹出框提示信息 alert('你丫确实帅') // 将内容书写到页面 document.write('<h2 style="color: red">你丫帅掉渣</h2>')
2.3 变量与常量
// 二、变量与常量 let num = 123; num++; console.log(num); const str = '123'; // str = '456'; // 常量声明时必须赋初值，且一旦赋值，不可改变 console.log(str);
2.4 数据类型
// 三、数据类型 // 值类型 // 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 = `123 456 789`; 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));
2.5 弱语言类型
// 四、弱语言类型 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