52 标签的影藏,盒子阴影,三种定位,js导入和语法
Posted komorebi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了52 标签的影藏,盒子阴影,三种定位,js导入和语法相关的知识，希望对你有一定的参考价值。
标签的隐藏
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 = `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));
</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>
以上是关于52 标签的影藏,盒子阴影,三种定位,js导入和语法的主要内容，如果未能解决你的问题，请参考以下文章