zoukankan      html  css  js  c++  java
  • 阴影及定位

    阴影及定位

     

    隐藏及阴影

    标签隐藏

    复制代码
    1、显示方式 display
    display: none;
    /*表示在页面中隐藏,并且不占位,但是重新显示出来又会占位*/
    2、透明度 opacity 
    opacity: 0;
    /* 0 代表完全透明 1 代表完全显示 但是即使是透明了也会在页面中占位*/
    /*
    显示方式透明没办法找到中间值,所以不可以做渐变操作
    透明度可以找到中间值,可以做出渐变的效果
    */
    复制代码

    阴影

    /*阴影box-shadow: x轴移动 y轴移动 虚化程度 阴影宽度 颜色*/
    box-shadow: 10px 0 10px 1px red;
    /*并且一个标签的box-shadow后面可以跟多个阴影,用逗号隔开*/
    box-shadow: 10px 0 10px 1px red,0 10px 10px 1px green;

    定位

    固定定位

    复制代码
    /*
    vw vh 指定的宽高是根据当前页面窗口的宽高来进行判定的
    80vw  这里的80表示的是百分百
    */
    
    /*
    固定定位 fixed
    
    一旦打开定位属性
      1.left top right bottom 四个方位都能参与布局
      2.子级标签获取不到父级标签的宽度,也撑不起父级的高度   3.固定定位布局参考的对象是浏览器的窗口   4.布局依据:固定定位的盒子四边的距浏览器窗口四边的距离   5.如果布局出现冲突:上下取上, 左右取左   6.如果定位显示重叠通过z-index可以选择谁显示在上面(z-index可看后续详细介绍) */
    复制代码

    绝对定位

    复制代码
    /*
    绝对定位 absolute
    1.子级标签获取不到父级标签的宽度,撑不起父级标签的高度
    2.绝对定位的标签都是相对于一个参考系进行定位,之间不会相互影响
    3.参考系:最近定位的父级标签(父级标签没定位就去找更上一级,都没定位最后找到html)
    4.四个方向都能参与定位
    5.上下取上,左右取左
    
    自己采用绝对定位,一般都是想参照父级标签进行定位
    所以父级标签必须要定位才能作为子级标签的参考系
    父级标签可以采用fixed absolute 但是这两种都会影响盒模型
    relative(相对定位)不会影响盒模型:也就是父相子绝(经常同时出现)
    */
    复制代码

    相对定位

    复制代码
    /*
    相对定位 relative
    1.相对定位不同于固定定位和绝对定位,相对定位可以获取父级的宽度,也可以撑开父级的高度
    2.相对定位的参考系是自身的原有位置
    3.相对定位移动的是图层,盒子还在原地没动
    4.相对定位一般配合绝对定位使用(一般不单独使用)
    */
    复制代码
  • 相关阅读:
    迷 宫
    车厢调度
    快速幂
    2804 最大最小数质因数
    3022 西天收费站
    2291 糖果堆
    1464 装箱问题 2
    Exists/In/Any/All/Contains操作符
    window.onscroll
    zIndex 属性设置元素的堆叠顺序。
  • 原文地址:https://www.cnblogs.com/huikejie/p/11155136.html
Copyright © 2011-2022 走看看