发表于： 2018-11-13 23:11:55
4 1011
今天完成的事情：把任务八的最后一个页面都完成了
明天计划的事情：如果提交的任务8没问题那就继续下一个任务，由于任务九也顺便做了，所以可能会做任务十、复习过去做过项目时的知识点及下一个任务的知识点
遇到的问题：
1.遇到margin重叠现象，解决方法是设置了BFC使两个元素隔开就可以了，还有其它的解决方法，可以是父元素设置上下border，父子元素不会发生margin重叠、可以是被上下padding隔开、也可以是被高度隔开（设置固定高度），可以被空隙（空隙的产生与clear有关）隔开。
2.伪类和伪元素混用时没注意先后顺序，查了后才知道伪类在前，伪元素在后
3.设置个a:hover，就是增加个padding值，当鼠标移到相应元素位置时，其元素能变宽，这种情况下，当这一属性设置好后，其a元素的布局会出现位移抖动，原因是设置的hover上增加了padding宽度，导致a元素再原来的基础上又增加一些padding宽度，所以才会这样，解决方法是，在a元素本身设置与a:hover一样的padding宽度就行了。
3.:first-child、:nth-child(1)选择第一个元素不起作用，原因是无论什么情况，它们是按照父元素内的第一个子元素开始数的，如果第一个子元素是不相干的，:nth-child(1)这个属性还是会应用，而不是跳过，所以只能用:nth-child(2)。
收获：
1.
实现动画过度效果之transiton：
目前而言，transition仅webkit核心的浏览器支持，所以此效果仅在Chrome或是Safari下有。
transiton属性是下面几个属性的缩写：
transition-property
指定过渡的属性值，比如transition-property:opacity就是只指定opacity属性参与这个过渡。
transition-duration
指定这个过渡的持续时间
transition-delay
延迟过渡时间
transition-timing-function
指定过渡动画缓动类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
其中，linear线性过度，ease-in由慢到快，ease-out由快到慢，ease-in-out由慢到快在到慢。
额外的些知识：timing-funciton的几种过度类型都是基于cubic-bezier的某些特定数值。比如ease-in-out的类型它也可以写成cubic-bezier(0.42, 0, 0.58, 1.0)。参见这里。
transition还支持CSS伪类。
所以，transition:all .5s ease-in表示的意思就是所有的属性都执行过渡效果，像角度啊，投影大小，边框色或是下面要讲到的 比例啦等，执行时间为0.5秒，过渡动画类型为先慢后快。
注意此属性是添加在要动画的元素上，如果有伪类，也不要添加在伪类上
2.
关于width:100%和width:auto的区别：
width:100%代表content Width=父contentWidth*100%,
width:auto的宽度就大了，包含了padding、border、content,这三个width=父content Width
3.在层叠上下文中，关于z-index:auto这个属性：它虽然没有创建层叠上下文，其所在元素仍是普通元素，但是它会使所在元素的自身层级拔高到z-index:0级别（再层叠顺序中排名第二）
务必牢记的层叠准则：
下面这两个是层叠领域的黄金准则。当元素发生层叠的时候，其覆盖关系遵循下面2个准则：
1.谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。
2.后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。
在CSS和HTML领域，只要元素发生了重叠，都离不开上面这两个黄金准则。
如同块状格式化上下文，层叠上下文也基本上是有一些特定的CSS属性创建的。我将其总结为3个流派，也就是做官的3种途径：
1. 天生派：页面根元素天生具有层叠上下文，称之为“根层叠上下文”，指的是页面根元素，也就是滚动条的默认的始作俑者<html>元素。
2.正统派：z-index值为数值的定位元素的传统层叠上下文，指的是对于包含有position:relative/position:absolute的定位元素，以及FireFox/IE浏览器（不包括Chrome等webkit内核浏览器）（目前，也就是2016年初是这样）下含有position:fixed声明的定位元素，目前chrome浏览器使用position:fixed,其所在元素会创建层叠上下文，无须z-index为数值才行，另外当其元素属性的z-index值不是auto的时候，会创建层叠上下文。
3.扩招派：其他CSS3属性，创建层叠上下文的属性，如下十条：
1.z-index值不为auto的position:relative/position:absolute定位元素。
2.position:fixed，仅限Chrome浏览器，其他浏览器遵循上一条，需要z-index为数值。
3.z-index值不为auto的flex项(父元素display:flex|inline-flex).
4.元素的opacity值不是1.
5.元素的transform值不是none.
6.元素mix-blend-mode值不是normal.
7.元素的filter值不是none.
8.元素的isolation值是isolate.
9.will-change指定的属性值为上面任意一个。
10.元素的-webkit-overflow-scrolling设为touch.
返回列表
评论