zoukankan      html  css  js  c++  java
  • 定位 锚点 透明

    一、position 定位属性和属性值

    position 定位属性,检索对象的定位方式;
     
    语法:
        position:static /absolute/relative/fixed
     
    取值:
    1、static:    默认值,无特殊定位,对象遵循HTML原则;
    2、absolute:  绝对定位
                  特点:
                    1、脱离文本流,会飘起来,用上下左右给数值定位
                    2、默认情况下,绝对定位的参照物是页面的第一屏
                    3、当所有元素都给了定位时,显示结果是后来者居上
                    4、如果子元素存在父元素里,且父元素有定位,子元素偏移位置相对于父元素来进行移动
                  缺点:子元素是浮着的,下面的内容会跑上去
    3、relative : 相对定位
                   特点
                    1、不脱离文本流,不会飘起来
                    2、默认情况下,参照物是自己原来的位置,包含结构也是一样
                    3、当所有的元素都给了相对定位,元素不会覆盖上去,如果添加了上下左右方向值,元素会覆盖
                   缺点:只在原来的位置移动,即使位置移动了,原来的位置还在
        
        解决方法:给父元素加相对定位,子元素加绝对定位
    4、fixed:     (固定定位)未支持,对象定位遵从绝对定位方式(absolute);但是要遵守一些规范(IE6浏览器不支持此定位) ;

    二、定位元素的层级属性

    z-index : auto |number 检索或设置对象的层叠顺序。
    auto:默认值。遵从其父对象
    number:无单位的整数值。可为负数
     
    说明:
        1、没有设置z-index时,最后写的对象优先显示在上层,设置后,数值越大,层越靠上;
        2、较大数值的对象会覆盖在较小数值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值,那么将依据它们在HTML文档中声明的顺序层叠。
        此属性仅仅作用于 position 属性值 relative 或 absolute,fixed 的对象。

    三、包含块的概念及作用

    包含块是绝对定位的基础,包含块就是为绝对定位元素提供坐标,偏移和显示范围的参照物,即确定绝对定位的偏移起点和百分比 长度的参考;
    默认状态下,body是一个大的包含块,所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的,如果我们定义了包含元素为包含元素块以后,对于被包含的绝对定位元素来说,就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
     
    定义元素为包含块:给绝对定位元素的父元素添加声明position:relative;
        如果父素设置了position:absolute;那么子元素也会相对父元素来定义自己的位置。
     
    绝对和相对定位的区别
    1、参照物不同,绝对定位(absolute)的参照物是包含块(父级),相对定位的参照物是元素本身位置;
    2、绝对定位将对象从文档流中拖离出来因此不占据空间,相对定位不破坏正常的文档流顺序无论是否进行移动,元素仍然占据原来的空间。

    四、锚点连接的语法

    定义:
        是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。
     
    命名锚点的作用:
        在同一页面内的不同位置进行跳转。
     
    制作锚标记:
        1、给元素定义命名锚记名
            语法:<标记 id="命名锚记名"> </标记>
        2、命名锚记连接
            语法:<a href="#命名锚记名称"></a>

    五、透明写法

    IE浏览器写法:
        filter:alpha(opacity=value);取值范围 1-100
    兼容其他浏览器写法:
        opacity:0.value;(value的取值范围
    0-1 0.1,0.2,0.3-----0.9---1)
  • 相关阅读:
    市值
    01-HTML基础与进阶-day3-录像237
    01-HTML基础与进阶-day3-录像236
    01-HTML基础与进阶-day3-录像235
    01-HTML基础与进阶-day2-HTML第二讲
    01-HTML基础与进阶-day2-HTML第一讲
    01H5-fe-html5-006插入视频
    MySQL 备份和恢复数据
    MySQL 索引
    MySQL 视图
  • 原文地址:https://www.cnblogs.com/tis100204/p/10297112.html
Copyright © 2011-2022 走看看