首页 > 代码库 > 各种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汇总