當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

overflow 的各种用法

發(fā)布時間：2024/5/14 编程问答 45 豆豆

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

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

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

例如：
1.瀏覽器窗口不出現(xiàn)滾動條：
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>

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

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

三、最后看一個具體運(yùn)用
這是我的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>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

overflow

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