overflow-x 屬性用法簡單介紹

antzone發表於2017-04-04

此屬性規定是否對水平方位內容超出容器的部分進行裁切。

語法結構:

[CSS] 純文字檢視 複製程式碼
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。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<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的時候，內容是可見的，無論是否超出的容器元素的寬度，超出的部分顯示在容器外面。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<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的時候，元素水平方向上超出容器的部分會被裁切。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<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的時候，無論元素在水平方向上是否超出容器，都會有滾動條出現。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<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的時候，當元素在水平方位上不超出，那麼就沒有滾動條，如果超出，那麼就出現滾動條。

相關文章