您現在的位置是:電腦技術吧?>? 編程技術 ??>??inline-block,inlineblock張鑫旭??>??正文詳情

inline-block,inlineblock張鑫旭

嚴流如2019-11-27 13:51:48 人圍觀
簡介div blockDisplay:inline block:很多前端用戶都知道,它的功能是將對象顯示為inline對象,但對象的內容顯示為block對象有以下代碼:CSS codinlineblock間隙

display:inline-block:眾前端們都知道,其作用是將對象呈遞為內聯對象,但是對象的內容作為塊對象呈遞。

  有如下代碼  CSS Code復制內容到剪貼板

  1. div class=ac-btn a href=# class=btn-save/a
  2. a href=# class=btn-print/a /div
  3. .ac-btn a{background:url(../img/action.png) no-repeat;width:73px;height: 25px;display: inline-block;}
  4. .ac-btn .btn-save{background-position: 0 0;} .ac-btn .btn-print{background-position: -73px 0;}
  這樣呈現的如下  2個元素之間有間隙,那么問題來了  為什么會出現間隙?  原因是inline-block允許空格,出現空隙的罪魁禍首就是包括換行在內的空白符。

  如何消除間隙?  對父級元素設置font-size:0  即上述CSS代碼改為  CSS Code復制內容到剪貼板  .ac-btn {font-size:0;}  .ac-btn a{background:url(../img/action.png) no-repeat;width:73px;height: 25px;display: inline-block;}  .ac-btn .btn-save{background-position: 0 0;}  .ac-btn .btn-print{background-position: -73px 0;}  block,inline和inlinke-block細節對比  display:block  1.block元素會獨占一行,多個block元素會各自新起一行。

默認情況下,block元素寬度自動填滿其父元素寬度。

  2.block元素可以設置width,height屬性。

塊級元素即使設置了寬度,仍然是獨占一行。

  3.block元素可以設置margin和padding屬性。

  display:inline  1.inline元素不會獨占一行,多個相鄰的行內元素會排列在同一行里,直到一行排列不下,才會新換一行,其寬度隨元素的內容而變化。

  2.inline元素設置width,height屬性無效。

  3.inline元素的margin和padding屬性,水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果;但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

  display:inline-block  簡單來說就是將對象呈現為inline對象,但是對象的內容作為block對象呈現。

之后的內聯對象會被排列在同一行內。

比如我們可以給一個link(a元素)inline-block屬性值,使其既具有block的寬度高度特性又具有inline的同行特性。

版權聲明:本文由 嚴流如 整理編輯。

原標題:inlineblock什么意思,inlineblock有空隙

轉載注明出處:http://www.dn9ww09s.icu/program/14601.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 京東第三方的是正品嗎,京東付款后怎么取消訂單

    京東第三方的是正品嗎,京東付款后怎么取消訂單 相關圖片京東取消訂單 又想要了百度閱讀是一款非常實用的閱讀學習軟件,很多人喜歡用它來看書。那么如何下載百度閱讀的書籍呢?接下來,超人軟件編輯將介紹如何下載百度閱讀iPhone版圖書...

  • fontsize屬性,font和fontsize

    fontsize屬性,font和fontsize 相關圖片css font size定義并使用font size屬性設置字體大小描述此屬性設置元素的字體大小。注意,它實際上設置了字體中字符框的高度;實際字符字體可能比這些框高或短(通常短),每個fontsi...

  • office密匙激活,office激活密鑰在哪

    office密匙激活,office激活密鑰在哪 相關圖片怎么激活office如果你只想使用word和excel,忍受銀屑病的一般廣告在界面上,你可以使用Office2010的初級版本,但是激活Office2010只是幾個步驟,并且在激活microsoft密鑰激活...

  • 百度閱讀書架的書怎么下載,百度閱讀下載的書導出

    百度閱讀書架的書怎么下載,百度閱讀下載的書導出 相關圖片百度閱讀的電子書如何下載百度閱讀是一款非常實用的閱讀學習軟件,很多人喜歡用它來看書。那么如何下載百度閱讀的書籍呢?接下來,超人軟件編輯將介紹如何下載百度閱讀iPhone版...

  • transition多個屬性,transition屬性功能

    transition多個屬性,transition屬性功能 相關圖片opacity屬性首先,我將引用w3school關于轉換的基本知識:定義和使用transition屬性是一個速記屬性,用于設置四個轉換屬性:transition屬性transittextarea的屬性...

  • cd系列合集視頻,猛士的士高第一集原版

    cd系列合集視頻,猛士的士高第一集原版 相關圖片荷東猛士第一集mp3夢幻迪斯科,源于法語迪斯科,在英語中被稱為大師混音。因為它的發音和粵語中的孟氏相似,所以被命名為孟氏,意思是播放錄制的舞曲的舞廳。從香港飛猛士第一...

  • 由淺入深,由淺入深的解釋

    由淺入深,由淺入深的解釋 相關圖片由淺入深的深的詞語一套操作界面和適當的動態互動反饋,可以給用戶帶來更好的操作體驗;一個H5操作宣傳頁和酷炫動畫特效,從加載動畫,形成動態效果,絕對有助于近兩年的傳播和...

  • 車載高德導航沒有聲音,高德手機導航沒聲音了

    車載高德導航沒有聲音,高德手機導航沒聲音了 相關圖片高德導航提示音作為一款非常實用的旅游導航軟件,很多小朋友出門時都會用它來導航,但有時難免會遇到無聲無息的情況。如果導航系統沒有聲音怎么辦?接下來,超人軟件編輯將向...

  • ing的用法規則,三單的用法

    ing的用法規則,三單的用法 相關圖片ing變化規則口訣At規則是一個聲明,它為CSS的執行或行為提供指令。每個聲明都以@開頭,后跟一個可用的關鍵字,該關鍵字充當標識來指示CSS應該做什么。這是一個通用語法,盡管每個...

  • 摩拜隱形貼紙,摩拜618貼紙

    摩拜隱形貼紙,摩拜618貼紙 相關圖片摩拜成立我不知道我的朋友們是否收集了貼紙來贏得520元現金獎。幾天后,端午節就要到了。這次,安卓版摩比單車又推出了5款食品貼紙收藏活動。這次能拿到多少現金摩拜單車要押金...

熱評文章

  • N5手機,360手機N5

    N5手機,360手機N5 相關圖片360n5手機參數昨天360發布了一款新手機,升級版為360n5。那么360n5和360n5有什么區別呢?哪個更好?今天的超人編輯為您帶來了360n5和360n5雙360n5s手機參數...

  • 手機桌面壁紙怎么設置,桌面壁紙

    手機桌面壁紙怎么設置,桌面壁紙 相關圖片vivo桌面壁紙自動切換你厭倦了一層桌面壁紙嗎?每個用戶都喜歡將自己喜愛的圖片設置為桌面墻紙。不時更換桌面壁紙會很麻煩。事實上,我們可以為桌面壁紙設置動態開關,這將使桌...

  • 鎖定透明度怎么使用,PDF使用了透明度

    鎖定透明度怎么使用,PDF使用了透明度 相關圖片pr怎么使用透明度注:RGBA(R,G,B,a)值:R:紅色值。正整數|百分比G:綠色值。正整數百分比B:藍色值。正整數百分比A:α透明度。值介于0和1之間這里是一種白色,使用rCAD顯示透明...

  • 榮耀暢玩5x參數配置,榮耀暢玩7參數配置

    榮耀暢玩5x參數配置,榮耀暢玩7參數配置 相關圖片榮耀暢玩7手機參數榮耀最近發布了一些新產品,被稱為青年4件套。其中,玩6A最受關注,今天,超人編輯為您帶來6A的配置參數和真機圖形的榮耀和享受,讓您快速了解這款榮耀的全新...

  • 比值可以是整數嗎,比值和最簡整數比

    比值可以是整數嗎,比值和最簡整數比 相關圖片整數比是什么V如何將一個整數轉換成一個百分比之前已經提到過。使用百分比值代替整數值來表示紅色、綠色和藍色原色的數量。最后的結果是一樣的。0代表0%,255代表100%。要使0是整...

  • office2010激活工具使用步驟,如何使用office2010激活工具

    office2010激活工具使用步驟,如何使用office2010激活工具 相關圖片office激活不激活區別對于整天與Office2010打交道的小型合作伙伴,必須熟悉工具Office2010工具包。除了在功能上受到很大限制的主版本外,其他版本都需要激活office2010永久密鑰25...

  • 什么是偽元素,偽元素和偽類

    什么是偽元素,偽元素和偽類 相關圖片偽類和偽元素區別思維方式很簡單,一個字寫兩遍,一個字只顯示一部分,但不能真正寫一個字兩遍。這里我們需要使用CSS偽元素:before和:after。記住這個偽元素的偽字以指示它偽類元...

  • 有沒有什么好玩的功能,手機有什么好玩的功能

    有沒有什么好玩的功能,手機有什么好玩的功能 相關圖片微信有什么好玩的功能最近,很多朋友來問超人軟件編輯,谷歌開發的Google allo非常有趣。那么谷歌allo有哪些有趣的功能呢?今天,超人軟件將帶給你谷歌,阿洛有什么游戲好玩...

  • 流量卡好做嗎,如何做好私域流量

    流量卡好做嗎,如何做好私域流量 相關圖片做直播用什么流量卡好這與其說是一個HTML5推廣的問題,不如說是一個如何獲得品牌移動流量的問題這是雙11期間(11.10-11.16)從第三方數據統計公司獲得的H5頁面流量分布圖:流量微商好...

  • 安全守護2手表時間設置,安全守護手表如何重置

    安全守護2手表時間設置,安全守護手表如何重置 相關圖片安全守護手表怎么聯網安全手表是一種安全手表定位軟件,它可以保護用戶的安全,進行實時定位。安全值班具有安全監控、健康管理等多種功能。實時在線系統定位,讓您實時掌握家...

關注微信

变脸官网查询