精华内容
下载资源
问答
  • 你有没有想过,为什么我们要有这么多技术来隐藏元素,而它们看起来都实现的是同样的效果?每一种方法实际上与其他方法之间都有一些细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法。这篇教程将覆盖到...
  • 某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子. 提问: 以下情况使用标准流或者浮动能实现吗? 当我们滚动窗口的时候,盒子是固定屏幕某个位置的。 以上效果,标准流或浮动都无法快速实现,此时需要...

    CSS 定位

    1.1 为什么需要定位

    提问: 以下情况使用标准流或者浮动能实现吗?

    1. 某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子.
      在这里插入图片描述
      提问: 以下情况使用标准流或者浮动能实现吗?
    2. 当我们滚动窗口的时候,盒子是固定屏幕某个位置的。
      在这里插入图片描述
      以上效果,标准流或浮动都无法快速实现,此时需要定位来实现。
      所以:
    3. 浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子。
    4. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。

    1.2 定位组成

    定位:将盒子定在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子。
    定位 = 定位模式 + 边偏移 。
    定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

    1. 定位模式

    在这里插入图片描述

    2. 边偏移

    在这里插入图片描述

    1.3 静态定位 static(了解)

    在这里插入图片描述

    1.4 相对定位 relative(重要)

    相对定位是元素在移动位置的时候,是相对于它原来的位置来说的(自恋型)。
    在这里插入图片描述

    1.5 绝对定位 absolute(重要)

    在这里插入图片描述

    1.6 子绝父相的由来

    弄清楚这个口诀,就明白了绝对定位和相对定位的使用场景。

    这个“子绝父相”太重要了,是我们学习定位的口诀,是定位中最常用的一种方式这句话的意思是:子级是绝对定位的话,父级要用相对定位。

    ① 子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。
    ② 父盒子需要加定位限制子盒子在父盒子内显示。
    ③ 父盒子布局时,需要占有位置,因此父亲只能是相对定位。
    这就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级。

    总结: 因为父级需要占有位置,因此是相对定位, 子盒子不需要占有位置,则是绝对定位
    当然,子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到。

    1.7 固定定位 fixed (重要)

    在这里插入图片描述
    固定定位小技巧: 固定在版心右侧位置。
    小算法:

    1. 让固定定位的盒子 left: 50%. 走到浏览器可视区(也可以看做版心) 的一半位置。
    2. 让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置

    就可以让固定定位的盒子贴着版心右侧对齐了。

    1.8 粘性定位 sticky(了解)

    在这里插入图片描述

    1.9 定位的总结

    在这里插入图片描述

    1.10 定位叠放次序 z-index

    在这里插入图片描述

    1.11 定位的拓展

    1. 绝对定位的盒子居中

    加了绝对定位的盒子不能通过 margin:0 auto 水平居中,但是可以通过以下计算方法实现水平和垂直居中。
    ① left: 50%;:让盒子的左侧移动到父级元素的水平中心位置。
    ② margin-left: -100px;:让盒子向左移动自身宽度的一半。

    2. 定位特殊特性

    绝对定位和固定定位也和浮动类似。

    1. 行内元素添加绝对或者固定定位,可以直接设置高度和宽度。
    2. 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。

    3. 脱标的盒子不会触发外边距塌陷

    浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。

    4. 绝对定位(固定定位)会完全压住盒子

    浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)
    但是绝对定位(固定定位) 会压住下面标准流所有的内容。
    浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素

    元素的显示与隐藏

    类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!

    本质:让一个元素在页面中隐藏或者显示出来。

    1. display 显示隐藏
    2. visibility 显示隐藏
    3. overflow 溢出显示隐藏

    2.1 display 属性

    类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!

    本质:让一个元素在页面中隐藏或者显示出来。

    display 属性用于设置一个元素应如何显示。
     display: none ;隐藏对象
     display:block ;除了转换为块级元素之外,同时还有显示元素的意思

    display 隐藏元素后,不再占有原来的位置。

    后面应用及其广泛,搭配 JS 可以做很多的网页特效。

    2.2 visibility 可见性

    visibility 属性用于指定一个元素应可见还是隐藏。

     visibility:visible ; 元素可视

     visibility:hidden; 元素隐藏

    visibility 隐藏元素后,继续占有原来的位置。

    如果隐藏元素想要原来位置, 就用 visibility:hidden

    如果隐藏元素不想要原来位置, 就用 display:none (用处更多 重点)

    2.3 overflow 溢出

    overflow 属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度) 时,会发生什么。
    在这里插入图片描述

    1. display 显示隐藏元素 但是不保留位置
    2. visibility 显示隐藏元素 但是保留原来的位置
    3. overflow 溢出显示隐藏 但是只是对于溢出的部分处理
    展开全文
  • 而我之前一直是使用JavaScript来实现菜单的打开和关闭的,但最近在网上看到有人使用CSS和HTML来实现这一功能,让我真正的感受到手里只要有一把锤,什么可以做钉子。 实现之前先来看一下HTML标签和输入类型: label...
  • js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么 ...fadeIn()和fadeOut():可以使用fadeIn()方法来实现元素的淡入效果,使用fadeOut()方法来实现元素的淡出效果。 语法:fadeIn([speed],[e...

    js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么

    一、总结

    一句话总结:分别改变display,高度,opacity透明度这三种属性。

     

    1、fade系列函数有哪四个?

    • fadeIn()和fadeOut():可以使用fadeIn()方法来实现元素的淡入效果,使用fadeOut()方法来实现元素的淡出效果。

      语法:fadeIn([speed],[easing],[fn])/fadeOut([speed],[easing],[fn])

    • fadeToggle()通过不透明度的变化来开关所有匹配元素的淡入和淡出效果。

      语法:fadeToggle([speed,[easing],[fn]])

    • fadeTo()把所有匹配元素的不透明度以渐进方式调整到指定的不透明度

      语法:fadeTo([[speed],opacity,[easing],[fn]])

     

    2、fadeTo的作用是什么?

    fadeTo()把所有匹配元素的不透明度以渐进方式调整到指定的不透明度
    语法:fadeTo([[speed],opacity,[easing],[fn]])

    29         $('#btn4').click(function(){
    30             $('div').fadeTo(1000,0.5)
    31         })

     

     

    二、jquery动画显示隐藏,滑动,淡入淡出的本质是什么

    1、淡入淡出

    淡入和淡出效果,本质上其实都是通过改变元素的"透明度"(opacity属性)来实现的。

    • fadeIn()和fadeOut():可以使用fadeIn()方法来实现元素的淡入效果,使用fadeOut()方法来实现元素的淡出效果。

      语法:fadeIn([speed],[easing],[fn])/fadeOut([speed],[easing],[fn])

    • fadeToggle()通过不透明度的变化来开关所有匹配元素的淡入和淡出效果。

      语法:fadeToggle([speed,[easing],[fn]])

    • fadeTo()把所有匹配元素的不透明度以渐进方式调整到指定的不透明度

      语法:fadeTo([[speed],opacity,[easing],[fn]])

     

     

    2、代码

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>演示文档</title>
     6     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
     7     <style type="text/css">
     8         input{width: 100px;height: 30px;}    
     9         #div1,#div2,#div3{width: 150px;height: 150px;border:1px solid green;margin-left: 15px;display: inline-block;background: orange}
    10       </style>
    11 </head>
    12 <body>
    13     <h3>jQuery动画效果</h3>
    14     <input id="btn1" type="button" value="fadeIn">
    15     <input id="btn2" type="button" value="fadeOut">
    16     <input id="btn3" type="button" value="fadeToggle">
    17     <input id="btn4" type="button" value="fadeTo"><br>
    18         <div id="div1"></div><div id="div2"></div><div id="div3"></div>
    19     <script>
    20         $('#btn1').click(function(){
    21             $('div').fadeIn(2000)
    22         })
    23         $('#btn2').click(function(){
    24             $('div').fadeOut(2000)
    25         })
    26         $('#btn3').click(function(){
    27             $('div').fadeToggle(2000)
    28         })
    29         $('#btn4').click(function(){
    30             $('div').fadeTo(1000,0.5)
    31         })
    32     </script>
    33 
    34 </body>
    35 </html>

     

     

     

     

    转载于:https://www.cnblogs.com/Renyi-Fan/p/9311126.html

    展开全文
  • 今天,我们就来看看HTML在我们经常打交道的input表单中增加了什么类型吧。在这之前,我们先回归下...在HTML5中,增加了多个新的表单input输入类型,通过使用这些新增元素可以实现更好的输入控制和验证。 1、...

    今天,我们就来看看HTML在我们经常打交道的input表单中增加了什么类型吧。在这之前,我们先来回归下HTML5之前都有些什么类型的表单:

    输入类型 HTML代码
    文本域
    单选按钮
    复选框
    下拉列表
    密码域
    提交按钮
    可单击按钮
    图像按钮
    隐藏域
    重置按钮
    文件域
    在HTML5中,增加了多个新的表单input输入类型,通过使用这些新增元素,可以实现更好的输入控制和验证。

    1、email类型的应用

    email类型的input元素是一种专门用于输入E-mail地址的文本输入框,在提交表单的时候,会自动验证email输入框的值。

    2、url类型的应用

    url类型的input元素提供用于输入url地址这类特殊文本的文本框。

    3、number类型的应用

    number类型的input元素提供用于输入数值的文本框。

    4、range类型的应用

    range类型的input元素提供用于输入包含一定范围内数字值得文本框,在网页中显示为滚动条。

    5、日期检出类型的应用

    输入类型 HTML代码 功能说明
    date 选取日、月、年
    month 选取月、年
    week 选取周和年
    time 选取时间(小时和分钟)
    datetime 选取时间、日、月、年(UTC时间)
    datetime-local
    选取时间、日、月、年(本地时间)
    6、search类型的应用

    search类型的input元素提供用于输入搜索关键词的文本框。

    input[type="search"]{ -webkit-appearance:textfield; } 7、tel类型的应用

    tel类型的input元素提供专门用于输入电话号码的文本框。

    8、color类型的应用

    color类型的input元素提供专门用于设置颜色的文本框。

    //只支持Opera浏览器
    新增元素类型就这么多了。

    展开全文
  • priorityPlus 导航模式的现代化实现。 您可以在上看到一个演示。 这里还有一个Glitch笔有一个... 该库通过将尽可能多的导航项放入“主”导航中,然后将其余的导航项自动移动到下拉菜单中来实现该模式。 如果有更多
  • 什么使用border可以产生三角形呢?先看看一张图片: 看了图中的三个小图形的变化过程,你应该已经清楚了一半。其实 hack 出三角形只需要两个条件,第一,元素本身的长宽为0;其次,将不需要的部分通过 ...

    第一种方法:利用border


    一个矩形拼接两个三角形最终制造出一个平行四边形。为什么使用border可以产生三角形呢?先来看看一张图片:

    看了图中的三个小图形的变化过程,你应该已经清楚了一半。其实 hack 出三角形只需要两个条件,第一,元素本身的长宽为0;其次,将不需要的部分通过 border-color 来设置隐藏。通过类似的方法,你还可以创造出梯形,上图中的三个图形的代码如下。(另附 CodePen 示例,http://codepen.io/jerryzou/pen/mJYJym )


    #first {

      width: 20px;

      height: 20px;

      border-width: 10px;

      border-style: solid;

      border-color: red green blue brown;

    }

     

    #second {

      width: 0;

      height: 0;

      border-width: 10px;

      border-style: solid;

      border-color: red green blue brown;

    }

     

    #third {

      width: 0;

      height: 0;

      border-width: 10px;

      border-style: solid;

      border-color: red transparent transparent transparent;

    }


    接下来就要考虑如何拼接出一个平行四边形了。在border法中,它由三部分组成,分别是左三角形、矩形、右三角形。如果每次绘制平行四边形都要创建三个元素显然过于麻烦了,所以在这里:before和:after伪元素是个不错的选择。下面我们实现一下这样的效果:


    为了将三角形与矩形无缝拼接到一起,多处属性要保持一致,所以使用类似 Less, Sass, Stylus 等 CSS 预处理器来写这段代码会更容易维护,下面给出 Scss 版本的代码。(另附 CodePen 链接,http://codepen.io/jerryzou/pen/ZGNGWZ?editors=110)


    //三角形的宽高

    $height: 24px;

    $width: 12px;

     

    //对平行四边形三部分的颜色进行赋值

    @mixin parallelogram-color($color) {

      background: $color;

      &:before { border-color: transparent $color $color transparent; }

      &:after { border-color: $color transparent transparent $color; }

    }

     

    //单个三角形的样式

    @mixin triangle() {

      content: '';

      display: block;

      width: 0;

      height: 0;

      position: absolute;

      border-style: solid;

      border-width: $height/2 $width/2;

      top: 0;

    }

     

    //平行四边形的样式

    .para {

      display: inline-block;

      position: relative;

      padding: 0 10px;

      height: $height;

      line-height: $height;

      margin-left: $width;

      color: #fff;

     

      &:after {

        @include triangle();

        right: -$width;

      }

     

      &:before {

        @include triangle();

        left: -$width;

      }

     

      @include parallelogram-color(red);

    } 


    需要注意的是,如果通过 $height、$width 设置的三角形斜率太小或太大都有可能造成渲染出锯齿,所以使用起来要多多测试一下不同的宽高所得到的视觉效果如何。


    第二种方法:利用transform


    使用transform来实现平行四边形的方法是我在逛去啊的时候看到的,效果大概是这个样子:


    看到之后觉得好神奇啊,原来还可以只有平行四边形的外轮廓。(因为方法一只能创造填充效果的平行四边形)实现起来非常简单,主要是借助了transform: skew(...),下面就来看看源码吧。


    <style>

    .city {

      display: inline-block;

      padding: 5px 20px;

      border: 1px solid #44a5fc;

      color: #333;

      transform: skew(-20deg);

    }

    </style>

     

    <div class="city">上海</div>


    于是我们得到了这样的效果:



    看到图片的你一定是这样想的:



    别着急嘛,我们的确是把整个 div 进行了歪曲,导致中间的文字也是倾斜的,而这显然不是我们所要的效果。所以我们需要加一个内层元素,并对内层元素做一次逆向的歪曲,从而得到我们想要的效果:

    实现代码如下,另附 CodePen 示例(http://codepen.io/jerryzou/pen/BNeNwV?editors=110)


    <style>

    .city {

      display: inline-block;

      padding: 5px 20px;

      border: 1px solid #44a5fc;

      color: #333;

      transform: skew(-20deg);

    }

     

    .city div {

      transform: skew(20deg);

    }

    </style>

     

    <div class="city">

      <div>上海</div>

    </div>

     

    总结


    第一种方法使用 border 属性 hack 出三角形,并通过对三个元素进行拼接最终实现了平行四边形;而第二种方法则通过 transform: skew 来得到平行四边形。总体来说,第二种方法相对于第一种代码量小得多,而且也很好理解。唯一的不足是无法构造像本站的分页中所使用的梯形。


    展开全文
  • 1.可以无条件地访问外围类的所有元素 2.实现隐藏 3.可以实现多重继承 4.通过匿名内部类优化简单的接口实现 内部类与外部类的关系 内部类的分类 静态内部类和非静态内部类的区别 局部内部类 匿名内部类 实际开发中...
  • 组件是一段你无法修改的可执行代码,但是你可以通过它公开的接口来使用,它隐藏了它的实现细节,即使在运行时也可以由暴露它的另一个组件替换。接口和执行相同的工作,并确保向上兼容使用它的客户端应用程序。 ...
  • 我并不关心你输入的是什么,只要获取到就行了,不需要把写的元素展示出来,那么我只要做到监听你的输入和删除操作就可以了,你每输入一个字符,我就设置一个图片显示出来,类似于输入密码拿着黑点,当你删除的时候,...
  • 可以放到一个隐藏的iframe中去执行,或者宿主环境提供一个环境。无论怎样,目的都是相同的,就是把用户的代码放到一个绝对安全的沙箱中执行。 由于开发者是基于Vue.js开发,用户的代码是...
  • excel的使用

    2012-11-25 17:06:01
    (3)创建条件格式 可以使用六种逻辑符号设计一个条件格式:>(大于)、>=(大于等于)、<(小于)、(小于等于)、=(等于)、(不等于),如果你觉得这些符号不好记,就干脆使用“>”或“>=”号表示。...
  • 那为什么不把 text 视为 children 的一个元素 ?主要是方便处理,text 节点和其它类型的节点处理起来差异很大。 <ol><li>可以这样理解,有了 text 代表该 vnode 其实是 VTextNode,仅仅是 ...
  • Symbol对象是什么

    2020-12-27 09:27:49
    这种内置Symbol.iterator属性的可以使用迭代器。ECMAScript旨在使JS中使用一种方法,比如</p><pre><code>for...of</code></pre>就可以遍历序列数据,不需要关注它内部的数据结构。其实就是JS往C,JAVA语言靠拢的...
  • 备用,以后慢慢学

    2010-05-21 14:14:33
    Ctrl+Alt+“+”和Ctrl+Alt+“-” 可以自动调整窗口以满屏缩放显示,使用此工具你就可以无论图片以多少百份比显示的情况下都能全屏浏览!如果想要在使用缩放工具时按图片的大小自动调整窗口,可以在缩放工 具的...
  • LazySec-crx插件

    2021-04-02 02:04:58
    查看隐藏元素:扩展名可见可见的是“显示:无”,“类型=隐藏”和“可见性=隐藏”属性/样式隐藏的这些元素。要执行此目的,请点击Lazysec的“显示隐藏元素”按钮。为什么Lazysec?+我不喜欢通过检查页面的DOM打开...
  • C#浏览器编程,学习使用

    热门讨论 2010-08-04 10:04:05
    浏览器功能设计主要确定设计好的浏览器需要具备哪些功能,以及这些功能是以什么方式进行实现,这个步骤相当于软件设计中的“需求分析”,其中必须保证基本功能的具备,即浏览器必须能够浏览Web页面。 (2)浏览器...
  • 前言: 精易web浏览框支持库 使用的是miniblink,这我应该...可以执行Object.setAttribute(),Object.getAttribute()来实现元素操纵 可以读写对象的成员(比如命令的返回值是Rect,如果你用纯Js填表来处理就十分困难)
  • 但看到网上大多数还是通过 component 方式实现的,这样的话我们在使用的时候还要在 DOM 中放置一个组件元素,然后通过一个变量控制它的显示隐藏,这样使用起来非常的不方便。那么有什么方法可以不用在 DOM 中手动...
  • Oracle 视图传递参数

    2020-05-29 13:17:55
    在Oracle里,视图不像存储过程和函数一样,可以定义输入参数,但我们可以变个方式,使用程序包来实现。 oracle package: oracle package是oracle包,是一组相关过程、函数、变量、常量、类型和游标等PL/SQL程序...
  • 实现这一个功能,在我没有接触ViewStub标签的话,我会把不常用的元素使用INVISIBLE或者GONE进行隐藏,一些常用的使用VISIBLE显示出来。这肯定是可以的,先不说性能的问题,这样设计的话有时连自己都会弄晕。有没有...
  • 大家都知道在使用anularjs开发前端页面时,常常使用ng-show、ng-hide、ng-if功能控制页面元素的显示或隐藏,那他们之间有什么不同呢?下面通过这篇文章一起看看吧。 实现原理 ng-show/ng-hide是通过
  • 但看到网上大多数还是通过 component 方式实现的,这样的话我们在使用的时候还要在 DOM 中放置一个组件元素,然后通过一个变量控制它的显示隐藏,这样使用起来非常的不方便。那么有什么方法可以不用在 DOM 中手动...
  • CSS-06天

    2021-05-05 19:54:44
    学习目标 能够说出 为什么要用定位 ...场景1: 某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子. 场景2:当我们滚动窗口的时候,盒子是固定屏幕某个位置的。 结论**:要实现以上效果,**标准流.

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 163
精华内容 65
关键字:

隐藏元素可以使用什么来实现