overflow属性详解

这篇具有很好参考价值的文章主要介绍了overflow属性详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

overflow属性详解_桃花扇J的博客-CSDN博客_overflow属性

原链接

overflow是对溢出内容的处理,有四个属性值visible,hidden,scroll,auto,且可以分别设置overflow-x,overflow-y,需要注意的是:当单独设置了overflow-x或者overflow-y为非visible时,另一个属性值默认为auto,如【例5】。下面先来介绍它的四个属性值.

1.visible(默认值):使溢出内容展示【例1】

2.hidden:隐藏溢出内容且不出现滚动条【例2】

3.scroll:隐藏溢出容器的内容,溢出的内容可以通过滚动呈现【例3】

4.auto:与scroll没啥区别(就是scroll和auto还是有细微差别的。auto只有在内容溢出后才显示滚动条,内容不溢出不显示,有点而“智能”,scroll即使内容不溢出也显示滚动条)【例4】

【例1】visible

效果

overflow属性详解

代码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        .wrapper {
            position: absolute;
            left: 100px;
            top: 100px;
            width: 200px;
            height: 200px;
            border: 1px solid #333;
            border-radius: 10px;
            color: #424242;
            overflow: visible;
        }
 
        .content {
            width: 250px;
            height: 250px;
            padding: 20px;
            border: 1px solid #33f;
            border-radius: 10px;
            background-color: rgba(200, 255, 200, 0.5);
 
        }
    </style>
</head>
 
<body>
    <div class="wrapper">
        <div class="content">
            <p>
                我们在之前的一本著作中研究群体观念对各国发展的影响时已经指出,每一种文明都是少数几个基本观念的产物,这些观念很少能够得到革新。我们指出,这些观念在群体的心中是多么稳固,要想对这一过程产生影响是多么困难,以及这些观念一旦实现之后所拥有的力量。最后我们又说,历史的波动就是这些基本观念的改变所引发的结果。
            </p>
        </div>
    </div>
</body>
 
</html>

【例2】hidden:将属性值设置为hidden

效果

overflow属性详解 

【例3】scroll:将属性值设置为scroll

效果

overflow属性详解

【例4】auto:将属性值设置为auto

效果

overflow属性详解

【例5】设置overflow-x:hidden,不设置overflow-y;

效果

overflow属性详解 

笔者注意到,此时即使设置overflow-y为visible,也不能实现水平放向隐藏,垂直方向显示,垂直方向依旧是auto;
 文章来源地址https://www.toymoban.com/news/detail-487246.html

到了这里,关于overflow属性详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【web框架】——Django——如桃花来

    web框架就是一个骨架和开发的一系列工具的集合。我们只需要通过一些工具稍作修饰即可完成一个作品。方便web开发 , 不需要一直做一些重复性的操作。 相当于一个半成品 web框架的存在可以减少应用开发的周期 , 提高效率与质量 ; 降低维护成本。 所有的web框架的本质就

    2024年02月07日
    浏览(32)
  • 【字典详细介绍】——python基础——如桃花来

    字典里面的数据是以键值对的形式出现,和数据顺序无关,可以避免顺序出错从而查找不到数据 字典不支持下标 符号为大括号 各个键值对之间用逗号隔开 冒号前面的称为键(key),冒号后面的称为值(value) 不可变类型才能作为键,但值就无所谓了 1.直接使用大括号: 2.采用语

    2024年02月05日
    浏览(45)
  • 【正则表达式上】——03全栈开发——如桃花来

    正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特殊字符及这些特定字符的组合,组成一个 “规则字符串” , 这个“规则字符串”用来表达对字符串的一种 逻辑过滤。 非python独有 python里面是使用re模块来实现的,不需要额外进行安装,是python内置模

    2024年02月02日
    浏览(36)
  • 【开源】基于JAVA+Vue+SpringBoot的桃花峪滑雪场租赁系统

    基于JAVA+Vue+SpringBoot+MySQL的桃花峪滑雪场租赁系统,包含了滑雪场、门票预定、滑雪教练聘请、器材租赁归还、规章制度等模块,分为管理后台和微信小程序端,还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基

    2024年01月24日
    浏览(91)
  • 5. MySQL - JDBC & SQL 注入 &博客系统(万字详解)

    目录 1. 介绍 2. 使用 JDBC 连接数据库 2.1 如何使用 JDBC 连接数据库 2.2 导入的各个类 2.3 DataSource 对象的创建 2.4 从 DataSource 对象中得到 Connection 对象 2.5 创建 Statement 对象 2.6 从 ResultSet 中遍历每行结果,从每行中获取每列的值 2.7 代码汇总 3. PrepareStatement 详解 3.1 动态 SQL 执行

    2024年02月16日
    浏览(33)
  • SqlServer2016下载安装步骤详解 SQL Server2016的彻底删除_还能坚持的博客-CSDN博客_sqlserver2016完全卸载

    Windows 下安装sql server 2016(附安装包资源)_极光稻草人的博客-CSDN博客_sql server 2016 安装链接: 链接:https://pan.baidu.com/s/1rPG8Ya4jSbhmHvFCDzTVew  提取码:MXJ0 如果原来以及安装过sqlServer2016或其他版本的,需彻底删除,可参考: 遇到的问题: 1.polybase要求安装orcale jre 7更新 51或更

    2024年02月05日
    浏览(109)
  • Android 读取系统属性详解

             Android 系统属性主要有两种:SettingsProvider 和 SystemProperties 。 /data/system/users/0/ 下的对应xml文件: settings_global.xml settings_secure.xml settings_system.xml 状态值进行存储: frameworks/base/packages/SettingsProvider/src/com/android/providers/settings/DatabaseHelper.java 设置的成员定义: framework

    2024年02月05日
    浏览(47)
  • Flex布局常用属性详解

    在电脑PC端,使用浮动,定位同时使用像素px单位就可以完成大部分布局,而且布局完之后不会有大问题,但是到了移动端,移动设备的屏幕尺寸多种多样,从小屏幕的智能手机到大屏幕的平板电脑,甚至是可穿戴设备,简单地运用和PC端一样的方式就会出现一些布局和排列的

    2024年02月12日
    浏览(47)
  • RabbitMQ消息属性详解

    如同各种标准化的HTTP规范,content-type传输消息体的MIME类型。例如,如果你的应用程序正在发送JSON序列化的数据值,那么将content-type属性设置为application/json将允许尚待开发的消费者应用程序在收到消息时检查消息类型并对消息进行正确解码。 在 RabbitMQ 中,默认的 content-typ

    2024年02月16日
    浏览(31)
  • 『华为云耀云服务器实战』|云服务器如何快速搭建个人博客(图文详解)

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 Docker Compose是一个用于定义和运行多个 Docker 容器的工具,负责快速的部署分布式应用。可以轻松解决由多个相互依赖的服务组成,启动、停止和扩展整个应用程序

    2024年02月22日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包