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导入和语法的主要内容,如果未能解决你的问题,请参考以下文章

div盒子存在阴影导致父级标签出现滚动条

网页布局的三种方式-标准流浮动和定位

php 设置按钮被点击后自动隐藏

盒子阴影悬停过渡闪烁

CSS学习17-浮动

删除阴影 SwiftUI 旁边的空格