CSS的inline、block與inline-block

時間  2019-12-05
標籤 css inline block 欄目 CSS 简体版
原文   原文鏈接

基本知識點

行內元素通常是內容的容器，而塊級元素通常是其餘容器的容器，行內元素適合顯示具體內容，而塊級元素適合作佈局。css

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

行內元素(inline)：能夠多個標籤存在一行，對寬高屬性值不生效，徹底靠內容撐開寬高。佈局

行內塊元素(inline-block)：結合的行內和塊級的優勢，既能夠設置長寬，可讓padding和margin生效，又能夠和其餘行內元素並排。測試

clipboard.png

其中img和input爲行內塊元素。spa

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

  1. float: 當把行內元素設置完float:left/right後，該行內元素的display屬性會被賦予block值，且擁有浮動特性。行內元素去除了之間的莫名空白。
<head>    
<meta charset="UTF-8">    
<title>測試</title>    
<style type="text/css">        
p{
    background-color: red;
    height: 500px;
    width: 30%;
    padding: 20px;
    margin: 20px;
    float: left;}        
div{
    background-color: green;
    height: 50px;
    width: 40%;
    padding: 20px;
    margin: 20px;}       
span{
    background-color: gray;
    height: 70px;
    padding: 40px;
    margin: 20px;
    float:left;
    width:200px;}       
strong{
    background-color: blue;
    height: 70px;
    padding: 40px;
    margin: 20px;}    
</style>
<!--<p>塊級元素一</p>-->
<div>塊級元素一</div>
<span>行內元素一</span>
<strong>行內元素二</strong>
</body>

clipboard.png

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

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

3 .display:ci

一、塊級標籤轉換爲行內標籤：display:inline;input

二、行內標籤轉換爲塊級標籤：display:block;it

三、轉換爲行內塊標籤：display：inline-block;

經常使用的 display 可能的值：

clipboard.png

特性

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

緣由是塊級標籤若是不給寬度，塊級元素就默認爲瀏覽器的寬度，即就是100%寬，那麼在100%的寬度中居中生效；可是行內元素的寬徹底是靠內容撐開，因此寬度就是內容撐開的寬：

clipboard.png

因此塊級是在盒子中間居中了，可是由於行內元素的寬就是內容寬，沒有可居中的空間，因此text-align:center;就沒有做用；可是若是給font轉換爲塊級就不同了：

clipboard.png

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

clipboard.png

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的元素有內容時就會起做用。

<style type="text/css">        
div{
     background-color: green;
     height: 50px;
     width: 40%;;
     padding: 20px;
     margin: 20px;}        
span{
     background-color: 
     gray;height: 70px;
     padding: 40px;margin: 20px;}        
     strong{background-color: blue;
     height: 70px;
     padding: 40px;
     margin: 20px;
     float: left;
     }    
</style>
<div>塊級元素一</div>
<span>行內元素一</span>
<strong>行內元素二</strong>

clipboard.png

clipboard.png

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

下面的實例能夠看到若是inline的元素沒有內容，「padding-top、padding-bottom"將不起做用

<style>
     body,div{
         margin: 0;
         padding:0;
     }
        .item1{
            height:100px;
            background-color: red;
        }
        .item2{
            display: inline;
            padding-top: 50px;
            padding-bottom: 50px;
            background-color: pink;
        }
    </style>
 <div class="item1"></div>
<div class="item2"></div>

clipboard.png

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

<style>
     body,div{
         margin: 0;
         padding:0;
     }
        .item1{
            height:100px;
            background-color: red;
        }
        .item2{
            display: inline;
            padding-top: 50px;
            padding-bottom: 50px;
            padding-left: 50px;
            background-color: pink;
        }
    </style>
  <div class="item1"></div>
<div class="item2"></div>

clipboard.png

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

<style>
     body,div{
         margin: 0;
         padding:0;
     }
        .item1{
            display: inline-block;
            width: 100px;
            height:100px;
            margin-top: 20px;
            background-color: red;
        }
        .item2{
            margin-top: 100px;
            display: inline-block;
            background-color: pink;
        }
    </style>
  <div class="item1">item1</div>
<div class="item2">item2</div>

clipboard.png

<style>
     body,div{
         margin: 0;
         padding:0;
     }
        .item1{
            display: inline-block;
            width: 100px;
            height:100px;
            line-height: 100px;
            background-color: red;
        }
        .item2{
            display: inline-block;
            background-color: pink;
        }
    </style>
  <div class="item1">item1</div>
<div class="item2">item2</div>

clipboard.png

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

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

<style>
     body,div{
         margin: 0;
         padding:0;
     }
        div{
            display: inline;
            background-color: #61dafb;
        }
    </style>
  <div class="item1">item1</div>
<div class="item2">item2</div>

clipboard.png

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

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

<div class="item1">item1</div><div class="item2">item2</div>

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

<div class="item1">item1</div><!--
--><div class="item2">item2</div>

(3)設置margin-left爲負值，可是每一個瀏覽器的間距不同，因此基本不用這種方法

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

(4)給父元素增長「font-size：0px"

<style>
     body,div{
         margin: 0;
         padding:0;
     }
      body{
          font-size: 0px;
      }
        .item1{
            display: inline-block;
            width:100px;
            height:100px;
            font-size: 20px;
            background-color: red;
        }
        .item2{
            display:inline-block;
            font-size: 20px;
            background-color: pink;
        }
    </style>
  <div class="item1">item1</div>
<div class="item2">item2</div>

clipboard.png

(5)給父元素加letter-spacing負值，而後經過子元素清除letter-spacing值

<style>
     body,div{
         margin: 0;
         padding:0;
     }
      body{
          letter-spacing: -8px;
      }
      body *{
          letter-spacing: 0px;
      }
      .item1{
            display: inline-block;
            width:100px;
            height:100px;
            background-color: red;
        }
      .item2{
            display:inline-block;
            background-color: pink;
        }
    </style>
  <div class="item1">item1</div>
<div class="ite
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程