當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

overflow 的各种用法

發布時間：2024/5/14 编程问答 48 豆豆

生活随笔收集整理的這篇文章主要介紹了 overflow 的各种用法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、首先來了解一下overflow
overflow：內容溢出時的設置，可以設置對象是否顯示滾動條，
overflow-x：指水平方向內容溢出時的設置
overflow-y：指垂直方向內容溢出時的設置
它們設置的值為visible、scroll、hidden、auto。

visible是默認值。使用這個值時，無論設置的"width"和"height"的值是多少，其中的內容無論是否超出范圍都會被強制顯示出來。
hidden效果與visible相反。任何超出"width"和"height"的內容都會不可見。
scroll無論內容是否超出范圍，都會顯示滾動條。
auto當內容超出范圍時，自動顯示滾動條，否則不顯示。

例如：
1.瀏覽器窗口不出現滾動條：
a.沒有水平滾動條：<body?style="overflow-x:hidden">
b.沒有垂直滾動條：<body?style="overflow-y:hidden">
c.沒有滾動條：<body?style="overflow-x:hidden;overflow-y:hidden">
?或<body?style="overflow:hidden">
2.讓多行的文本隱藏滾動條：
a.沒有水平滾動條：<textarea?style="overflow-x:hidden"></textarea>
b.沒有垂直滾動條：<textarea?style="overflow-y:hidden"></textarea>
c.沒有滾動條：<textarea?style="overflow-x:hidden;overflow-y:hidden"></textarea>
?或<body?style="overflow:hidden"></textarea>

二、設定滾動條的顏色
在瀏覽網頁的時候我們有時可以看到有許多網頁滾動條顏色不是系統默認的，而是漂亮的粉紅色或其它顏色，其實只要在網頁代碼中加入一些代碼就可以實現。
DIY屬于你自己的滾動條，將這些代碼加入到<head></head>中間。

<style?type="text/css">　　
　　　　
　　</Style>　

三、最后看一個具體運用
這是我的photo頁面為方便瀏覽照片時添加滾動條的代碼：

<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312">
<title>dragon★龍的相冊</title>
<style?type="text/css">

</style>
</head>
<body>
<div?id="tiao">
<img?src="myphoto/luori/lr1.jpg"/>
<img?src="myphoto/luori/lr2.jpg"/>
<img?src="myphoto/luori/lr3.jpg"/>
<img?src="myphoto/luori/lr4.jpg"/>
<img?src="myphoto/luori/lr5.jpg"/>
</body>
</html>

總結

以上是生活随笔為你收集整理的overflow 的各种用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

overflow

上一篇： TF之Transformer：基于ten
下一篇：基于Minifilter框架的文件过滤驱