• 面试问到的


    隐藏元素的方法

    { display: none; /* 不占据空间,无法点击 */ } 
    { visibility: hidden; /* 占据空间,无法点击 */ } 
    { position: absolute; top: -999em; /* 不占据空间,无法点击 */ } 
    { position: relative; top: -999em; /* 占据空间,无法点击 */ } 
    { position: absolute; visibility: hidden; /* 不占据空间,无法点击 */ } 
    { height: 0; overflow: hidden; /* 不占据空间,无法点击 */ } 
    { opacity: 0; filter:Alpha(opacity=0); /* 占据空间,可以点击 */ } 
    { position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间,可以点击 */ } 

    zoom: 0.001; 
    -moz-transform: scale(0); 
    -webkit-transform: scale(0); 
    -o-transform: scale(0); 
    transform: scale(0); 
    /* IE6/IE7/IE9不占据空间,IE8/FireFox/Chrome/Opera占据空间。都无法点击 */ 


    position: absolute; 
    zoom: 0.001; 
    -moz-transform: scale(0); 
    -webkit-transform: scale(0); 
    -o-transform: scale(0); 
    transform: scale(0); 
    /* 不占据空间,无法点击 */ 

    position的五个属性值  

    1、static 无定位
      该属性值是所有元素定位的默认情况,在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用position:static取消继承,即还原元素定位的默认值。

    2、absolute

    css手册是这样说的:“生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

    但是他究竟是根据谁来偏移的呢?

    这里有2种状况,用div1来说明:
    1、如果div1父容器(id='parent'的div)没有设置position属性,那么div1的偏移是以body为依据的

    2、如果div1的父容器设置了position属性,并且position的属性值为absolute 或者relative,那么div1就会依据父容器进行偏移

      如果parent设定了margin,border,padding等属性,那么这个定位点将忽略padding,将会从padding开始的地方(即只从padding的左上角开始)进行定位,也就是忽略padding,当然并不会忽略margin和border。

    3、relative

    这个值比较简单,它的偏移是相对自己来进行的。意思就是,div1如果设置了relative值,那么,它的偏移,就会根据top,right,bottom,left的值以它原来的位置为基准偏移,而不管其他元素会怎么样。

    4、fixed

    这个好理解,它总是以body为依据的。

  • 相关阅读:
    20年美亚杯WRITE UP
    博客搬迁
    前端工程化1-模块
    移动端(h5)工具函数--视口适配(viewport)
    Understanding ES6 Modules(译)
    手写http请求并发、重试、超时函数
    两道编程题引发的思考
    前端基础走查(六):异步任务和事件循环
    vue 本地图片批量下载以及压缩成zip文件下载
    mybatis generator逆向工程
  • 原文地址:https://www.cnblogs.com/tantry/p/4347551.html
Copyright © 2020-2023  润新知