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

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

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