塊狀元素與內聯元素的轉換

時間 2020-05-20

標籤塊狀元素內聯轉換简体版

原文原文鏈接

在佈局頁面的時候，HTML標籤分紅兩種，塊狀元素和內聯元素（咱們平時用到的標籤div和p就是塊狀元素，連接標籤a就是內聯元素）。它們是很重要的兩個概念，既然說到概念就先看看塊狀元素和內聯元素的定義，在定義中你要留意它們兩個的不一樣之處。css

塊狀元素
通常是其餘元素的容器，可容納內聯元素和其餘塊狀元素，塊狀元素排斥其餘元素與其位於同一行，寬度(width)高度(height)起做用。常見塊狀元素爲div和p。

內聯元素
內聯元素只能容納文本或者其餘內聯元素，它容許其餘內聯元素與其位於同一行，但寬度(width)高度(height)不起做用。常見內聯元素爲「a」。
html

在css設置display：block；就會將內聯轉換成塊狀，高和寬就會生效。ide

而設置display：inline；就會將塊狀轉換成內聯。佈局

設置display：none；什麼也不會顯示。spa

如下咱們來試驗一下：htm

例：blog

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   span{
    width:200px;
    height:200px;
    background:gray;
    display:block;
   }
  </style>
 </head>
 <body>
  <span>當面對兩個選擇時，拋硬幣總能奏效，由於在你把它拋在空中的那一秒裏，你忽然知道你但願它是什麼。</span>
 </body>
</html>

以上代碼是將<span>（內聯）元素轉化爲塊狀這樣效果以下：utf-8

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title></title>

  <style>

   span{

    width:200px;

    height:200px;

    background:gray;

    display:block;

   }

   div{

    width:200px;

    height:200px;

    background:red;

    /*display:none;*/

    display:inline;

   }

  </style>

 </head>

 <body>

  <div>當面對兩個選擇時，拋硬幣總能奏效，由於在你把它拋在空中的那一秒裏，你忽然知道你但願它是什麼。</div>

  <span>當面對兩個選擇時，拋硬幣總能奏效，由於在你把它拋在空中的那一秒裏，你忽然知道你但願它是什麼。</span>

 </body>

</html>

以上代碼是將<div>（內聯）元素轉化爲塊狀這樣效果以下：it

咱們再試下使用display：none 所出現的效果：io

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title></title>

  <style>

   span{

    width:200px;

    height:200px;

    background:gray;

    display:block;

   }

   div{

    width:200px;

    height:200px;

    background:red;

    display:none;
   }

  </style>

 </head>

 <body>

  <div>當面對兩個選擇時，拋硬幣總能奏效，由於在你把它拋在空中的那一秒裏，你忽然知道你但願它是什麼。</div>

  <span>當面對兩個選擇時，拋硬幣總能奏效，由於在你把它拋在空中的那一秒裏，你忽然知道你但願它是什麼。</span>

 </body>

</html>

那麼看下效果：

出來的效果是否是讓人感受<div>已經被刪了呢？其實不是。注意看代碼！！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。