才疏学浅,以下整理的东西有些可能还不成熟,措辞有待改进,但是都是我在敲代码的过程中,一点一滴积累总结的,如有不妥和错误,希望大家指正。
让行及元素变成块级元素的方式: 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.让单行多出文字变省略号