精灵图在现代前端中到底有用没，css 中显示和隐藏竟有两种不同方式

css 基础篇（第七篇）

回顾

在上一讲中我们基本上学习了 css 中定位的几种方式，包括定位在实际工作中常用的口诀等，除此之外还学习了 margin：0 auto 水平居中的效果、未来常用的 z-index 等层叠。我们还详细的阐述了样式的书写顺序到底能不能影响渲染性能，如果没有看到的小伙伴可以看前一篇文章。这一讲我们将开启 css 基础篇的最后一讲。之后就要开始学习 css3 和 html5 了！

元素的显示与隐藏

dispaly

• display：none —— 隐藏对象，隐藏之后位置也不能占有

• display：block —— 除了转换元素之外，还是显示元素

visibility

• visibility：hidden —— 元素可以隐藏，但是位置还占有

• visibility：visible —— 元素显示

overflow 溢出

• overflow：hidden —— 不显示超过对象尺寸的内容，超出部分隐藏掉（隐藏的部分不占有位置） 如下图 所示

• overflow：visible —— 不剪切内容也不添加滚动条

• overflow：scroll —— 不管超出内容与否，总是显示滚动条

• overflow：auto —— 超出自动显示滚动条，不超出不显示滚动条

在未来的使用中 overflow：hidden 是会被大量的运用到，除此之外其他的默认样式都不会用到，因为样式太丑了，所以未来工作当中一般的团队都有写默认的样式。这里只要重点记住 hidden

display、visibility、overflow 总结

• display —— 隐藏对象，但不保留位置

• visibility —— 隐藏对象，但保留位置

• overflow —— 重点记住 hidden，隐藏超出大小的部分

css 用户界面样式

在页面中你肯定能发现，有时候你点击搜索框或者按钮的时候鼠标中的箭头会变成一个小手，这个样式效果在前端中运用的还是挺广泛，这个就是鼠标样式的操作。鼠标样式操作 cursor：

• cursor：default —— 默认样式

• cursor：pointer —— 小手样式

• cursor：move —— 移动样式

• cursor：test —— 文本样式

• cursor：not-allowed —— 禁止样式

轮廓线

特别是在后期的工作当中，因为 input 框或者跟 ui 相关的东西都会有一个组件单独封装出来，根据设计的风格再去自定义，所以在后期如果团队中打造自有的 ui 框架都会将默认的轮廓线去掉再做自定义的轮廓线，所以 ui 组件中一般都会取消默认的轮廓线

• outline：none —— 去掉默认轮廓线

防止拖拽文本

还有一个未来也可能会常用到的就是防止用户拖拽文本，一般在文库类型的网站中用的比较多，比如防止复制等操作就是这样的。

• resize：none —— 防止拖拽文本

垂直对齐方式

vertical-align —— 表示垂直对齐（只对行内和行内快有效果）

• vertical-align：baseline —— 基线对齐

• vertical-align：top —— 顶线对齐

• vertical-align：middle —— 垂直居中

• vertical-align：bottom —— 底线对齐

图片中显示的就是 文字对照图片是垂直居中的，这个在未来的登录后 显示图像和文字的场景中会运用到，这里就写了一个 middle，其余的可以自己的代码 vs code 中试一试

溢出的文字用省略号代替

• white-space：nowrap —— 强制一行内显示文本

• overflow：hidden —— 超出部分隐藏

• text-overflow：ellipsis —— 文字用省略号代替超出的部分

其中第三个在未来中也会常用到，这里就不做演示了，感兴趣的话，下去可以自己在代码中试一试

精灵图

现在学习前端的同学可能不知道精灵图/雪碧图这个概念了，在之前的几年，精灵图和雪碧图是前端中非常常用的手段，因为它们会起到一个优化的作用，可以较少发起 http 请求，所谓的精灵图就是把多个小图标按照比例整合成在一张图中显示。这样就不用发起多个 http 请求了，一个请求就可以拿到很多小图标，然后再渲染到页面中用到的位置。

虽然在几年之前这个是非常好的优化手段，但是在现代的 http2.0 中影响就是微乎其微了，利用雪碧图前提是减少 http 的请求，在之前中 http 在建立三次握手之后四次挥手之前都是在一来一回发送请求的，相当于 如下图 所示

但是 2.0 改版之后 就有多路复用和请求并行等效果了，整个效果就是 如下图 所示

所以对于现代 http 来说 精灵图中多个发起多个请求在现代前端和浏览器机制中就显现的微乎其微了。而且还有 webpack 打包的效果和 base 64 转换图片的功能等，更可以有效的代替精灵图了。 所以精灵图在现代中几乎是不用了，但是可以了解了解，有助于你更好的或者更有兴趣的学习浏览器等知识

css 三角形

三角形也可以用 css 写出来的，在之后的工作中你可能会遇到 三角形，一般都是让设计来裁剪一个三角形的图片，然后你可以用伪类元素将它定位到某个点上，但是简单的三角形也可以直接用 css 写出来的，不要小看这个功能，这个也可能是将来的面试题，在未来的面试中，你可能会遇到这个问题，所以可以尝试这理解理解，然后在代码中写出来。

好了，今天的 css 就说完了，css 篇幅中一共设置了七篇，下一次就要进入到了 css3 和 html5 的知识点中了，css 在未来初期的工作当中是大量会运用到，所以基础一定要打好。 欢迎留言讨论~

今天我们来复习一首诗，十一假期过后笔者想把读诗也纳入日常的生活当中，最近很长一段时间总想开口说点什么但是说不上来，感觉自己的文化受限了，所以想多读点书。 最近就先读点之前记录的情诗，十一假期过后准备读一读李煜的诗。最近再看一本 《门口的野蛮人》 感觉挺不错的，可以推荐大家读一读。

一剪梅-雨打梨花深闭门

• 雨打梨花深闭门 ，忘了青春，误了青春。

• 赏心乐事供谁论？ 花下销魂，月下销魂。

• 愁聚眉峰尽日颦，千点蹄痕，万点蹄痕。

• 晓看天色暮看云，行也是君，坐也是君。

译文

• 深闭房门听窗外雨打梨花的声音，就这样辜负了青春年华，虚度了青春年华

• 纵然有美好愉快的心情能跟谁共享？ 花下也是黯然神伤，月下也是黯然神伤

• 整日里都是眉头紧皱如黛峰耸起，脸上留下千点泪痕和万点泪痕

• 从早晨到晚上一直看着天色云霞，行走时思念这你，坐下也忍不住思念着你