css之display

ecmayonxin發表於2019-02-16
CSS

display

css定位屬性Positioning

display: none

不再頁面渲染元素

<!DOCTYPE html>
<html lang="zh">

<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 class="content">這一段落不會被顯示出來</p>
  <p>這個段落會被顯示出來</p>
  <p>當一個元素中的display屬性是none時，瀏覽器不會渲染這個元素裡的任何內容，不會佔據瀏覽器視窗空間，但它存在與文件流當中。</p>
</body>

</html>

display: block

塊級元素

<!DOCTYPE html>
<html lang="zh">

<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 lang="zh">

<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 class="content">display屬性為inline的元素被稱為內連元素。</var></div>
  <div class="content">相鄰元素也是inline屬性時，如果內容不夠撐開整行。相鄰元素的內容會顯示在它傍邊，當視窗整行不夠顯示時，內容會換行顯示。</div>
</body>

</html>

display: inline-block

行內塊級元素

<!DOCTYPE html>
<html lang="zh">

<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 class="content">display屬性為inline-block的元素被稱為行內塊級元素。</var></div>
  <div class="content">行內塊級元素的特性是獨佔一行，內容不會撐開整行</div>
</body>

</html>

display: flex

彈性佈局

<!DOCTYPE html>
<html lang="zh">

<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: flex
    }
  </style>
</head>

<body>
  <div class="content">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <p>class="content" 的元素會佔用整行</p>
  <p>子元素寬高由內容撐開</p>
  <div class="Primitive">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</body>

</html>

display: inline-flex

<!DOCTYPE html>
<html lang="zh">

<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-flex
    }
  </style>
</head>

<body>
  <div class="content">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <p>class="content" 的元素寬高由子元素撐開</p>
  <p>子元素寬高由內容撐開</p>
  <div class="Primitive">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</body>

</html>

display: list-item

列表屬性

<!DOCTYPE html>
<html lang="zh">

<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 class="content">display屬性為list-item時元素會作為列表顯示</var></div>
  <div class="content">下班要買菜</div>
  <div class="content">回家要做飯</div>
</body>

</html>

display: inherit

繼承父級元素的屬性

<!DOCTYPE html>
<html lang="zh">

<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 class="content">繼承父級屬性的效果，父級的display屬性值是block 繼承後內容撐開整行</span>
  </div>
</body>

</html>

相關文章