這篇“CSS中怎么使用overflow屬性”文章的知識點大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“CSS中怎么使用overflow屬性”文章吧。
創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、新蔡網(wǎng)絡(luò)推廣、小程序制作、新蔡網(wǎng)絡(luò)營銷、新蔡企業(yè)策劃、新蔡品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等,從售前售中售后,我們都將竭誠為您服務(wù),您的肯定,是我們最大的嘉獎;創(chuàng)新互聯(lián)公司為所有大學生創(chuàng)業(yè)者提供新蔡建站搭建服務(wù),24小時服務(wù)熱線:18982081108,官方網(wǎng)址:www.cdcxhl.com
CSS中overflow屬性介紹
overflow屬性規(guī)定如何處理如何處理不符合元素框的內(nèi)容。
◆用法如下:
Object.style.overflow=visible|hidden|scroll|auto。
◆參數(shù)介紹:
visible:內(nèi)容不會被修剪,會呈現(xiàn)在元素框之外。
hidden:內(nèi)容會被修剪,但是瀏覽器不會顯示供查看內(nèi)容的滾動條。
scroll:內(nèi)容會被修剪,但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。
auto:由瀏覽器決定如何顯示。如果需要,則顯示滾動條。
◆本例使用overflow來顯示溢出元素框的內(nèi)容:
viewsourceprint?
01 02 0304div{border:thinsolidgreen;width:100px;height:100px;} 05 06 07functionhideOverflow() 08{ 09document.getElementById("div1").style.overflow="hidden"; 10} 11 12 13 14 15 16Thisissometext.Thisissometext.Thisissometext. 17Thisissometext.Thisissometext.Thisissometext. 18Thisissometext.Thisissometext.Thisissometext. 19
相信大家都碰到過一種情況:沒有給父級div指定高度。希望他通過子級div的高度變化而自動適應??此坪芎唵危粘弥型鶎ψ蛹塪iv有更多要求,比如多重子級div、子級div左(右)浮動等等。這時就會碰到一種比較郁悶的情況:父級div無法隨著子級div的高度增加而增加,發(fā)生”脫層”的現(xiàn)象。這種時候就需要用到”overflow:hidden;”這個屬性了。表面意思來看他的作用是隱藏div層,而當我們給父級div應用這個屬性的時候會發(fā)現(xiàn)它神奇的變得自適應了。
對于table來說,假如table-layout屬性設(shè)置為fixed,則td對象支持帶有默認值為hidden的overflow屬性。如果設(shè)為hidden,scroll或者auto,那么超出td尺寸的內(nèi)容將被剪切。如果設(shè)為visible,將導致額外的文本溢出到右邊或左邊(視direction屬性設(shè)置而定)的單元格。
overflow:hidden---這樣超出部分會自動隱藏,這樣做不好的地方是就是這部分的信息顯示不完全,比如圖片只顯示了一部分,但是頁面布局不會亂。要注意的是,使用overflow的時候,一定要定義width,百分比或者具體值都可以。(在用ul和li做圖片列表排列的時候,也可以用這個,這樣避免一些大尺寸圖搞亂布局,也可以解決瀏覽器窗口縮小時,li元素自動回行排列出錯的問題)。用overflow:auto,還可以在頁面里模仿出IFRAME的效果。
以上就是關(guān)于“CSS中怎么使用overflow屬性”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。