亚洲熟妇无码一区二区三区,国产日韩视频在线播放,5月婷婷6月丁香

導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立...

網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。

本篇文章給大家帶來的內容是關于css中display屬性的介紹（附實例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

css定位屬性Positioning

display: none

不再頁面渲染元素

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css-test</title>
  <style>
    .content {
      display: none;
    }
  </style>
</head>

<body>
  <p>這一段落不會被顯示出來</p>
  <p>這個段落會被顯示出來</p>
  <p>當一個元素中的display屬性是none時，瀏覽器不會渲染這個元素里的任何內容，不會占據瀏覽器窗口空間，但它存在與文檔流當中。</p>
</body>

</html>

display: block

塊級元素

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css-test</title>
  <style>
  </style>
</head>

<body>
  <p>p元素默認是block塊級元素</p>
  <div>div默認也是block塊級元素</var></div>
  <p>塊級元素的特點：元素的內容會充滿整行</p>
</body>

</html>

display: inline

行內元素

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css-test</title>
  <style>
    .content {
      display: inline
    }
  </style>
</head>

<body>

  <div>display屬性為inline的元素被稱為內連元素。</var></div>
  <div>相鄰元素也是inline屬性時，如果內容不夠撐開整行。相鄰元素的內容會顯示在它傍邊，當窗口整行不夠顯示時，內容會換行顯示。</div>
</body>

</html>

display: inline-block

行內塊級元素

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css-test</title>
  <style>
    .content {
      display: inline-block
    }
  </style>
</head>

<body>
  <div>display屬性為inline-block的元素被稱為行內塊級元素。</var></div>
  <div>行內塊級元素的特性是獨占一行，內容不會撐開整行</div>
</body>

</html>

display: list-item

列表屬性

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css-test</title>
  <style>
    .content {
      display: list-item
    }
  </style>
</head>

<body>
  <div>display屬性為list-item時元素會作為列表顯示</var></div>
  <div>下班要買菜</div>
  <div>回家要做飯</div>
</body>

</html>

display: inherit

繼承父級元素的屬性

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css-test</title>
  <style>
    .content {
      display: inherit
    }
  </style>
</head>

<body>
  <div>
    <span>正常的span元素效果，內容不會撐開整行</span>
    <span>繼承父級屬性的效果，父級的display屬性值是block 繼承后內容撐開整行</span>
  </div>
</body>

</html>

以上就是css中display屬性的介紹（附實例）的詳細內容，更多請關注php中文網其它相關文章！

網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。

溫馨提示：喜歡本站的話，請收藏一下本站！

當前位置:雨林木風下載站 > 網頁設計教程 > 詳細頁面

css中display屬性的介紹（附案例）

本類教程下載

系統下載排行