CSS的inline、block與inline-block

elva 發(fā)布于2019-08-29 15:38 / 851人閱讀

摘要：基本知識(shí)點(diǎn)行內(nèi)元素一般是內(nèi)容的容器，而塊級(jí)元素一般是其他容器的容器，行內(nèi)元素適合顯示具體內(nèi)容，而塊級(jí)元素適合做布局。行內(nèi)元素去除了之間的莫名空白。當(dāng)為行內(nèi)元素進(jìn)行定位時(shí)，與都會(huì)使得原先的行內(nèi)元素變?yōu)閴K級(jí)元素。且的是不占空間的。

基本知識(shí)點(diǎn)

行內(nèi)元素一般是內(nèi)容的容器，而塊級(jí)元素一般是其他容器的容器，行內(nèi)元素適合顯示具體內(nèi)容，而塊級(jí)元素適合做布局。

塊級(jí)元素(block)：獨(dú)占一行，對(duì)寬高的屬性值生效；如果不給寬度，塊級(jí)元素就默認(rèn)為瀏覽器的寬度，即就是100%寬。

行內(nèi)元素(inline)：可以多個(gè)標(biāo)簽存在一行，對(duì)寬高屬性值不生效，完全靠內(nèi)容撐開寬高。

行內(nèi)塊元素(inline-block)：結(jié)合的行內(nèi)和塊級(jí)的優(yōu)點(diǎn)，既可以設(shè)置長寬，可以讓padding和margin生效，又可以和其他行內(nèi)元素并排。

其中img和input為行內(nèi)塊元素。

行內(nèi)元素與塊狀元素之間的轉(zhuǎn)換:

float:?當(dāng)把行內(nèi)元素設(shè)置完float:left/right后，該行內(nèi)元素的display屬性會(huì)被賦予block值，且擁有浮動(dòng)特性。行內(nèi)元素去除了之間的莫名空白。

 ? ?
 ? ?
測試 ? ?


塊級(jí)元素一
行內(nèi)元素一
行內(nèi)元素二

如圖，當(dāng)把行內(nèi)元素一設(shè)為左浮動(dòng)時(shí)，就可以為其設(shè)置寬度了，說明它已經(jīng)變成了塊級(jí)元素。

2. position:?當(dāng)為行內(nèi)元素進(jìn)行定位時(shí)，position:absolute與position:fixed.都會(huì)使得原先的行內(nèi)元素變?yōu)閴K級(jí)元素。

3 .display:

1、塊級(jí)標(biāo)簽轉(zhuǎn)換為行內(nèi)標(biāo)簽：display:inline;

2、行內(nèi)標(biāo)簽轉(zhuǎn)換為塊級(jí)標(biāo)簽：display:block;

3、轉(zhuǎn)換為行內(nèi)塊標(biāo)簽：display：inline-block;

常用的 display 可能的值：

特性 1.text-align屬性對(duì)塊級(jí)元素起作用，對(duì)行內(nèi)元素不起作用：

原因是塊級(jí)標(biāo)簽如果不給寬度，塊級(jí)元素就默認(rèn)為瀏覽器的寬度，即就是100%寬，那么在100%的寬度中居中生效；但是行內(nèi)元素的寬完全是靠內(nèi)容撐開，所以寬度就是內(nèi)容撐開的寬：

所以塊級(jí)是在盒子中間居中了，但是因?yàn)樾袃?nèi)元素的寬就是內(nèi)容寬，沒有可居中的空間，所以text-align:center;就沒有作用；但是如果給font轉(zhuǎn)換為塊級(jí)就不一樣了：

2.塊級(jí)元素獨(dú)自占一行且寬度會(huì)占滿父元素寬度，行內(nèi)元素不會(huì)獨(dú)占一行，相鄰行內(nèi)元素可以排在同一行。

3.塊級(jí)元素可以設(shè)置weith和height，行內(nèi)元素設(shè)置width和height無效，而且塊級(jí)元素即使設(shè)置寬度也還是獨(dú)占一行。注意但塊級(jí)元素當(dāng)沒有明確指定 width 和 height 值時(shí)，塊級(jí)元素尺寸由內(nèi)容確定，當(dāng)指定了 width 和 height 的值時(shí)，內(nèi)容超出塊級(jí)元素的尺寸就會(huì)溢出，這時(shí)塊級(jí)元素要呈現(xiàn)什么行為要看其 overflow 的值（visible,hidden,overflow,scroll) 4.塊級(jí)元素可以設(shè)置margin和padding屬性，行內(nèi)元素水平方向的margin和padding如margin-left、padding-right可以產(chǎn)生邊距效果，但是豎直方向的margin-top、margin-bottom不起作用。 5.行內(nèi)元素的padding-top和padding-bottom會(huì)起作用，不過就像脫離了標(biāo)準(zhǔn)流一樣（即padding-left和padding-right的層級(jí)比其他元素高），并不會(huì)占據(jù)位置，并且還把其他元素給蓋住了。但是，假如inline的元素沒有內(nèi)容，“padding-top、padding-bottom"將不起作用。如果想要起作用，只需要給padding-left或者padding-right設(shè)置一個(gè)值，或者當(dāng)inline的元素有內(nèi)容時(shí)就會(huì)起作用。


塊級(jí)元素一
行內(nèi)元素一
行內(nèi)元素二

如圖所示，當(dāng)我們改變padding值時(shí)，效果是背景向四個(gè)方向擴(kuò)展，padding-top和padding-bottom是增大的，但是對(duì)于塊狀元素一是沒有影響的（在豎直方向上），不然行內(nèi)元素一也不會(huì)擠入塊狀元素了。

下面的實(shí)例可以看到如果inline的元素沒有內(nèi)容，“padding-top、padding-bottom"將不起作用

如果想讓padding-top或者padding-bottom起作用，只需要給padding-left或者padding-right設(shè)置一個(gè)值，或者當(dāng)inline的元素有內(nèi)容時(shí)就會(huì)起作用。

6.當(dāng)inline-block碰到同類（inline，inline-block)時(shí)，誰的上下margin、paddin或line-height大，就聽誰的。除非它是inline，因?yàn)閕nline的margin是不起作用的。且inline的padding是不占空間的。


  item1
item2


  item1
item2

如圖所示，inline-block碰到同類時(shí)，行高也會(huì)一起使用。其他的padding-top和margin-top甚至都會(huì)一起使用

7.inline和inline-block會(huì)引起間距的空格


  item1
item2

可以看到兩個(gè)div之間會(huì)有幾個(gè)像素的間距，這個(gè)間距是有換行或回車導(dǎo)致的。有以下解決方法

(1)將空格直接刪除，放到一行

 item1
item2

(2)在空格代碼中加入注釋

item1
item2

(3)設(shè)置margin-left為負(fù)值，但是每個(gè)瀏覽器的間距不一樣，所以基本不用這種方法

.item2{
  margin-left:-8px;
  display:inline;
  background-color:pink;
}

(4)給父元素增加“font-size：0px"


  item1
item2

(5)給父元素加letter-spacing負(fù)值，然后通過子元素清除letter-spacing值


  item1

                 
                                                                                                                    
                         云服務(wù)器
                                             
                         GPU云服務(wù)器
                                                                                                                                                 
                                      
                     
                    
                                                                                               inline-block
                                                                                                           inline_block
                                                                                                           inline_block間隙
                                                                                                           css與html的區(qū)別
                                                         
                 
               
              
             
               
                    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
                 
                   轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/113453.html
               
                      
               
                 
                                  上一篇：BFC理解  
                                                
                                       下一篇：我去！又是勇士和騎士？--NBA資訊小程序

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

elva

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

2021年10月國產(chǎn)數(shù)據(jù)庫大事記

閱讀 2490·2021-11-17 09:33
c++代碼優(yōu)化~effective c++總結(jié) 10.12

閱讀 930·2021-10-13 09:40
inline 或 inline-block 元素間的間隙

閱讀 656·2019-08-30 15:54
CSS的inline、block與inline-block

閱讀 852·2019-08-29 15:38
CSS進(jìn)階篇--設(shè)置滾動(dòng)條樣式

閱讀 2492·2019-08-28 18:15
vue-router學(xué)習(xí)

閱讀 2544·2019-08-26 13:38
ES6 知識(shí)整理一（es6快速入門）

閱讀 1904·2019-08-26 13:36
一個(gè)菜鳥(老yin逼)教后端的你如何"一天"做好微信小程序

閱讀 2210·2019-08-26 11:36

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

CSS的inline、block與inline-block

相關(guān)文章

Css中display:inline-block用法詳解

***CSS魔法堂："那不是bug，是你不懂我!" by inline-block***