第 6 天：设计一个左右滑动的菜单

前面 5 天我们学习了 HTML，从今天开始进入 CSS 的学习，这部分内容入门简单，深入比较难。CSS的作用是「给HTML元素添加样式和布局」，也就是说通过 HTML 元素来搭建整个网页的框架，网页中的字体大小、颜色等样式靠 CSS 来描述，元素的该如何放，放到哪个位置也是靠 CSS。总的来说CSS非常重要，如果不系统学习的后果是你不知道为何会出现奇奇怪怪的现象，为什么某些效果不起作用。

今天，我们学习使用CSS如何让元素可滚动。在下面的例子中，顶部菜单栏支持左右滑动，有部分内容是不可见的，这种效果类似于App中的联动效果。

我们先预览下效果，点击底部按钮「知识小集」菜单会滚动到中间：

点击按钮后：

想要实现这种效果，需要做三件事：

1.所有的菜单单行显示，不折行：

前端的默认布局方式是「流式布局」，布局方式和代码书写顺序一致，在流式布局中，span 是 inline 标签，而 div 是块级标签，这两个标签的区别是块级标签独占一行，而 inline 标签会「累加」，如同打字一样，一个字一个字往后拼接，单行显示不全会折行显示。

使用 span 标签效果能实现我们要的效果，只不过我们需要「不折行」。CSS 中提供了一个属性 white-space，它的作用就是告诉浏览器遇到「空格」该如何处理，这里的空格不是单纯意义上的空格。

它的默认值是 nomal，也就是遇到空格字符就会折叠，而另外一个属性 nowrap 恰好与它相反，意思是不折叠一直显示，恰好满足我们的需求。所有我们的 CSS 是这样定义的：