本文主要是介绍css元素溢出 overflow，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
仅供学习，转载请注明出处
css元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。
下面来逐个演示一下元素溢出的处理情况。
首先编写一个元素溢出的页面
<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">div{width: 200px;height: 200px;border: 1px solid #000;background-color: gold;}</style>
</head>
<body><div>当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。</div>
</body>
</html>
浏览器显示如下：
那么应该怎么来处理溢出的部分呢？
先用overflow:hidden的方式，将溢出的部分进行隐藏
从上面的结果来看，直接隐藏了起来固然是好，但是有时候能不能设置为滚动条，可以下拉看看呢？
用scroll来设置滚动条
可以从上面看出有两条滚动条，很明显下方的滚动条是不需要的，如果只要一边的滚动条就好了，该怎么做呢？
用auto来自动判断设置滚动条
可以看出，只有右边有滚动条了，因为判断只有下方有溢出部分，所以只要有右边滚动条就可以往下拖拉查看了。
关注微信公众号，回复【资料】、Python、PHP、JAVA、web，则可获得Python、PHP、JAVA、前端等视频资料。
这篇关于css元素溢出 overflow的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
