专栏首页iOS开发随笔HTML- white-space 和 overflow 两个重要的 CSS 属性

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

CSS的作用是给 HTML 元素添加样式和布局,接下来利用CSSwhite-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常见的五种前端布局方式

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML-JavaScript动态添加元素appendChild

    开始自学一下前端的基础知识,这里记录一下知识点,毕竟不熟,不记录很容易就忘记了。前端最佳的学习资料就是在MDN,没有之一。

    傅_hc
  • iOS uicollectionreusableview xib 拖不了线

    傅_hc
  • Unity项目嵌入现有iOS项目的方法

    傅_hc
  • 手风琴图片和钢琴导航栏JQ滑动特效

    Dream城堡
  • 【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第七节)

    剽悍一小兔
  • 博客改造升级

    之前写的个人博客确实有点太丑了,最近重写了一番。做了移动端适配,增加了文章标签以及做了相册等功能。 看着很不错。talk is cheap,show me yo...

    前端博客 : alili.tech
  • Flutter | 求求你们了,切换 Widget 的时候加上动画吧

    那如何在 Flutter 当中切换 Widget 的时候加上特效?完成这样的效果?

    Flutter笔记
  • Community Cloud零基础学习(二)信誉等级设置 & Global Search设定

    当我们创建了Community以后,我们需要对他进行定制页面来使community用户更好的使用。此篇主要描述两点,信誉等级设定以及Global Search ...

    用户1169343
  • (转)利用个人电脑搭建网站WEB服务器域名访问

    本文转载:http://www.cnblogs.com/fangpage/archive/2011/11/22/prowebserver.html

    跟着阿笨一起玩NET
  • 到底什么是光通信?

    随着科技发展,人们生活方式在通信方面有了巨大的改变,从原来的无线电通信到有线通信,再到现在到处都在被提及的光通信。

    鲜枣课堂

扫码关注云+社区

领取腾讯云代金券