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

回复

我来回复
  • 暂无回复内容