HTML- white-space 和 overflow 两个重要的 CSS 属性

CSS的作用是给 HTML 元素添加样式和布局,接下来利用CSS
white-spaceoverflow 这两个属性让元素实现左右滑动,效果如下:

左右滑动的菜单.gif

点击按钮 day4-前端 菜单会滚动到中间,在iOS中想要实现这种效果还是比较简单的,接下来看看在前端中实现这种效果的要点有哪些?

一、所有的菜单项单行显示,不换行

前端的默认布局方式是 流式布局块级元素 在流式布局中独占一行,块级元素会自上而下的排列且在默认宽度是父类元素的100%而高度默认被内容撑开,例如 div内联元素 在流式布局中只占自身的大小,会默认从左向右排列,如果一行中不足以容纳所有的内联元素,则换到下一行,继续自左向右,例如 span
我们要的是单行显示,所以使用 span 标签就能实现我们要的效果,但是还要 不换行,这时就要利用 CSSwhite-space 属性了,它会告诉浏览器遇到 空格 该怎么处理(这里的空格不是单纯意义上的空格)。它的默认值是 nomal ,就是遇到空格字符就会折叠,而另外一个属性 nowrap 恰好与它相反,意思是不折叠一直显示,刚好满足我们的需求。

二、菜单可以左右滑动

CSS 中有一个属性 overflow 可以控制对于超出可视区域的内容如何处理。从下面的注释可以知道我们要选择 scroll ,上下左右滑动可以通过 overflow-xoverflow-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常见的五种前端布局方式

推荐阅读更多精彩内容

  • day01­_起源和结构 结构:Xhtml xml 表现:CSS 行为:DOM ECMAScript 以上都属于W...
    Sakura_明妃阅读 408评论 0 1
  • 关于css常见问题,大多是移动端的。 简单的排版规则:条目与条目之间空两行,每条内容部分分段空一行。标点符号全部用...
    苏水儿阅读 4,174评论 0 9
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,175评论 0 6
  • 概述: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 一、注释: CSS注释以 "/*" 开始,...
    进入web前端阅读 1,207评论 0 8
  • 第1章一切都是真的 ‘滴答滴答’,当时钟的指针指向十二点,突兀的报时声响彻在孤寂的客厅。 餐桌上坐了一个女人。 看...
    可爱木阅读 3,797评论 1 3
  • 今天是1月1日,是元旦,是2020年的元旦,既是去年2019年的终点站,也是新年2020年的起始站。 昨天去年我还...
    浅墨兰香阅读 217评论 0 5