53 标签的影藏,盒子阴影,三种定位,js导入和语法

缺乏、安全感 2021-12-08 16:29 79阅读 0赞

标签的隐藏

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可以完成与电脑的输入输出设备的交互)

onclick：鼠标点击  
ondblclick：鼠标双击  
onmousedown：鼠标按下

<div id="dd"></div>
    导入方式
    </body>
    
    
        
            
        
    
    
    
    <script src="js/js导入.js">
        // 一个script标签拥有src引入外部js文件后，就相当于单标签，所以内部的代码会被自动屏蔽
        dd.onclick = function () {  // 不会起作用
            alert(666)
        }
    </script>
    js语法

转载于:https://www.cnblogs.com/komorebi/p/11129760.html