您現在的位置是:電腦技術吧?>? 基礎知識 ??>??overflow:hidden,overflow屬性hidden??>??正文詳情

overflow:hidden,overflow屬性hidden

冠悅怡2019-11-08 10:41:56 人圍觀
簡介address overflow溢出:隱藏是一種常用的CSS樣式,但大多數人對這種樣式的理解僅限于隱藏溢出,并不知道浮動的含義。當談到清除浮動時,我們會想到另一種CSS樣式:clear:botoverflow

overflow:hidden這個CSS樣式是大家常用到的CSS樣式,但是大多數人對這個樣式的理解僅僅局限于隱藏溢出,而對于清除浮動這個含義不是很了解。

一提到清除浮動,我們就會想到另外一個CSS樣式:clear:both,我相信對于這個屬性的理解大家都不成問題的。

但是對于浮動這個詞到底包含什么樣的含義呢?我們下面來詳細的闡述一下。

  這是一個常用的div寫法,下面我們來書寫樣式。

大家可以在DMX中自己做試驗  #box{  width:500px;  background:#000;  height:500px;  }  #content {  float:left;  width:600px;  height:600px;  background:red;  }  給box這個div加了一個overflow:hidden這個屬性解決了這個問題。

我們直到overflow:hidden這個屬性的作用是隱藏溢出,給box加上這個屬性后,我們的content 的寬高自動的被隱藏掉了。

另外,我們再做一個試驗,將box這個div的高度值刪除后,我們發現,box的高度自動的被content 這個div的高度值給撐開了。

  說到這里,我們再來理解一下浮動這個詞的含義。

  我們原先的理解是,在一個平面上的浮動,但是通過這個試驗,我們發現,這不僅僅是一個平面上的浮動,而是一個立體的浮動!也就是說,當content 這個div加上浮動這個屬性的時候,在顯示器的側面,它已經脫離了box這個div,也就是說,此時的content 的寬高是多少,對于已經脫離了的box來說,都是不起作用的。

  打個形象的比喻就是當JJ脫離BB的時候,JJ的大小對于BB是沒有撐開的作用的(有點少兒不宜的感覺-_-|||) OK,當我們全面的理解了浮動這個詞的含義的時候,我們就理解overflow:hidden這個屬性中的解釋,清除浮動是什么意思了。

也就是說,當我們給box這個div加上overflow:hidden這個屬性的時候,其中的content 等等帶浮動屬性的div的在這個立體的浮動已經被清除了,就好比JJ又進入了BB內,JJ的大小自然又會影響到BB的大小。

這就是overflow:hidden這個屬性清除浮動的準確含義。

  當我們沒有給box這個div設置高度的時候,content 這個div的高度,就會撐開box這個div,而在另一個方面,我們要注意到的是,當我們給box這個div加上一個高度值,那么無論content 這個div的高度是多少,box這個高度都是我們設定的值。

而當content 的高度超過box的高度的時候,超出的部分就會被隱藏。

這就是隱藏溢出的含義!  火狐里面解釋的就是這個意思(float的屬性就是立體漂浮,IE7和火狐都是這個意思了,IE6是不管外面的層的屬性content 會直接撐開box的),所以才在 height的auto屬性中加入!important這個值!讓他在IE7中優先執行這個命令兒忽略overflow:hidden;這個命令!

版權聲明:本文由 冠悅怡 整理編輯。

原標題:css hidden,hidden

轉載注明出處:http://www.dn9ww09s.icu/basics/11539.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 筆記本電腦怎么連wifi熱點,筆記本連不上熱點

    筆記本電腦怎么連wifi熱點,筆記本連不上熱點 相關圖片筆記本連接手機熱點連不上WiFi是一種允許電子設備連接到無線局域網的技術現在智能手機的用戶越來越受歡迎為了解決朋友“斷線”的“恐懼”和流量不足的問題,可以用筆記本打開...

  • 三星筆記本電腦系統還原,三星筆記本怎么一鍵還原系統

    三星筆記本電腦系統還原,三星筆記本怎么一鍵還原系統 相關圖片三星系統還原在使用計算機系統的過程中,不可避免地會遇到各種系統問題當問題嚴重時,如藍屏、死機、黑屏,我們通常選擇重新安裝系統來解決但是,重新安裝系統需要很多時間。...

  • 帶虛線的箭頭,怎么在圖片上標出帶箭頭的虛線

    帶虛線的箭頭,怎么在圖片上標出帶箭頭的虛線 相關圖片帶箭頭的示意圖怎么做注意:1拖動箭頭時,畫布中的線條繪圖將自動重新計算該點2。Canvas沒有帶虛線的API,因為它對API不太熟悉,所以不好玩。在網上找到的三。箭頭出來后,單擊畫...

  • 筆記本電腦電池不充電怎么辦,筆記本電腦電池不充電

    筆記本電腦電池不充電怎么辦,筆記本電腦電池不充電 相關圖片筆記本充電很多人都想知道如何給筆記本電池充電的問題的答案,因為這關系到筆記本電池的壽命,也是如此。很多人通常應該忽略這個小問題一旦電池沒電了,他們就會做出反應,不...

  • 3D制作,3d圖怎么制作

    3D制作,3d圖怎么制作 相關圖片3D視頻制作下面的教程將教您如何使用CSS3生成3D文本。本文是從3D CSS陰影文本教程翻譯而來的這個簡單的CSS文本陰影教程將一步一步地教你如何通過疊加多層陰影來創建33D動畫設計...

  • 電腦開機進不去系統,電腦開機進不了系統怎么辦

    電腦開機進不去系統,電腦開機進不了系統怎么辦 相關圖片電腦可以開機但是黑屏隨著計算機的普及,它在方便我們生活的同時,也帶來了很多麻煩如果電腦無法開機進入系統,那就是我們經常遇到的麻煩。但問題最終會解決的。下一步,小編...

  • 如何解決筆記本漏電,筆記本漏電怎么辦

    如何解決筆記本漏電,筆記本漏電怎么辦 相關圖片筆記本usb漏電筆記本電腦已經成為我們的重要工具之一,給我們帶來了極大的便利。不過,也有一些用戶在使用過程中遇到它,在電腦外殼上觸摸它會感到觸電很多朋友想知道解決辦法...

  • iframe 跨域,iframe跨域傳值

    iframe 跨域,iframe跨域傳值 相關圖片iframe跨域別的網站postmessage允許多個窗口/幀跨域傳輸數據和信息。這是窗戶的使用方法PostMessage的工作原理以及如何在Firefox、IE8 、opera、Saiframe跨域原理...

  • 電腦開機藍屏怎么解決,電腦經常藍屏怎么辦

    電腦開機藍屏怎么解決,電腦經常藍屏怎么辦 相關圖片筆記本電腦藍屏怎么解決在我們的日常生活中,我們在使用電腦時經常會遇到電腦藍屏的問題,那么如何解決電腦藍屏的問題呢?其實藍屏的原因有很多,但一般都是硬件和驅動程序不...

  • html5幻燈片,html如何做幻燈片

    html5幻燈片,html如何做幻燈片 相關圖片js 幻燈片超簡單幻燈片由HTML5和CSS3實現,鼠標滾輪用于頁面切換。!doctype htmlhtml標題/標題樣式幻燈片{位置:絕對;左:0px;上:0px;高jquery幻燈片...

熱評文章

  • 怎么設置默認瀏覽器,修改默認瀏覽器設置

    怎么設置默認瀏覽器,修改默認瀏覽器設置 相關圖片打開瀏覽器現在各種瀏覽器層出不窮有時為了滿足用戶的需求,很多用戶會在電腦上安裝多個瀏覽器,因此他們會爭先恐后地將自己設為默認瀏覽器。如何修改默認瀏覽器?現在,小編...

  • 畫布canvas,多個canvas畫布

    畫布canvas,多個canvas畫布 相關圖片canvas清除畫布后重繪HTML5的畫布非常強大。它可以很容易地繪制貝塞爾曲線使用其畫布。它方便您將來使用,特別是用于共享實現代碼。有此要求者,請參考以下代碼:!DOCTYPE HTMcanvas畫...

  • 筆記本鍵盤字母出現數字,筆記本鍵盤字母變數字

    筆記本鍵盤字母出現數字,筆記本鍵盤字母變數字 相關圖片筆記本鍵盤數字隨著筆記本電腦的逐步推廣,一些小問題會不時出現,這讓人們感到有些麻煩發現有些字母鍵被按下后變成數字一些用戶仍然認為鍵盤壞了,影響了操作怎么解決現在,...

  • 靈活變通的意義,靈活排位有什么意義

    靈活變通的意義,靈活排位有什么意義 相關圖片做事靈活如果使用得當,向CSS文件添加注釋可以幫助您和開發過程中的其他人最常見的是為CSS樣式規則添加提示,但是使用注釋也可以幫助優化組織結構并改進實用工具提示和標簽是靈...

  • 電腦應用程序沒有響應怎么辦,電腦所有程序都不響應

    電腦應用程序沒有響應怎么辦,電腦所有程序都不響應 相關圖片電腦突然很卡目前,物質生活水平有所提高,電腦的使用越來越多,但用戶也會遇到電腦故障,尤其是女生一旦電腦出故障,他們就不知道如何處理,最常見的是電腦運行速度有多慢。...

  • 頁面加載,網頁加載不出來

    頁面加載,網頁加載不出來 相關圖片頁面訪問預加載是一種瀏覽器機制,它使用瀏覽器空閑時間來預下載/加載用戶下一步可能瀏覽的頁面/資源。當用戶訪問一個預先加載的鏈接時,如果他們從緩存中點擊,頁面可以快速顯...

  • dlink無線網卡怎么用,dlink無線網卡

    dlink無線網卡怎么用,dlink無線網卡 相關圖片無線網卡眾所周知,CPU以外的硬件設備是實現更多功能的工具,因此驅動程序在系統中起著重要的作用。因此,需要使用dlink無線網卡的用戶必須下載dlink無線網卡驅動程序無線網卡怎么...

  • 電腦打不開機怎么解決,電腦怎么打開機

    電腦打不開機怎么解決,電腦怎么打開機 相關圖片筆記本電腦打不開機怎么解決想必,用戶一定遇到過電腦無法開機的情況。很多人會在網上咨詢,“如果我不能打開電腦,我能做什么?”一些人會立即打電話給電腦維護人員進行維修...

  • 能位匹配原理,能崗匹配原理

    能位匹配原理,能崗匹配原理 相關圖片檔位跟速度怎么匹配看看一個簡單的CSS:div?divbox P span紅色{顏色:紅色;}。根據我們對這個CSS的理解,瀏覽器首先查找ID為divbox的div元素,然后查找檔速度如何匹配...

  • 傳輸文件,怎樣用文件傳輸助手傳輸文件

    傳輸文件,怎樣用文件傳輸助手傳輸文件 相關圖片文件傳輸助手是什么當兩臺計算機在局域網中不可避免地需要傳輸文件時,在文件傳輸過程中會有很多限制。我們需要逐個設置這些限制,這樣就可以輕松地使用文件傳輸如何傳輸文件...

關注微信

变脸官网查询