css overflow溢出显示隐藏

lxl211

已于 2022-10-05 19:45:10 修改

阅读量1.9k

点赞数

分类专栏： css 文章标签： css 前端

于 2022-10-05 19:36:38 首次发布

本文链接：https://blog.csdn.net/lxllxl211/article/details/127175766

版权

css 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

有定位的盒子慎用overflow: hidden;因为他会隐藏多余的部分
/* 默认的 /
overflow: visible;
/ 溢出的部分隐藏 /
overflow: hidden;
/ 溢出的部分显示滚动条不溢出也显示*/
overflow: scroll;
/* 超出的时候显示滚动条，不超出不显示 */

1、display显示隐藏元素，但不保留位置
2、vsiibility显示隐藏元素，但是保留原来的位置
3、overflow溢出隐藏元素，但只是对溢出部分处理

代码例子

<style>
        div{
            /* 默认的 */
            overflow: visible;
            
            width: 200px;
            height: 200px;
            background-color: pink;
        }
     </style>
</head>
<body>
    <div>
        方舟：生存进化》 [3]  采用的是虚幻引擎4打造，游戏的画面相当之华丽，无论是怪物模型的质感还是场景内的铺垫都相当的真实和强大，然而也正因为这款游戏的高特效和高画质导致这款游戏的配置要求高的离谱，虽然官方提供的推荐配置并不是相当的高，然而真正游戏内的表现却是一个天上一个地上，最高特效的游戏和最低特效的游戏内容根本不能比较，简直就是两个游戏，次时代的画面以及超强的画面表现能力造就了这款游戏次时代大作之名，同时也因为如此变成了一款显卡杀手，作者的电脑居然带不动这款游戏的最高配置!甚至连中等配置都无法保持30帧的帧数。游戏诞生的岛屿相当大，岛内包含丛林，火山以及海洋等等地形，不同的地形包含不同的怪物以及植物，各种景观做的相当真实，而官方也同时公布了这款游戏将推出70种不同的怪物与我们进行战斗，不同的挑战以及冒险才是这款游戏真正的魅力所在。 [9] 
    </div>

默认是：overflow: visible;
运行结果：
在这里插入图片描述
将默认改为 overflow: hidden;
运行结果：隐藏了溢出的部分

将 overflow: hidden;改为overflow: scroll;
运行结果：溢出的部分显示滚动条不溢出也显示

将overflow: scroll;改为 overflow: scroll;
运行结果：超出的时候显示滚动条，不超出不显示
在这里插入图片描述

lxl211

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css overflow溢出显示隐藏

将 overflow: hidden;改为overflow: scroll;将overflow: scroll;改为 overflow: scroll;有定位的盒子慎用overflow: hidden;/* 超出的时候显示滚动条，不超出不显示 */将默认改为 overflow: hidden;运行结果：溢出的部分显示滚动条不溢出也显示。默认是：overflow: visible;运行结果：超出的时候显示滚动条，不超出不显示。溢出的部分显示滚动条不溢出也显示*/运行结果：隐藏了溢出的部分。
复制链接

扫一扫