[CSS]溢出彻底捕获!说明如何使用滚动和隐藏

“何时使用溢出?”,
“溢出能做什么?”

有人有这样的印象吗?我不知道何时使用它。当然,溢出不是您经常使用的属性,知道它当然很有用,但是大多数人不知道何时主动使用它?

这次,我将向从未听说过或使用过溢出的人解释如何使用它。当然,我不认为这是学习的重点,但在这一点上它具有很强的影响力。当创建原因未知的裕量时,这尤其令人鼓舞。我不会使用它那么困难,所以请借此机会来掌握它。

本文是为初学者编写的,因此有经验的用户应在必要时略过它。

[也推荐][对于初学者]仔细解释如何编写CSS(样式表)

溢出的基本作用

首先,overflow属性是CSS属性,当内容超出元素的大小时,将用于处理零件。实际上,当您在Web上工作时,您可能会意外地将元素扩展到超出预期的宽度,或者产生难以理解的边距。在这种情况下,请使用此属性。用法很简单,只需为相应的元素设置溢出,如下所示。

.セレクタ{
  overflow: 値
}

您也可以编写如下。如果输入以下内容,则值1适用于水平方向(水平方向),值2适用于垂直方向(垂直方向)。如果只有一个值,则认为设置了相同的值,并且在垂直和水平方向上的效果相同。这与设置overflow-x和overflow-y相同,这将在后面说明。这类似于“边框”设置。稍后我们将看到,此值有四种类型。

.セレクタ{
  overflow: 値1, 値2
}

适用对象

不能将每个对象都使用此溢出。可以使用的元素是固定的。不能用于内联元素。请记住,可以使用以下三个主要元素。以下不是全部,而是主要内容。

  • 块元素
  • 内联块元素
  • 表格单元格

基本角色

溢出角色具有基本角色。它是关于如何显示元素中不适合内容的规范。换句话说,在与显示相关的设置中使用它是基本的,例如是否可以显示元素之外的内容,或者是否要显示它完全包含在元素中。

应用角色

但是,有时将其用于其预期目的以外的目的。例如,它可用于释放浮子。它具有与clearfix和clearboth相同的效果。因此,有些人将溢出理解为一种去除浮标的方法,但是请理解,这与原始用法有所不同。

让我们看看如何使用一次。如下所示,在包装类中放置了两个p标签,除了包装器之外还放置了一个p标签。

<div class="container">
  	<div class="wrapper">
  		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  	</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

关键是p标签的宽度设置为30%,float:left设置为css。

.wrapper p{
	width: 30%;
	float: left;
}

显示如下。您可以看到,由于float:left的影响,除wrapper类之外的p标签正在右包装。

您可以使用溢出来防止这种回绕。作为测试,尝试在包装器类(父元素)中设置“ overflow:hidden;”。关键是我们为父元素包装器设置了溢出。这确定了父元素的包装的高度和宽度,并且不再允许其伸出。

.wrapper p{
	width: 30%;
	float: left;
}

.wrapper{
	overflow: 隐;
}

请记住,溢出还具有防止浮标缠绕的效果。在本文中,我将解释如何使用它。

溢出值类型

溢出可以采用四个不同的值。也许您最常使用的是“滚动”或“隐藏”。

描述
可见 这是初始值。这超出了要素。换句话说,它什么都不做。
滚动 设置此选项后,元素的垂直和水平尺寸是固定的,并显示滚动条。通过滚动可以看到突出的内容。
设置后,将隐藏除元素范围以外的零件。
汽车 如果设置了该选项,则扩展到元素之外的部分的处理将委托给浏览器。通常,如果设置了此选项,将显示滚动条。在这方面与滚动相同。因此,如果要有目的地进行设置,最好使用滚动。

如何使用溢出

现在,让我们设置每个值并检查行为。

可见

这是默认值,如果未设置溢出则设置。换句话说,元素的大小显示在大小之外。

.wrapper p{
        border:solid 1px blue;
     height:80px;
	overflow: 可见;
	
}

p标签的元素显示在边框之外。

滚动

如果使用scroll的值,则滚动条将显示在元素内部,并且可以在滚动的同时保持元素的大小来查看内容。

.wrapper p{
        border:solid 1px blue;
     height:80px;
	overflow: 滚动;
	
}

您可以看到滚动条显示在右端,如下所示。元素下方还显示了类似滚动条的设计,但不能用作条。只能使用竖线。其原因是滚动值是水平和垂直设置的。

如果设置以下内容(空白:nowrap;),则会在下面显示滚动条。

.wrapper p{
        border:solid 1px blue;
     height:80px;
	overflow: 滚动;
	white-space: nowrap;
}

隐是隐藏除set元素以外的显示的功能。如果存在不适合该元素的内容,则使其不可见。

.wrapper p{
	border:solid 1px blue;
	width:100%;
	height:80px;
	overflow: 滚动;
	white-space: nowrap;
}

检查以下内容。字符被中途切除,因为所有元素都被隐藏了。

此效果也可以用于图像,并且可以通过设置父元素的宽度和高度并设置隐藏元素来裁剪图像。这意味着,通过确定父元素的框架,超出其范围的子元素将被隐藏。因此,溢出用于父元素。

汽车

这将过程留给浏览器,但是基本结果与滚动相同。

.wrapper p{
        border:solid 1px blue;
     height:80px;
	overflow: 汽车;
	
}

如何使用overflow-x和overflow-y

与overflow类似的属性是overflow-x和overflow-y。可以采用四种类型的值,与溢出相同。

描述
溢出x 处理在水平方向上突出的部分。
溢出 处理在垂直方向上突出的部分。

这些溢流x和y设置在垂直和水平上都不相同,但是在进行单独设置时会使用。例如,如果您进行如下设置,则滚动将同时在垂直和水平方向上进行设置,因此显示将如下所示,并且还将显示overflow-x(水平滚动)。

.wrapper p{
	border:solid 1px blue;
	width:80%;
	height:80px;
      overflow: 滚动;
}

如果要使其看起来不错,请执行以下操作删除多余的显示器。

.wrapper p{
	border:solid 1px blue;
	width:80%;
	height:80px;
      溢出: 滚动;
}

显示水平滚动时也是如此。但是,在水平方向上,只要内容适合元素内部,就不会显示水平滚动条,因此,如果要显示它,则可以放置“空白:无环绕;”等..

如何使用溢出总结

溢出是用作对策的属性。在大多数情况下,当您想将其放置在元素内部时,尤其是在出现问题时,可以使用该元素,因为该元素将显示在外部。因此,您应该特别熟悉如何使用“隐藏”。

撰写本文的人

田中 陽介

我在越南开展业务,并且从事与人事相关的咨询业务。我离开日本已经八年了,我享受着日本不可能发生的事情。最近,我正在使用Ruby on Rails进行Web服务。