首页 > 代码库 > 各种tips汇总

各种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

各种tips汇总