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来自动判断设置滚动条
可以看出，只有右边有滚动条了，因为判断只有下方有溢出部分，所以只要有右边滚动条就可以往下拖拉查看了。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.01.24 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录