发表于: 2019-06-10 21:09:11
1 810
今天完成的事件
问题:
前面的远点在网页收缩的时候离文字太远。
解决方法:就是在文字里面属性不设置百分比,设置固定框度。代码如下,
有师兄的教导加深理解盒子的应用,
line-height是行高 意思,当时不太理解是啥意思,它的作用大概就是行内文字的高度 比如DIV是由自带高度的,如果你设置line-height那么它的高度就是按照文字高度如,文字高度是14px那么 行内高度就是14px。
今天在准备小课堂的时候对z-index了解,
优先级我一直以为就是覆盖作用在那都可以用,但看了这图好像不是我理解的那样。
Y和Z轴属于2D效果,Z轴是3D效果,Z感觉就是优先推出视频屏幕的先后顺序,如我点击浏览器就会直接覆盖我的桌面放在我面前,桌面一些东西就会被覆盖。
知道了Z-index必须和定位一起用不然的话是没有任何效果的呢
mix-blend-mode混合模式效果图
相当于文字和背景图片结合然后可以让文字变化颜色等,跟isolation — 隔离mix-blend-mode元素的混合 isolation属性定义该元素是否必须创建一个新的层叠上下文stacking context,从而阻断混合模式。 只要元素可以创建层叠上下文,就可以阻断mix-blend-mode。
知道在CSS中,也是如此。一般情况下,元素都是在一个层面上,看不出差异。但是一旦元素之间出现了重叠,就不可能出现等同关系,就要有个先后顺序,这就产生了层叠顺序和层叠上下文,而z-index则是它们中的一部分,而z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
层叠水平顺序决定了同一个层叠上下文中元素在ž轴上的显示顺序,
- 形成层叠上下文环境的元素的背景与边框
- 拥有负z-index的子堆叠上下文元素(负的越高越堆叠层级越低)
- 正常流式布局,非内联块,无位置定位(静除外)的子元素
- 无位置定位(静除外)的浮浮动元素
- 正常流式布局,内联块元素,无位置定位(静除外)的子元素(包括显示:table和display:inline)
- 拥有z-index:0的子堆叠上下文元素
- 拥有正z-index:的子堆叠上下文元素(正的越低越堆叠层级越低)
层叠准则:
- 层叠上下文的水平比普通元素高。
- 当元素的层叠水平一致,层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。
- 层叠上下文内部嵌套的子元素均受父元素影响。
- 层叠上下文不会影响兄弟元素,只会影响后代元素。
- 在同一层叠水平上时,有明显的z索引值,则值越大,谁在上。
- 使用了CSS3属性的时候,层叠顺序是跟z索引:自动/ z索引:0是一样的,当他们发生层叠的时候,遵循的是“后来居上”准则。
- 这里要注意下
- 普通元素的层叠水平优先由层叠上下文决定,因此,层叠水平的比较只有在当前层叠上下文元素中才有意义。
- 如果父元素没有创建层叠上下文的时候,子元素没有受父元素的限制,父子元素是处于同一层叠水平,比较时需要按上面的7层进行比较。
- 只设置了位置:绝对/相对是不会创建层叠上下文的,此时的DIV是一个普通元素。
- 位置:固定在铬等较高级浏览器中,就算设置为的z-index:汽车也会创建层叠上下文
层叠准则:
- 层叠上下文的水平比普通元素高。
- 当元素的层叠水平一致,层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。
- 层叠上下文内部嵌套的子元素均受父元素影响。
- 层叠上下文不会影响兄弟元素,只会影响后代元素。
- 在同一层叠水平上时,有明显的z索引值,则值越大,谁在上。
- 使用了CSS3属性的时候,层叠顺序是跟z索引:自动/ z索引:0是一样的,当他们发生层叠的时候,遵循的是“后来居上”准则。
这里要注意下:
- 普通元素的层叠水平优先由层叠上下文决定,因此,层叠水平的比较只有在当前层叠上下文元素中才有意义。
- 如果父元素没有创建层叠上下文的时候,子元素没有受父元素的限制,父子元素是处于同一层叠水平,比较时需要按上面的7层进行比较。只设置了位置:绝对定位/相对定位是不会创建层叠上下文的,此时的DIV是一个普通元素。位置:固定在铬等较高级浏览器中,就算设置为的z-index:也会创建层叠上下文。
总结下:感觉层叠z-index必须和定位一起用,HTML本身自带的都有层叠效果绝对定位和相定位,固定定位以及浮动都可以出现层叠效果按照z-index默认大小顺序排列,而且处于以上外 还有:
- opacity 属性值小于 1 的元素
- transform 属性值不为 "none"的元素
- mix-blend-mode 属性值不为 "normal"的元素
- filter值不为“none”的元素
- perspective值不为“none”的元素
- isolation 属性被设置为 "isolate"的元素
- position: fixed
- 在 will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值
- -webkit-overflow-scrolling 属性被设置 "touch"的元素
评论