通过《CSS盒子模型》一节的学习css滚动条美化，我们知道页面上的每个元素都可以看成是一个圆形的袋子，我们可以通过CSS来控制袋子的大小、位置等信息。 默认情况下，当元素中的内容超过包的大小时，例如元素内容区域的长度和高度形成的圆形区域不足以容纳元素中的内容时，部分内容将被隐藏。溢出袋子。
1.overflow 为了更好的处理溢出的内容，CSS提供了一个叫做overflow的属性，它可以设置如何处理溢出元素的内容区域的内容。 该属性的可选值如下表所示：
数值描述
可见的
默认值，不处理溢出内容，内容会显示在元素内容区域之外
隐
隐藏溢出元素内容区域的内容
滚动
隐藏溢出元素内容区域的内容，并在元素两侧和下方创建滚动条css滚动条美化，滑动滚动条即可查看元素内所有内容
汽车
如果内容溢出，会在元素右侧创建一个滚动条，通过滑动滚动条可以查看元素内的所有内容
继承
继承父元素的overflow属性值
【示例】使用overflow属性设置如何处理元素内容区域溢出的内容：
div {
width: 550px;
height: 100px;
margin-top: 20px;
border: 1px solid red;
}
div.hidden {
overflow: hidden;
}
div.scroll {
overflow: scroll;
}
div.auto {
overflow: auto;
}
visible：默认值，对溢出的内容不做处理，内容会在元素内容区之外显示；
hidden：隐藏溢出元素内容区的内容；
scroll：隐藏溢出元素内容区的内容，并在元素的左侧和下方分别创建一个滚动条，通过滑动滚动条可以查看元素中的所有内容；
auto：如果出现内容溢出，则会在元素左侧创建一个滚动条，通过滑动滚动条可以查看元素中的全部内容；
inherit：从父元素继承 overflow 属性的值。
visible：默认值，对溢出的内容不做处理，内容会在元素内容区之外显示；
hidden：隐藏溢出元素内容区的内容；
scroll：隐藏溢出元素内容区的内容，并在元素的左侧和下方分别创建一个滚动条，通过滑动滚动条可以查看元素中的所有内容；
auto：如果出现内容溢出，则会在元素左侧创建一个滚动条，通过滑动滚动条可以查看元素中的全部内容；
inherit：从父元素继承 overflow 属性的值。
visible：默认值，对溢出的内容不做处理，内容会在元素内容区之外显示；
hidden：隐藏溢出元素内容区的内容；
scroll：隐藏溢出元素内容区的内容，并在元素的左侧和下方分别创建一个滚动条，通过滑动滚动条可以查看元素中的所有内容；
auto：如果出现内容溢出，则会在元素左侧创建一个滚动条，通过滑动滚动条可以查看元素中的全部内容；
inherit：从父元素继承 overflow 属性的值。
运行结果如下图所示：
图：overflow属性的demo
2.overflow-x和overflow-y在CSS3中也提供了overflow-x和overflow-y两个属性，它们的功能与overflow属性类似，并且属性的可选值与overflow属性相同，其中哪个：
提示：当overflow-x或overflow-y的一个属性设置为不可见时，另一个属性将被手动设置为auto。 另外，由于CSS3还不是最终草案，这两个属性的效果可能会改变或调整。
发表评论