• 各种tips汇总


    才疏学浅,以下整理的东西有些可能还不成熟,措辞有待改进,但是都是我在敲代码的过程中,一点一滴积累总结的,如有不妥和错误,希望大家指正。

      

    让行及元素变成块级元素的方式: position:absolute
                    display:block
                    float

    p标签和div默认不改变width的情况下,width=父盒子width

    margin:0 auto;在当前标签定位之后不好使!!!
    那么想要在定位情况下实现居中怎么办:
    >>> ①position:absolute(父盒子已经定位)
        ②left=50% height=50%
        ③margin-left=-本标签的border宽度大小的一半
        margin-height=-本标签的border高度大小的一半
        ③或者是
        transform: translateY(-50%);
        transform: translateX(-50%);

    如果父盒子设置为display:none,则其孩子也都被隐藏。
    若想单独设置孩子display:block,也无法实现

    display:none;和visibility: hidden;都可以隐藏元素。
    区别是display:none彻底不显示元素,元素不占空间,跟完全没有一样。
    visibility: hidden只是把元素隐藏不显示,但还是占有原来的位置空间的。

    让行内元素产生块级框的方法:
      1.display:block 产生块级框并换行,即右侧的margin为auto
      2.display:inline-block产生块级框,不换行,
      3.position:absolute;产生块级框,不换行,但是多个元素之间会发生重叠
      4.float浮动

    问题:鼠标指上图片,图片慢动作放大,离开后又会慢动作缩回
    解决办法:在hover伪类中加transition的同时,在图片选择器上加相同的transition
    >>>同理得:如果要鼠标指上和离开同时出现 动画效果则:
    ①在hover中添加transition
    ②在其本身添加transition

    问题:鼠标指上图片,图片慢动作放大,离开后又会慢动作缩回
    解决办法:在hover伪类中加transition的同时,在图片选择器上加相同的transition
    >>>同理得:如果要鼠标指上和离开同时出现 动画效果则:
    ①在hover中添加transition
    ②在其本身添加transition

    问题: 在隐藏的情况下 hover之后 想实现 出现+动画效果
    display:block display:none 做不到怎么办?
    解决办法:第1步:给要隐藏的标签设置height=0或者width=0或者opacity=0
    第2步:设置overflow:hidden让其中的内容隐藏
    第3步:在hover伪类中设置height或width为想要的数值
    第4步:在hover伪类中设置hover事件触发的transition实现出现的动画效果
    在要操作的标签的css中设置transition实现消失的动画效果

    新问题出现:动画类型:展开型 改width height
    渐现型 改opacity
    渐现型:因为opacity并不能释放占据空间,因此必须让height/width=0
    所以有了不同属性的出现先后问题?
    新问题解决办法:第1步:让需要隐藏的标签,不再占据空间:
    ①在选择器中,设置border:0px solid color;
    ②设置height/width=0 和 opacity=0
    ③如果有padding将 padding=0;
    ④设置:overflow:hidden,将其内部元素一同隐藏

    第2步: ①在hover伪类中设置height/width,border,padding等
    让上述样式在hover事件一触发就出现。
    ②确定主动画元素(如opacity),给opacity设transition

    第3步: ①在选择器中设置opacity/height的transition
    让他们按照动画消失
    ②使用transition设置delay时间
    让border、padding等在主动画之后消失

    banner图的实现总结:
    在动画实现banner图中,设计了三层div最后一层div中有多个img
    1.最外层div的100%为的是跟随浏览器变化而变化,并且可以用来设置背景,因为背景颜色或背景图不可能覆盖整个body区,需要用高度控制背景图覆盖区域
    2.第二层定width=banner图宽度 或者是里面的内容width 目的是为了居中,此div居中,所以里面的内容永远在浏览器中居中
    3.第三层是为了盛放多个元素组合儿存在,如果只有一个元素,则不需要第三层,直接将次块级元素放在第二层即可
    多个元素可以是在同一行,也可以是在同一列,也可以既有行又有列
    同一列是为了当浏览器缩小,让他们 同步居中
    >>> 总结:第一层:放背景,随浏览器变化而变化
    第二层:定居中
    第三层:盛东西

    当父盒子内部的元素全部浮动的时候,且父盒子没有定高度的时候,父盒子会塌陷
    为了不影响下面与父盒子同级的盒子布局,在新的盒子上添加clear:both
    >>>或者在本盒子上加overflow:hidden 这个做法会使本盒子包裹内部元素,
    使得本盒子的高度等于内部最大元素

    overflow:hidden作用1.让塌陷的回到内部元素填充的大小
            (不定height width(宽高由内部填充物的宽高决定)或者height,width为百分比形式)
              2.让超出部分隐藏
             (定住width height)
              3.让单行多出文字变省略号

  • 相关阅读:
    如何查看一个表的块使用状况
    esp8266烧录Html文件,实现内置网页控制设备!
    python一键电影搜索与下载
    基于 Vue BootStrap的迷你Chrome插件
    SpringBoot之自定义验证码
    iOS 图片部分模糊,类似于美图秀秀
    python实现的电影票房数据可视化
    坦克大战-C语言-详注版
    微信小程序-自定义底部导航
    微信小程序--搜索关键词高亮
  • 原文地址:https://www.cnblogs.com/slk-fight/p/6667000.html
Copyright © 2020-2023  润新知