CSS:overflow溢出显示隐藏

听海边涛声 2024-09-03 09:33:01 阅读 64

overflow是对溢出的部分显示隐藏,并不是对整个元素显示隐藏。即overflow属性指定了如果内容溢出一个元素的框(超过其指定的高度、宽度)时,会发生什么。

属性值 描述
visible 不剪切内容,也不添加滚动条
hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll 不管内容有没有溢出,总是显示滚动条
auto 溢出了自动显示滚动条,没有溢出就不显示滚动条

1)一般情况下,不想让溢出的内容显示出来,因为溢出的部分会影响布局。

2)针对有定位的盒子,想故意让它露出一块来,请慎用<code>overflow: hidden; 因为它会隐藏多余的部分。特别是故意超出的。

例如,下面的Hot图标是故意超出大盒子右边缘的,此时就不能用overflow: hidden;

在这里插入图片描述

示例:默认超出部分是显示的,等价于<code>overflow: visible;

<!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

<meta name="viewport" content="width=device-width, initial-scale=1.0">code>

<title>Document</title>

<style>

.box {

width: 200px;

height: 200px;

border: 3px solid pink;

margin: 100px auto;

}

</style>

</head>

<body>

<div class="box">code>

奥林匹克运动会起源于古希腊,因举办地点在奥林匹克而得名。传说古代奥运会是由众神之王宙斯所创始的。第1届古代奥运会于公元前776年举行,到公元394年共举行了293届。运动会每隔1417天即4年举行一届。后来人们将这一周期称为奥林匹克周期。随着近代体育的兴起,希腊人民希望恢复古代奥运会。在1859――1889年,希腊曾举办过4届奥运会,做了初步尝试。自1883年开始,法国人顾拜旦致力于古代奥运会的复兴。经他与若干代人的努力,国际奥林匹克委员会于1894年6月23日成立。顾拜旦制订的第一部奥林匹克宪章强调了奥林匹克运动的业余性,规定在奥运会上只授予优胜者荣誉奖,不得以任何形式发给运动员金钱或其他物质奖励。1896年4月6――15日,第一届奥林匹克运动会在雅典举行。

</div>

</body>

</html>

在这里插入图片描述

示例:溢出部分隐藏:<code>overflow: hidden;

<!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

<meta name="viewport" content="width=device-width, initial-scale=1.0">code>

<title>Document</title>

<style>

.box {

overflow: hidden;

width: 200px;

height: 200px;

border: 3px solid pink;

margin: 100px auto;

}

</style>

</head>

<body>

<div class="box">code>

奥林匹克运动会起源于古希腊,因举办地点在奥林匹克而得名。传说古代奥运会是由众神之王宙斯所创始的。第1届古代奥运会于公元前776年举行,到公元394年共举行了293届。运动会每隔1417天即4年举行一届。后来人们将这一周期称为奥林匹克周期。随着近代体育的兴起,希腊人民希望恢复古代奥运会。在1859――1889年,希腊曾举办过4届奥运会,做了初步尝试。自1883年开始,法国人顾拜旦致力于古代奥运会的复兴。经他与若干代人的努力,国际奥林匹克委员会于1894年6月23日成立。顾拜旦制订的第一部奥林匹克宪章强调了奥林匹克运动的业余性,规定在奥运会上只授予优胜者荣誉奖,不得以任何形式发给运动员金钱或其他物质奖励。1896年4月6――15日,第一届奥林匹克运动会在雅典举行。

</div>

</body>

</html>

在这里插入图片描述

只是隐藏溢出的部分,并没有删掉,通过检查可以发现:

在这里插入图片描述

示例: <code>overflow: scroll;不管有没有溢出,都显示滚动条

溢出了显示滚动条

<!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

<meta name="viewport" content="width=device-width, initial-scale=1.0">code>

<title>Document</title>

<style>

.box {

overflow: scroll;

width: 200px;

height: 200px;

border: 3px solid pink;

margin: 100px auto;

}

</style>

</head>

<body>

<div class="box">code>

奥林匹克运动会起源于古希腊,因举办地点在奥林匹克而得名。传说古代奥运会是由众神之王宙斯所创始的。第1届古代奥运会于公元前776年举行,到公元394年共举行了293届。运动会每隔1417天即4年举行一届。后来人们将这一周期称为奥林匹克周期。随着近代体育的兴起,希腊人民希望恢复古代奥运会。在1859――1889年,希腊曾举办过4届奥运会,做了初步尝试。自1883年开始,法国人顾拜旦致力于古代奥运会的复兴。经他与若干代人的努力,国际奥林匹克委员会于1894年6月23日成立。顾拜旦制订的第一部奥林匹克宪章强调了奥林匹克运动的业余性,规定在奥运会上只授予优胜者荣誉奖,不得以任何形式发给运动员金钱或其他物质奖励。1896年4月6――15日,第一届奥林匹克运动会在雅典举行。

</div>

</body>

</html>

在这里插入图片描述

没有溢出,也显示滚动条

<code><!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

<meta name="viewport" content="width=device-width, initial-scale=1.0">code>

<title>Document</title>

<style>

.box {

overflow: scroll;

width: 200px;

height: 200px;

border: 3px solid pink;

margin: 100px auto;

}

</style>

</head>

<body>

<div class="box">code>

奥林匹克运动会起源于古希腊,因举办地点在奥林匹克而得名。

</div>

</body>

</html>

在这里插入图片描述

示例:overflow: auto;溢出的时候才显示滚动条,不溢出就不显示滚动条

溢出了,显示滚动条

<code><!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

<meta name="viewport" content="width=device-width, initial-scale=1.0">code>

<title>Document</title>

<style>

.box {

overflow: auto;

width: 200px;

height: 200px;

border: 3px solid pink;

margin: 100px auto;

}

</style>

</head>

<body>

<div class="box">code>

奥林匹克运动会起源于古希腊,因举办地点在奥林匹克而得名。传说古代奥运会是由众神之王宙斯所创始的。第1届古代奥运会于公元前776年举行,到公元394年共举行了293届。运动会每隔1417天即4年举行一届。后来人们将这一周期称为奥林匹克周期。随着近代体育的兴起,希腊人民希望恢复古代奥运会。在1859――1889年,希腊曾举办过4届奥运会,做了初步尝试。自1883年开始,法国人顾拜旦致力于古代奥运会的复兴。经他与若干代人的努力,国际奥林匹克委员会于1894年6月23日成立。顾拜旦制订的第一部奥林匹克宪章强调了奥林匹克运动的业余性,规定在奥运会上只授予优胜者荣誉奖,不得以任何形式发给运动员金钱或其他物质奖励。1896年4月6――15日,第一届奥林匹克运动会在雅典举行。

</div>

</body>

</html>

在这里插入图片描述

没有溢出,不显示滚动条

<code><!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

<meta name="viewport" content="width=device-width, initial-scale=1.0">code>

<title>Document</title>

<style>

.box {

overflow: auto;

width: 200px;

height: 200px;

border: 3px solid pink;

margin: 100px auto;

}

</style>

</head>

<body>

<div class="box">code>

奥林匹克运动会起源于古希腊,因举办地点在奥林匹克而得名。

</div>

</body>

</html>

在这里插入图片描述



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。