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

    
    
    
    
    


    
前端小课
    

    

        day1-前端
        day2-前端
        day3-前端
        day4-前端
        day5-前端
        day6-前端
    

    
    
点击滚动菜单

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常见的五种前端布局方式