各种tips汇总

Posted 2020-09-08

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

　　

让行及元素变成块级元素的方式：　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