2019-07-26来黑马程序员的第十五天（上课）

今天讲的知识点都是查缺补漏的，都是记忆性问题，要记得东西有点多，先总结如下：

---

一、z-index

当一个页面有很多定位元素的时候，势必会存在谁覆盖谁的问题

默认情况下：后渲染的定位元素会覆盖先渲染的定位元素

z-index:值越大权重越高

注意：z-index只适用于定位元素

特殊情况：当两个元素比较过了层级（即父元素都设置了z-index,并且值不为auto）,那么子元素会去比较了

---

二、元素的显示和隐藏

display:none 显示：display:block

visibility:hidden 显示：visibility:visible

两者之间的区别：display不占位置隐藏 实际工作使用的最多 配合定位使用 visibility:占位置隐藏 一般用在清除浮动

---

三、overflow 控制元素溢出之后的显示方式

visible（默认）:超出的部分显示 hidden：超出的部分隐藏 auto：如果超出了自动产生滚动条，没有超出则没有滚动条 scroll：不管有没有超出都给个滚动条

---

四、BFC

解释：块状格式上下文

产生BFC的效果：盒子内部空间完全与外部隔离

哪些条件可以产生BFC：1、overflow取值不是visible 2、float的取值不是none 3、display的取值为table或者是inline-block 4、position的取值为fixed和absolute

作用：1、清除浮动 2、解决内边距塌陷

---

五、vertical-align 

作用：控制行内块元素与文字的对齐方式，写在行内块元素上面

应用场景：1、设置行内块元素居中显示 2、设置多行文字居中显示 3、解决表单元素与文字不对齐的问题 4、解决文字与图片排在一起时，底部留白的问题

如何让一段文字垂直居中或者图片垂直居中？

文字用一个div包裹，并且设置这个div为行内块元素，设置属性值vertical-align:middle;

---

六、溢出文本以省略号的方式显示

---

用法：overflow: hidden;

white-space: nowrap;

text-overflow:ellipsis;

将这串代码加到需要包裹文本的标签上

---

七、精灵图（sprite雪碧图）

1、精灵图是用来做背景图

2、background-position的值一定是负值

用法：（1）框选需要显示的区域，并将这个切片的大小给盒子

（2）在PS中查看这个区域的X,Y值，设置为负值给盒子的background-position

---

加油，需要每一天看到自己的成长，Fighting！！！