Style overflow属性的使用 ------------------内容超出部分使用滚动条显示隐藏的内容

最新推荐文章于 2024-08-10 12:02:24 发布

@湖

最新推荐文章于 2024-08-10 12:02:24 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript Java 文章标签： javascript 前端 css3 html5

本文链接：https://blog.csdn.net/m0_56245143/article/details/129653276

本文介绍了CSS的overflow属性，包括visible、hidden、scroll和auto四个值的使用，展示了如何控制内容超出元素框时是否显示滚动条以及内容的可见性。同时，文中还提及了三层架构的概念，解释了其目的和分层方式，强调了高内聚、低耦合的原则在软件开发中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Style overflow属性的使用 ------------------内容超出部分使用滚动条显示隐藏的内容

介绍和使用

style的overflow属性设置或者返回如何处理呈现在元素框外面的内容。(在网页中使用到的地方很多)

visible

超出元素框的部分内容直接显示到框外，设置overflow的默认设置，不修剪

在这里插入图片描述

示例代码：

#d1{
   
   
            height: 400px;
            width:800px;
            border: 2px black solid;
            border-radius: 5px;
            overflow: visible;/*使用visible默认超出部分显示到元素边框外面，内容不会被修剪*/
            background-color: #ececec;
            color: black;
            font-size: 20px;
        }

<h1>d1-------------</h1>
    <div id="d1">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;三层架构就是为了符合“高内聚，低耦合”思想，把各个功能模块划分为表示层（UI）、业务逻辑层（BLL）和数据访问层（DAL）三层架构，
            各层之间采用接口相互访问，并通过对象模型的实体类（Model）作为数据传递的载体，
            不同的对象模型的实体类一般对应于数据库的不同表，
            实体类的属性与数据库表的字段名一致。 [1] </p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;三层架构区分层次的目的是为了 “高内聚，低耦合”。
            开发人员分工更明确，将精力更专注于应用系统核心业务逻辑的分析、设计和开发，
            加快项目的进度，提高了开发效率，有利于项目的更新和维护工作。</p>
            含义
            <p>&nbsp;&nbsp;&nbsp;&nbsp;三层架构主要是指将业务应用规划中的表示层 UI、数据访问层 DAL 以及业务逻辑层 BLL，
            其分层的核心任务是“高内聚低耦合”的实现。在整个软件架构中，分层结构是常见和普通的软件结构框架，
            同时也具有非常重要的地位和意义。这种三层架构可以在软件开发的过程中，划分技术人员和开发人员的具体开发工作，
            重视核心业务系统的分析、设计以及开发，提高信息系统开发质量和开发效率，进而为信息系统日后的更新与维护提供很大的方便。 [4]
            怎么样分层符合三层架构原则呢？主要有以下三种分层方式： [3] </p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;1、数据层不包含任何代码，只有数据库，还有相关的存储过程。这种模式下，数据层看起来就变得很简单了。
            只包含所建立的数据库和一些存储过程（注意是存储过程）。</p>
    </div>

对应效果:

在这里插入图片描述

hidden

超出框的内容会被修剪，即不显示，浏览器也不会有滚动条**(注：如果需要实现点击将隐藏部分显示可用js实现)**

在这里插入图片描述

示例代码：

#d2{
            height: 400px;
            width:800px;
            border: 2px black solid;
            border-radius: 5px;
            overflow: hidden;/*使用hidden内容会被修剪，元素框以外的内容也不会显示，浏览器也不会有滚动条*/
            background-color: #ececec;
            color: black;
            font-size: 20px;
        }

<h1 id="h12">d2-------------</h1>
    <div id="d2">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;三层架构就是为了符合“高内聚，低耦合”思想，把各个功能模块划分为表示层（UI）、业务逻辑层（BLL）和数据访问层（DAL）三层架构，
            各层之间采用接口相互访问，并通过对象模型的实体类（Model）作为数据传递的载体，
            不同的对象模型的实体类一般对应于数据库的不同表，
            实体类的属性与数据库表的字段名一致。 [1] </p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;三层架构区分层次的目的是为了 “高内聚，低耦合”。
            开发人员分工更明确，将精力更专注于应用系统核心业务逻辑的分析、设计和开发，
            加快项目的进度，提高了开发效率，有利于项目的更新和维护工作。</p>
            含义
            <p>&nbsp;&nbsp;&nbsp;&nbsp;三层架构主要是指将业务应用规划中的表示层 UI、数据访问层 DAL 以及业务逻辑层 BLL，
            其分层的核心任务是“高内聚低耦合”的实现。在整个软件架构中，分层结构是常见和普通的软件结构框架，
            同时也具有非常重要的地位和意义