HTML- white-space 和 overflow 两个重要的 CSS 属性
CSS的作用是给 HTML 元素增加样式和布局，接下来利用CSS的white-space 和 overflow 这两个属性让元素实现左右滑动，效果如下：
左右滑动的菜单.gif
点击按钮 day4-前台 菜单会滚动到中间，在iOS中想要实现这种效果还是比较简单的，接下来看看在前台中实现这种效果的要点有哪些？
一、所有的菜单项单行显示，不换行
前台的默认布局方式是 流式布局 ，块级元素 在流式布局中独占一行，块级元素会自上而下的排列且在默认宽度是父类元素的100%而高度默认被内容撑开，例如 div。内联元素 在流式布局中只占自身的大小，会默认从左向右排列，假如一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右，例如 span。
我们要的是单行显示，所以使用 span 标签就能实现我们要的效果，但是还要 不换行，这时就要利用 CSS 的 white-space 属性了，它会告诉浏览器遇到 空格 该怎样解决（这里的空格不是单纯意义上的空格）。它的默认值是 nomal ，就是遇到空格字符就会折叠，而另外一个属性 nowrap 刚好与它相反，意思是不折叠一直显示，恰好满足我们的需求。
二、菜单可以左右滑动
CSS 中有一个属性 overflow 可以控制对于超出可视区域的内容如何解决。从下面的注释可以知道我们要选择 scroll ，上下左右滑动可以通过 overflow-x 和 overflow-y 分别控制各个方向的具体体现。
/* 默认值。内容不会被修剪，会呈现在元素框之外 */overflow: visible;/* 内容会被修剪，并且其他内容不可见 */overflow: hidden;/* 内容会被修剪，浏览器会显示滚动条以便查看其他内容 */overflow: scroll;/* 由浏览器定夺，假如内容被修剪，就会显示滚动条 */overflow: auto;/* 规定从父元素继承overflow属性的值 */overflow: inherit;五、点击按钮，让某个菜单滚动到中间
其实就是一个方法 Element.scrollTo() ，可以使界面滚动到给定元素的指定坐标位置。
源码如下：
day6.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./day6.js"></script> <link rel="stylesheet" href="day6.css"> <title>利用CSS让元素可以左右滑动</title></head><body> <h1 class="topTitle">前台小课</h1> <div class="line"></div> <div id="navigation"> <span id="a">day1-前台</span> <span id="b">day2-前台</span> <span id="c">day3-前台</span> <span id="d">day4-前台</span> <span id="e">day5-前台</span> <span id="f">day6-前台</span> </div> <!-- 点击事件 --> <div id="button" onclick="clickedScroll()">点击滚动菜单</div></body></html>day6.css
/*清理标签默认边距*/* { margin: 0; padding: 0;}/* class 的选择器，以 . 开头获取 */.topTitle { text-align: center; margin: 10px auto;}.line { background-color: lightgray; height: 2px; margin-bottom: 2px;}#navigation { /* 不折叠一直显示 */ white-space: nowrap; /* CSS 有一个属性 overflow，它可以控制对于超出可视区域的内容如何解决 */ /* x轴可以滚动 */ overflow-x: scroll; /* y轴内容超出隐藏 */ overflow-y: hidden; /* height: 44px; */ background: green; color: white;}/* 伪选择器 */div > span { font-size: 20px; margin-right: 20px; line-height: 40px;}/* div 下的第一个元素 */div :first-child { margin-left: 15px;}/* div 下的最后一个元素 */div :last-child { margin-right: 15px;}#button { height: 40px; color: white; text-align: center; background-color: blue; width: 200px; margin: 100px auto; border-radius: 4px; line-height: 40px;}#d { color: red;}day6.js
function clickedScroll() { let getEle = document.getElementById('d'); if (getEle) { let navigation = document.getElementById('navigation'); if (navigation) { let wid = navigation.clientWidth / 2.0 - getEle.clientWidth / 2.0 - 15; navigation.scrollTo(wid, 0); } }}完整源码如下：
Github
参考：
第 6 天：设计一个左右滑动的菜单
web常见的五种前台布局方式
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » HTML- white-space 和 overflow 两个重要的 CSS 属性
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » HTML- white-space 和 overflow 两个重要的 CSS 属性
