溢出属性(容器的)
💡说明: 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>
执行结果截图
