zoukankan      html  css  js  c++  java
  • 前端学习(六)定位(笔记)

    定位:
                
        绝对定位:
        position:absolute; top:0; left:0;(俩个值必须都有)
        值:数字  百分比

        好处:
        1.主要作用:可以让一个元素在网页中的任何一个位置,而且不干扰页面的布局!position:relative; top:0;left:0;
        2.可以做一个页面中绝对居中的块
        position:absolute; top:50%; left:50%; margin-top:-块的一半; margin-left:-块的一半;

        特性:
        1.完全脱离文档流!
        2.行内元素加了定位就会变成块元素
        (加了定位的这个元素(块元素)在没有固定宽的情况下,默认内容宽高)
        3.默认参照物body
        (定位元素参照物,首先会从最近的父级一级一级找定位父级,找到以后,定位父级就是它的参照物,如果最后没有找到离自己的最近定位父级,默认是body)


    相对定位:
        position:relative; top:0;left:0;(后面的俩个值可以不写
            为什么?

            因为相对定位主要作用:为了给绝对定位做参照物!
        )

        特性:
            1.不脱离文档流
            2.不改变元素类型
            3.参照物:自己


    需求:
        1.box1,不脱离文档流
        2.box2,是脱离文档流的
        3.box2定位参照物还是必须是box1

    <div class="box1">智能
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>

    ============================================

    例子:
    <div>
        <a href="#" class="a1">1</a>
        <a href="#" class="a2">2</a>
        <a href="#" class="a3">3</a>
        <a href="#" class="a4">4</a>
        <a href="#" class="a5">5</a>
    </div>    

    ***给a标签加了绝对定位,五个a都重叠在一起!

    注意:绝对定位后的层级关系:
        
        1.在同为定位元素的标签下
        2.后写的标签层级高于先写的    



    =======================================
    全部标签层级关系

    普通元素--》浮动--》定位---》z-index:8;

    注意:比较层级的时候,优先比较元素类型!

    1.在同为定位元素的标签下
    2.后写的标签层级高于先写的    
    3.定位元素里,子元素永远都比父元素层级高!
    ===========================================


    display:none; 消失!

    display:block; 显示

    hover用法:
        必须-移入父级操作子级
        
        也可以移入自己操作自己

    ==========================================

    透明度:

    opacity:0.5;--0-1;
    filter:alpha(opacity:50);0-100  兼容ie8

    注意:
        给一个标签添加透明度,它里面所有包的内容也就变透明了!!!!

  • 相关阅读:
    设计模式学习08:享元模式
    设计模式学习07:适配器模式
    设计模式学习06:策略模式和简单工厂模式
    XCode Debugger中的Icon符号的意义
    蒲公英——APP内测分发平台
    分享申请IDP账号的过程,包含duns申请的分享
    Dash——程序员的的好帮手:API文档浏览器+代码片段管理工具
    xScope——界面设计师的终极工具箱
    Alcatraz——Xcode插件管理工具
    苹果向开发者发布 Xcode 6.3.2 GM版 修复 Bug
  • 原文地址:https://www.cnblogs.com/wxiaoyu/p/9579187.html
Copyright © 2011-2022 走看看