CSS的inline、block與inline-block

elva 發布于2019-08-29 15:38 / 777人閱讀

摘要：基本知識點行內元素一般是內容的容器，而塊級元素一般是其他容器的容器，行內元素適合顯示具體內容，而塊級元素適合做布局。行內元素去除了之間的莫名空白。當為行內元素進行定位時，與都會使得原先的行內元素變為塊級元素。且的是不占空間的。

基本知識點

行內元素一般是內容的容器，而塊級元素一般是其他容器的容器，行內元素適合顯示具體內容，而塊級元素適合做布局。

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

行內元素(inline)：可以多個標簽存在一行，對寬高屬性值不生效，完全靠內容撐開寬高。

行內塊元素(inline-block)：結合的行內和塊級的優點，既可以設置長寬，可以讓padding和margin生效，又可以和其他行內元素并排。

其中img和input為行內塊元素。

行內元素與塊狀元素之間的轉換:

float:?當把行內元素設置完float:left/right后，該行內元素的display屬性會被賦予block值，且擁有浮動特性。行內元素去除了之間的莫名空白。

 ? ?
 ? ?
測試 ? ?


塊級元素一
行內元素一
行內元素二

如圖，當把行內元素一設為左浮動時，就可以為其設置寬度了，說明它已經變成了塊級元素。

2. position:?當為行內元素進行定位時，position:absolute與position:fixed.都會使得原先的行內元素變為塊級元素。

3 .display:

1、塊級標簽轉換為行內標簽：display:inline;

2、行內標簽轉換為塊級標簽：display:block;

3、轉換為行內塊標簽：display：inline-block;

常用的 display 可能的值：

特性 1.text-align屬性對塊級元素起作用，對行內元素不起作用：

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

所以塊級是在盒子中間居中了，但是因為行內元素的寬就是內容寬，沒有可居中的空間，所以text-align:center;就沒有作用；但是如果給font轉換為塊級就不一樣了：

2.塊級元素獨自占一行且寬度會占滿父元素寬度，行內元素不會獨占一行，相鄰行內元素可以排在同一行。

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


塊級元素一
行內元素一
行內元素二

如圖所示，當我們改變padding值時，效果是背景向四個方向擴展，padding-top和padding-bottom是增大的，但是對于塊狀元素一是沒有影響的（在豎直方向上），不然行內元素一也不會擠入塊狀元素了。

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

如果想讓padding-top或者padding-bottom起作用，只需要給padding-left或者padding-right設置一個值，或者當inline的元素有內容時就會起作用。

6.當inline-block碰到同類（inline，inline-block)時，誰的上下margin、paddin或line-height大，就聽誰的。除非它是inline，因為inline的margin是不起作用的。且inline的padding是不占空間的。


  item1
item2


  item1
item2

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

7.inline和inline-block會引起間距的空格


  item1
item2

可以看到兩個div之間會有幾個像素的間距，這個間距是有換行或回車導致的。有以下解決方法

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

 item1
item2

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

item1
item2

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

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

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


  item1
item2

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


  item1

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

Css中display:inline-block用法詳解

摘要：從上面的這個分析，也不難理解為什么下，對塊元素設置屬性無法實現的效果。這時塊元素僅僅是被觸發了，而它本就是行布局，所以觸發后，塊元素依然還是行布局，而不會如中塊元素呈遞為內聯對象。display:block就是將元素顯示為塊級元素 block元素的特點是：總是在新行上開始；高度，行高以及頂和底邊距都可控制；寬度缺省是它的容器的100%，除非設定一個寬度 , , , , 和...

_ipo 2019-04-23 13:08 評論0 收藏0
CSS魔法堂："那不是bug，是你不懂我!" by inline-block

摘要：那不是，是我不懂而已。的用途之一西文是以空格來分隔單詞的，而漢字間則無需空格分隔，但為了統一西文東亞和的排版，于是抽象出一個名為的概念用于分隔詞義單元，則作為的值域，而定義域就是語言信息。前言每當來個需要既要水平排版又要設置固定高寬時，我就會想起display:inline-block，還有為了支持IE5.5/6/7的hack*display:inline;*zoom:1;。然后發...

cucumber 2019-08-30 12:56 評論0 收藏0
CSS的inline、block與inline-block

摘要：基本知識點行內元素一般是內容的容器，而塊級元素一般是其他容器的容器，行內元素適合顯示具體內容，而塊級元素適合做布局。行內元素去除了之間的莫名空白。當為行內元素進行定位時，與都會使得原先的行內元素變為塊級元素。且的是不占空間的。基本知識點行內元素一般是內容的容器，而塊級元素一般是其他容器的容器，行內元素適合顯示具體內容，而塊級元素適合做布局。塊級元素(block)：獨占一行，對寬高...

ralap 2019-08-26 12:00 評論0 收藏0
CSS基礎篇--你知道的display的值有多少？用了多少？

摘要：與屬性的值不同，其不為被隱藏的對象保留其物理空間指定對象為內聯元素。指定對象作為塊元素級的表格。類同于標簽指定對象作為表格行組。伸縮盒過渡版本將對象作為彈性伸縮盒顯示。伸縮盒最新版本新增屬性可能存在描述錯誤及變更，僅供參考。它的語法如下： display：none | inline | block | list-item | inline-block | table | inline...

wangdai 2019-08-28 18:17 評論0 收藏0