首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML- white-space 和 overflow 两个重要的 CSS 属性

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

作者头像
傅_hc
发布2020-03-20 12:37:18
2.5K0
发布2020-03-20 12:37:18
举报
文章被收录于专栏:iOS开发随笔iOS开发随笔

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

左右滑动的菜单.gif
左右滑动的菜单.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常见的五种前端布局方式

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、所有的菜单项单行显示,不换行
  • 二、菜单可以左右滑动
  • 五、点击按钮,让某个菜单滚动到中间
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档