overflow-x 属性用法简单介绍
分类：实例代码
此属性规定是否对水平方位内容超出容器的部分进行裁切。
语法结构:
overflow-x: visible|hidden|scroll|auto
参数说明:
（1）.visible:默认值。不进行裁切，内容可能会超出在容器之外。
（2）.hidden:进行裁切，超出的内容会被裁切掉。
（3）.scroll:无论是否超出容器，都会具有滚动条。
（4）.auto:如果内容超出容器，那么就会提供滚动条机制。
浏览器兼容:
（1）.IE浏览器支持此属性。
（2）.谷歌浏览器支持此属性。
（3）.火狐浏览器支持此属性。
（4）.opera浏览器支持此属性。
（5）.safria浏览器支持此属性。
特别说明:IE8和IE8以下浏览器不支持overflow-x:hidden。
代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
div{
width:150px;
height:200px;
background:#ccc;
overflow-x:visible;
}
</style>
</head>
<body>
<div>
<img src="demo/CSS/img/redstar.gif">
</div>
</body>
</html>
当值为visible的时候，内容是可见的，无论是否超出的容器元素的宽度，超出的部分显示在容器外面。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
div{
width:150px;
height:200px;
background:#ccc;
overflow-x:hidden;
}
</style>
</head>
<body>
<div>
<img src="demo/CSS/img/redstar.gif">
</div>
</body>
</html>
当值为hidden的时候，元素水平方向上超出容器的部分会被裁切。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
div{
width:150px;
height:200px;
background:#ccc;
overflow-x:scroll;
}
</style>
</head>
<body>
<div>
<img src="demo/CSS/img/redstar.gif">
</div>
</body>
</html>
当值为scroll的时候，无论元素在水平方向上是否超出容器，都会有滚动条出现。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
div{
width:150px;
height:200px;
background:#ccc;
overflow-x:auto;
}
</style>
</head>
<body>
<div>
<img src="demo/CSS/img/redstar.gif">
</div>
</body>
</html>
当值为auto的时候，当元素在水平方位上不超出，那么就没有滚动条，如果超出，那么就出现滚动条。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu