【CSS】彻底捕获!使用滚动和隐藏等。

“你什么时候使用溢出?”
“我能溢出什么?”

有没有人有这样的印象?它是一个不知道现在使用的时间的财产。当然,溢出不是常用的财产,当然,如果你知道,它是有用的,但没有任何不知道你是否可以随时积极使用?

这一次,我没有听到溢出,解释那些从未被使用过的人。当然,作为学习的优先级,我们不会想到高质量,但这是一种感觉,它在这里是一种存在的存在感。特别是,它是一个强壮的盟友,例如当不理解原因的边缘出生时。我不想用它很难,所以请掌握这个机会。

本文为初学者写道,所以请根据需要跳过经验丰富的人。

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

溢出的基本作用

首先,溢出属性是用于处理该部分如果内容超出元素的大小的CSS属性。事实上,如果您正在推广Web生产,则可能不会认为元素将传播或理解假设的宽度。此时,我们使用此属性。简单地使用并简单地将溢出设置为相应的元素,如下所示。

.セレクタ{
  overflow: 値
}

以下写作是可能的。如果按如下方式写入,则将值1应用于水平方向(水平方向),并且值2适用于垂直方向(垂直方向)。如果只有一个值,则认为设置相同的值且相同的效果是相同的。这与稍后描述的设置溢出-x和溢出-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>

CSS是将P标签宽度设置为30%并浮动:左。

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

显示屏如下。我想我可以看到除了包装类以外的p标签是否用float转向右侧:左效果。

您可以使用溢出来防止此时间。尝试设置溢出:隐藏;“在Lapper类中,这是父元素。重点是溢出被设置为父元素包装器。这决定将决定父元素包装器的高度和宽度,并且无法摆脱它。

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

.wrapper{
	overflow: hidden;
}

通过这种方式,请记住溢出具有防止浮动流动的效果。在本文中,我们将解释原始用法。

溢出值类型

溢出可以采取四种类型的值。也许经常使用是“滚动”或“隐藏”。

描述
可见的 这是初始值。这将来自元素。换句话说,不要做任何事情。
滚动 设置此设置修复元素的垂直和水平方向,并显示滚动条。通过滚动可以看到从那里出来的内容。
如果设置为此,则将隐藏除元素范围之外的部分。
汽车 如果设置了这一点,则将从元素中出现的部分的处理将委派给浏览器。通常,如果设置此项,将显示滚动条。这与滚动相同。因此,如果您设置的目的,则滚动会更好。

如何使用溢出

所以,让我们设置每个值并检查行为。

可见的

这是初始值,如果未设置溢出,则设置此设置。也就是说,发出元素的大小并显示出来。

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

从边框到P标签元素显示。

滚动

当您拍摄滚动值时,您可以在元素中看到滚动条,并且可以通过滚动查看元素大小的同时查看内容。

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

您可以看到滚动条显示在右边缘,如下所示。滚动条设计也显示在元素下方,但不能用作栏。只能使用垂直条。为什么它是这样的,因为滚动的值也在它旁边设置。

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

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

隐藏是一个隐藏设置元素以外的显示的函数。如果存在不适合元素的内容,则不会看到它。

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

请检查以下内容。角色是中途的,因为它不是元素以外的可见。

该效果可用于图像,将宽度和高度设置为父元素,并通过设置隐藏来设置图像。这就是说,通过确定父元素的帧,它不会看到您无法看到的子元素。因此,溢出用于父元素。

汽车

这是一个浏览器来委派该过程,但基本结果与滚动不同。

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

如何使用溢出-x和overflow-y

overflow-x.和overflow-y是类似于溢出的属性。可以采取的值与溢出相同。

描述
overflow-x. 处理稍后暴露的部分。
溢出-Y. 处理已在垂直方向上绘制的部分。

此溢出-x和y设置不是垂直和水平的,但用于设置单个设置。例如,如果设置如下,设置垂直和水平侧向,因此显示器如下,并显示溢出-x(水平滚动)。

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

如果要使它看起来像个外观,则额外的显示器会消失如下。

.wrapper p{
	border:solid 1px blue;
	width:80%;
	height:80px;
      overflow-y: scroll;
}

如果要显示横向滚动,这是相同的。但是,在水平方向上,只要内容在元素内,就不会显示水平滚动条,因此如果显示,则可能希望显示“空白空间:nowrap;”等。

使用溢出摘要

溢出是用于采取行动的属性。如果发生某些东西,尤其是显示和显示元素,因此在要将其放入元素时主要使用它。因此,熟悉“隐藏”的使用是良好的。

给这篇文章的人

田中 陽介

越南的企业家和人力资源相关咨询。七年已经过去了日本,但我享受了一个不能在日本完成的驼峰。最近我在铁路上用Ruby制作网络服务。