【CSS】overflow中scroll和hidden的区别是什么？，CSS中overflow属性下scroll和hidden的区别解析

摘要：在CSS中，overflow属性用于处理元素内容超出其框的情况。scroll和hidden是overflow属性的两个常用值。scroll值表示当内容超出容器时，显示滚动条以查看隐藏的内容。而hidden值则表示当内容超出容器时，隐藏超出的部分，不会显示滚动条。简而言之，scroll允许用户滚动查看隐藏内容，而hidden则直接隐藏超出内容。

在CSS中，overflow属性用于处理元素内容溢出其容器时的情况，overflow: scroll; 和 overflow: hidden; 是该属性的两种常见值，它们决定了当内容超出容器尺寸时，如何显示或隐藏内容。

一、overflow: scroll;

当元素的内容超出其尺寸时，如果设置为scroll，浏览器会在元素的容器内部提供滚动条（或滚动机制），这样，用户就可以滚动查看所有的内容，即使内容没有溢出，在某些浏览器中，滚动条也可能会显示，这一设置通常用于确保内容不会被裁剪，并且用户可以访问到所有内容，即使这些内容超出了初始的视图范围。

二、overflow: hidden;

当元素的内容超出其容器尺寸时，如果设置为hidden，超出部分的内容将被完全隐藏，不会显示滚动条，这意味着用户无法通过滚动来查看隐藏的内容，溢出的部分对于用户来说是不可访问的，这种设置通常用于确保内容不会超出元素的边界，以保持布局的整洁和可控。

示例对比

为了更好地理解这两种属性的差异，我们可以看一个具体的示例。

假设我们有一个固定尺寸的容器，里面包含大量的文本或图片，如果我们使用overflow: scroll;，即使内容超出了容器的边界，用户也可以通过滚动条查看所有内容，而如果我们使用overflow: hidden;，超出部分的内容将被完全隐藏，用户无法访问。

为了更好地展示这两种属性的效果差异，可以插入一张对比图。

图中左侧展示的是overflow: scroll;的效果，右侧展示的是overflow: hidden;的效果，通过对比，可以清晰地看到两种属性在处理内容溢出时的不同表现。