您現在的位置是:電腦技術吧?>? 組裝維修 ??>??display inline,displayinline與浮動??>??正文詳情

display inline,displayinline與浮動

太史靜楓2019-11-08 12:11:48 人圍觀
簡介inline怎么用Display:inline block屬性在CSS中的使用當使用CSS來實現性能時,它經常會碰到屬性Display:inline block。無論是第一次接觸display在那里用

CSS中display:inline-block屬性用法  在使用CSS實現表現的時候,會經常接觸到display:inline-block這一屬性,無論是初接觸Web標準還是接觸標準已久的朋友,大都會對這一屬性感覺很迷惑和模糊。

  display:inline-block  將對象呈遞為內聯對象,但是對象的內容作為塊對象呈遞。

旁邊的內聯對象會被呈遞在同一行內,允許空格。

  但對于這個屬性不是所有瀏覽器都識別。

  支持的瀏覽器有:Opera、Safari  但很遺憾,最流行的IE和Firefox卻不支持這個屬性(據說下一版本的Firefox將會支持display:inline-block)。

不過Firefox下卻有私有屬性-moz-inline-box和inline-block形似,為什么是形似而不是神似呢?這是因為使用-moz-inline-box會帶來很多意想不到的后遺癥,比如使用這一屬性后,text-align有時候就會有問題,還得改用Firefox的私有屬性-moz-box-align來解決(謝謝aoao提供案例)。

  ◆建議:最好不要使用Firefox私有屬性-moz-inline-box。

  或許有朋友會對上面所說的IE也不支持display:inline-block屬性,表示疑問或者反對。

說:我在IE中對a或者span等內聯元素使用display:inline-block一直是有效的。

  其實不然,在IE中對內聯元素使用display:inline-block,IE是不識別的,但使用display:inline-block在IE下會觸發layout,從而使內聯元素擁有了display:inline-block屬性的表癥。

從上面的這個分析,也不難理解為什么IE下,對塊元素設置display:inline-block屬性無法實現inline-block的效果。

這時塊元素僅僅是被display:inline-block觸發了layout,而它本就是行布局,所以觸發后,塊元素依然還是行布局,而不會如Opera中塊元素呈遞為內聯對象。

  ◆延伸一個問題:IE下塊元素如何實現display:inline-block的效果?  有兩種方法:  1、先使用display:inline-block屬性觸發塊元素,然后再定義display:inline,讓塊元素呈遞為內聯對象(兩個display要先后放在兩個CSS聲明中才有效果,這是IE的一個經典bug,如果先定義了display:inline-block,然后再將display設回inline或block,layout不會消失)。

代碼如下(...為省略的其他屬性內容):  ExampleSourceCode  div{display:inline-block;...}  div{display:inline;}  2、直接讓塊元素設置為內聯對象呈遞(設置屬性display:inline),然后觸發塊元素的layout(如:zoom:1等)。

代碼如下:  ExampleSourceCode  div{display:inline;zoom:1;...}

版權聲明:本文由 太史靜楓 整理編輯。

原標題:imgdisplayinline,cssdisplay table

轉載注明出處:http://www.dn9ww09s.icu/assemble/11561.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 電腦系統緩存可以清理嗎,win7如何清理電腦內存

    電腦系統緩存可以清理嗎,win7如何清理電腦內存 相關圖片清理電腦c盤緩存文件我相信你們都遇到過這種情況。電腦在長時間使用后會越來越卡住。原因可能是系統在使用過程中生成了大量垃圾文件。一些正在運行的程序和瀏覽器緩存。一些用...

  • 網頁優化包括什么,網站怎么優化

    網頁優化包括什么,網站怎么優化 相關圖片如何提高性功前文綜述:有125個優化提示可以提高網頁的可用性(一)和125個優化提示可以提高網頁的可用性(二)不僅可以指導用戶,還可以減少他們的認知過程,保持流暢性讓用戶...

  • 筆記本話筒沒聲音怎么設置,筆記本電腦麥克風沒聲音怎么設置

    筆記本話筒沒聲音怎么設置,筆記本電腦麥克風沒聲音怎么設置 相關圖片電腦麥克風沒聲音我們現在基本上都用上了筆記本電腦,它的出現方便了我們的生活,有些用戶為了方便交流,會用筆記本進行語音聊天,但是有些倒霉的人遇到了筆記本麥克風沒有聲...

  • div文字居中對齊,div內文字上下居中

    div文字居中對齊,div內文字上下居中 相關圖片cssdiv文字行居中CSS不依賴于容器的底部來對齊文本布局參數,一個好的方法也更好。即使用position屬性來解決問題。請看下面的代碼,并使用位置的相對和絕對定位函數輕松地在didiv文字...

  • 筆記本處理器性能排行榜,筆記本處理器排行榜

    筆記本處理器性能排行榜,筆記本處理器排行榜 相關圖片十大筆記本電腦排名現在的趨勢是筆記本越來越普及,因為在日常操作和基本業務、娛樂、計算等操作中,筆記本電腦是完全稱職的但我們應該選擇什么品牌呢就性價比而言,宏碁和神...

  • 藍屏修復,系統藍屏怎么修復

    藍屏修復,系統藍屏怎么修復 相關圖片經常藍屏怎么辦藍屏的原因是什么?為什么電腦上經常出現藍屏?接下來,我會告訴你電腦藍屏的原因,希望能幫你排除故障,解決問題。電腦藍屏怎么了?電腦一打開,就出現藍屏問...

  • 網頁設計圖片,圖片設計

    網頁設計圖片,圖片設計 相關圖片折頁設計圖片從人類歷史開始,故事就在我們的交流中發揮了巨大的作用。僅僅因為我們在屏幕上講故事,而不是幾千年前圍坐在篝火旁,故事的吸引力還是一樣的。最有趣的是,故事...

  • 筆記本怎樣用流量上網,筆記本能用流量上網嗎

    筆記本怎樣用流量上網,筆記本能用流量上網嗎 相關圖片筆記本怎么用流量筆記本的出現給我們帶來了極大的便利,但同時也會遇到沒有網絡的尷尬局面。一些用戶不想購買網卡,而那些移動流量較大的用戶不知道在哪里使用,所以他們可以...

  • div左右對齊,div對齊方式

    div左右對齊,div對齊方式 相關圖片css水平居中對齊例如:divdiviv/div/div要在父div中水平對齊子div。如果您在CSS中編寫div{text align:Center;},您可以在ie中瀏覽而不html對齊...

  • 電腦顯示沒安裝音頻設備,怎么安裝電腦音頻設備

    電腦顯示沒安裝音頻設備,怎么安裝電腦音頻設備 相關圖片提示未安裝音頻設備計算機是一種非常重要的電子設備,也是我們生活和學習的工具之一。但有時用戶在使用電腦時會發現電腦里沒有聲音。當他們點擊電腦下面的揚聲器時,沒有安裝...

熱評文章

  • csv文件用什么打開,csv文件用什么打開手機

    csv文件用什么打開,csv文件用什么打開手機 相關圖片csv文件打開亂碼在windows系統環境中,可以遇到各種文件,CSV文件就是其中之一。如何打開CSV文件?其實,打開它的方法有很多,比如記事本、Excel、記事本 ,只要是文csv文件用excel打開...

  • 電腦遠程控制手機,手機如何遠程控制電腦

    電腦遠程控制手機,手機如何遠程控制電腦 相關圖片怎么遠程控制別人的電腦如果我說我可以通過手機遠程控制電腦,哦!它不是竊取別人的電腦信息,而是通過云技術讓生活更方便的技術。會不會不可思議?這是一種時尚,我需要領導...

  • html參考手冊,html文檔

    html參考手冊,html文檔 相關圖片HTML5所有標簽HTML5現在已經成為web開發的新標準,因此瀏覽器與HTML5的兼容性被用來區分它是否可以稱為現代瀏覽器。這也告訴我們,如果你是一個web開發人員,你必須了解HTML5手冊...

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

    電腦藍屏怎么解決,電腦開機藍屏怎么解決 相關圖片電腦藍屏按f2解決步驟有許多計算機用戶遇到了藍屏現象事實上,這個問題通常是由異常關機引起的,比如斷電、強制關機或重啟,這些都會在重啟電腦時發生。很多關鍵用戶沒有解決這...

  • 多列布局,多列等高布局

    多列布局,多列等高布局 相關圖片css3flex多列布局當我用CSS寫了幾天的三列布局的時候,我突然想到了這樣一種方法,我覺得這太瘋狂了。如果有什么問題,請給我一些建議當我需要寫一個三列布局時,我通常選擇使用以...

  • 電腦聲音圖標有個紅叉,電腦音量圖標有個紅叉

    電腦聲音圖標有個紅叉,電腦音量圖標有個紅叉 相關圖片電腦聲音圖標帶個?如果電腦聲音圖標上有一個紅色叉,但沒有聲音怎么辦?很多用戶都遇到過這個問題,不知道如何解決。其實,這個問題比較簡單。現在我們來談談具體的操作方法...

  • 筆記本調節風扇轉速,筆記本怎么調節風扇轉速

    筆記本調節風扇轉速,筆記本怎么調節風扇轉速 相關圖片臺式機風扇轉速調節一般來說,筆記本電腦的配置越高,在使用和操作過程中產生的熱量就需要消耗得越高。在這個時候,筆記本風扇是非常重要的然而,一些用戶的筆記本風扇轉速不...

  • 網頁優化方法,網頁優化包括什么

    網頁優化方法,網頁優化包括什么 相關圖片網絡優化到目前為止,本系列教程共有五章,共125個實用技能。每種技能都有一個案例比較,以確保其易于理解。今天的@corporate website design sel前端網頁優化...

  • 電腦設置開機密碼怎么設置,電腦設置開機密碼

    電腦設置開機密碼怎么設置,電腦設置開機密碼 相關圖片win7設置開機密碼密碼設置是為了用戶的信息安全,同時也是為了使您的計算機對其他人不可用。那么設置電腦開機密碼是最好的方法,但是很多用戶不知道如何設置電腦開機密碼。現在...

  • counter你,countervail

    counter你,countervail 相關圖片counter strike在css2.1中,支持的函數是counter()。使用它,您可以輕松地將序列號添加到頁面標題、塊和其他連續頁面內容中。有了它,你不必限制自己只使用來達到這個效果counterargume...

關注微信

变脸官网查询