金魚系列，排板篇

#display

Posted by s103071049 on 2021-06-01

前言

為甚麼標題這麼少字，不會跟其他排在一起？段落為甚麼會排在清單前面？為甚麼不會兩個併排？標籤百百種，為甚麼他會長成目前畫面上的樣子？我們可以快速區分網頁為兩大特性的物件：inline, block。像是 h1 標題就屬於區塊類型 block 的物件，超連結不會自己佔掉一整列，會和其他東西排在一起，就屬於 inline 的物件。

網頁中的兩大主角：inline, block

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./style.css">
  <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"/>

  <title>test</title>
</head>
<body>
  <h1>title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod　<span>哈哈哈哈哈</span>
  tempor incididunt ut<a href='#'>連結</a> labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation <strong>ullamco</strong> laboris <em>nisi</em> ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <ul>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
    <li>list4</li>
  </ul>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <script src='./index.js'></script>
</body>
</html>

佔位哥 block

block 物件的特性為不管多寬，就會佔據一整列。我們可以使用 float 屬性讓 block 的物件排在一起。

特性：可以設定寬、高。
例如： h, p, div

櫻花妹 inline

inline 會跟大家排在一起。

特性：無法設定寬、高。他有點像線，線只有長度沒有寬、高。
例如： a

混血兒 inline-block

特性：可以設定寬、高，且會跟大家排在一起。

一、問題思考

  1. ul 是 block 還是 inline？ block
  2. li 是 block 還是 inline？ block

二、nav bar 實作

格子跟格子中會有空白，空白在 a 標籤與 a 標籤中間。也就是說，空白在 a 標籤的外面，menu 標籤的裡面。所以我們要針對 menu 寫 font-size。

  <div class='menu'>
    <a href="#">link1</a>
    <a href="#">link2</a>
    <a href="#">link3</a>
    <a href="#">link4</a>
    <a href="#">link5</a>
    <a href="#">link6</a>
  </div>

font-size: 0; => 甚麼都不見了，因為裡面的超連結會繼承 parent 的大小設定。跟文字有關的大部分都會繼承。

.menu {
  background: orange;
  text-align: center;
  font-size: 0;
}

代碼如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./style.css">

  <title>test</title>
</head>
<body>
  <div class='menu'>
    <a href="#">link1</a>
    <a href="#">link2</a>
    <a href="#">link3</a>
    <a href="#">link4</a>
    <a href="#">link5</a>
    <a href="#">link6</a>
  </div>
  <script src='./index.js'></script>

</body>
</html>

.menu {
  background: orange;
  text-align: center;
  font-size: 0;
}
.menu a {
  text-decoration: none;
  color: white;
  padding: 10px 20px;
  background: red;
  display: inline-block;
  font-size: 16px;
}
.menu a:hover {
  background: black;
}

排版聖品 flex

最大問題：支援度，也就是舊版瀏覽器不支援，如：IE-8、IE-9、IE-10

當你設定 display: flex; 底下每個項目都會被設定成 flex-item，有點像是對底下的元素加了一個 mark ，有了這個 mark 底下的元素就會橫排。而且它中間不會有空白字元的問題。增加項目也不會折行，且會自動調整寬度。將個別項目的內容縮小一點，也不會影響寬度，自帶自動等寬效果。

如果要折行，使用屬性，在父層的地方設定 flex-wrap: wrap;

所以做這樣的版面，父層用　display: flex;，子層就設定完成。

<!DOCTYPE html>
<html>
<head>
  <title>css</title>
  <meta charset="urf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel='stylesheet' href='reset.css'>
  <style>
    .wrap {
      width: 960px;
      margin: auto;
      background: #ccc;
      display: flex;
    }

    .item {
      width: 300px;
      margin: 0 10px;
      background: #ffa;
    }
  </style>
</head>
<body>
  <div class='wrap'>
    <div class='item'>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class='item'>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class='item'>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>

</body>
</html>

不要折行的情況，將 item 寬度加爆 => 畫面不變

    .wrap {
      width: 960px;
      margin: auto;
      background: #ccc;
      display: flex;

    }

    .item {
      width: 10000000px;
      margin: 10px 10px;
      background: #ffa;
    }

重點摘要：

  1. 預設橫排
  2. no 空白字元問題，<對比 inline-block>
  3. 不折行，<若要折行flex-wrap: wrap;>
  4. 自動等寬
  5. 預設等高
  6. 子層元素寬度超越父層設定寬度，也不影響

常見版面：２～６欄

<!DOCTYPE html>
<html>
<head>
  <title>css</title>
  <meta charset="urf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel='stylesheet' href='reset.css'>
  <style>
    .wrap {
      width: 960px;
      margin: auto;
      display: flex;
    }
    .item {
      /*沒有要做換行，所以寬度、折行都不重要*/
      width: 100%;
      margin: 0 10px 10px;
    }

    /*底下的圖片做寬度一百趴的設定*/
    .item img {
      width: 100%;
      vertical-align: top;
    }

  </style>
</head>
<body>
  <div class='wrap'>
    <div class='item'>
      <img src="https://picsum.photos/300/200?random=1">
    </div>
    <div class='item'>
      <img src="https://picsum.photos/300/200?random=2">
    </div>
  </div>
  <div class='wrap'>
    <div class='item'>
      <img src="https://picsum.photos/300/200?random=3">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class='item'>
      <img src="https://picsum.photos/300/200?random=4">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class='item'>
      <img src="https://picsum.photos/300/200?random=5">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

</body>
</html>

試著切出 1~6 欄的稀飯版。


#display

s103071049




Related Posts

MTR04_1027

MTR04_1027

 cwc329
compose & pipe function

compose & pipe function

 TempuraEngineer
[Week2] 給自己看的 JavaScript 筆記 －運算

[Week2] 給自己看的 JavaScript 筆記 －運算

 生菜

Comments