溢出属性(容器的)
💡说明: overflow:visible / hidden / scroll / auto / inherit
visible:默认值,溢出内容会显示在元素之外hidden:溢出内容会隐藏scroll:溢出的内容以滚动的方式显示auto:如果有溢出的内容以滚动的方式显示,如果完全显示则不出现滚动条inherit:遵从父元素继承overflow的属性overflow -x:auto 如果内容溢出,则出现x轴(横向)滚动显示overflow -y:auto 如果内容溢出,则出现y轴(纵向)滚动显示
代码演示1.overflow:visible
<style>div {width: 200px;height: 200px;background-color: rgb(153, 250, 250);border: 1px solid black;overflow: visible;}</style><body><div><p>超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。在本教程中,您将学习如何使用HTML 来创建站点。 HTML 很容易学习!相信您能很快学会它!</p></div></body>
执行结果
代码演示2.overflow:hidden
<style>div {width: 200px;height: 200px;background-color: rgb(153, 250, 250);border: 1px solid black;overflow: hidden;}</style><body><div><p>超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。在本教程中,您将学习如何使用HTML 来创建站点。 HTML 很容易学习!相信您能很快学会它!</p></div></body>
执行结果
代码演示-3.overflow:scroll
<style>div {width: 200px;height: 200px;background-color: rgb(153, 250, 250);border: 1px solid black;overflow: scroll;}</style><body><div><p>超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。在本教程中,您将学习如何使用HTML 来创建站点。 HTML 很容易学习!相信您能很快学会它!</p></div></body>
执行结果
代码演示-4.overflow:auto
<style>div {width: 200px;height: 200px;background-color: rgb(153, 250, 250);border: 1px solid black;overflow: auto;}</style><body><div><p>超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。在本教程中,您将学习如何使用HTML 来创建站点。 HTML 很容易学习!相信您能很快学会它!</p></div></body>
执行结果
代码演示-5.overflow:inherit
<style>div {width: 200px;height: 200px;background-color: rgb(153, 250, 250);border: 1px solid black;overflow: visible;}p {overflow: inherit;}</style><body><div><p>超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。在本教程中,您将学习如何使用HTML 来创建站点。 HTML 很容易学习!相信您能很快学会它!</p></div></body>
执行结果
代码演示-6.overflow -x:auto 和 overflow -y:auto
<style>div {width: 200px;height: 200px;background-color: rgb(153, 250, 250);border: 1px solid black;overflow: visible;}</style><body><div><p>超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。在本教程中,您将学习如何使用HTML 来创建站点。 HTML 很容易学习!相信您能很快学会它!</p></div></body>
执行结果
总结
💡使用scroll属性是无论内容是否溢出都会出现滚动栏,而auto是内容溢出是出现滚动显示,内容不溢出则不出现滚动显示,也不会出现滚动栏
溢出案例
<style>*{margin: 0;padding: 0;}#box{width: 890px;height: 290px;/* background-color: skyblue; */margin: 0 auto;overflow: auto;border: 1px solid black;}.info{width: 162px;height: 112px;border: 1px solid black;float: left;margin-right: 48px;margin-bottom: 20px;}.info div{width: 162px;height: 84px;background-color: #cccccc;font-size: 12px;}.info .price{height: 63px;line-height: 63px;padding-left: 21px;color: #666;}.info .date{padding-left: 21px;color: #666;}.info .category{background-color: white;height: 28px;line-height: 28px;text-align: center;font-size: 12px;}.info:hover div{background-color: skyblue;/* color: white; */}.info:hover .price{color: white;}.info:hover .date{color: white;}</style></head><body><div id="box"><div class="info"><div><p class="price">$100.00元</p><p class="date">有效期至:-10-10</p></div><p class="category">[店铺类][商城类]</p></div><div class="info"><div><p class="price">$100.00元</p><p class="date">有效期至:-10-10</p></div><p class="category">[店铺类][商城类]</p></div><div class="info"><div><p class="price">$100.00元</p><p class="date">有效期至:-10-10</p></div><p class="category">[店铺类][商城类]</p></div><div class="info"><div><p class="price">$100.00元</p><p class="date">有效期至:-10-10</p></div><p class="category">[店铺类][商城类]</p></div><div class="info"><div><p class="price">$100.00元</p><p class="date">有效期至:-10-10</p></div><p class="category">[店铺类][商城类]</p></div><div class="info"><div><p class="price">$100.00元</p><p class="date">有效期至:-10-10</p></div><p class="category">[店铺类][商城类]</p></div><div class="info"><div><p class="price">$100.00元</p><p class="date">有效期至:-10-10</p></div><p class="category">[店铺类][商城类]</p></div><div class="info"><div><p class="price">$100.00元</p><p class="date">有效期至:-10-10</p></div><p class="category">[店铺类][商城类]</p></div><div class="info"><div><p class="price">$100.00元</p><p class="date">有效期至:-10-10</p></div><p class="category">[店铺类][商城类]</p></div><div class="info"><div><p class="price">$100.00元</p><p class="date">有效期至:-10-10</p></div><p class="category">[店铺类][商城类]</p></div></div></body>
执行结果截图