2. overflow

實驗

先知道一般的div用途

div 百分比和像素點(pixel)

練習材料💡這是還沒分割成DIV的內容
原始碼(overflow_hw.html)
```
<!DOCTYPE html>
<html>

<head>
  <title>EMPTY title</title>
</head>

<body>
      <h1>Lorem ipsum</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dolor sed turpis consequat iaculis ut sit
        amet dui. Maecenas consequat maximus bibendum. Proin maximus, metus condimentum auctor tempus, leo enim laoreet
        libero, faucibus interdum libero lorem id tortor. Donec fringilla commodo augue, quis molestie purus ullamcorper
        interdum. Donec non velit ac diam feugiat tristique quis sed urna. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per inceptos himenaeos. Sed dapibus arcu at laoreet tristique. Nullam condimentum,
        nunc quis egestas aliquet, enim purus efficitur massa, sed malesuada leo leo vitae ipsum. Quisque feugiat justo
        ut arcu varius aliquet.
      </p>
   
</body>

</html>
```
<!DOCTYPE html> <html> <head> <title>EMPTY title</title> </head> <body> <h1>Lorem ipsum</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dolor sed turpis consequat iaculis ut sit amet dui. Maecenas consequat maximus bibendum. Proin maximus, metus condimentum auctor tempus, leo enim laoreet libero, faucibus interdum libero lorem id tortor. Donec fringilla commodo augue, quis molestie purus ullamcorper interdum. Donec non velit ac diam feugiat tristique quis sed urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed dapibus arcu at laoreet tristique. Nullam condimentum, nunc quis egestas aliquet, enim purus efficitur massa, sed malesuada leo leo vitae ipsum. Quisque feugiat justo ut arcu varius aliquet. </p> </body> </html>

在上面的HTML加入布局,也就是利用<div>分割上面的文件

```html
  <div class="container"> <!--加入div container-->
    <div class="head">
      <h1>Lorem ipsum</h1>
    </div>
    <div class="box-1"> <!-- container 中再加入div box-1-->
      <p>  省略... </p>
  </div>
  </div> 
```

可以看到分割後的結果(如下)和上面沒有分別。

原始碼(overflow_hw1.html)

<!DOCTYPE html>
<html>

<head>
  <title>EMPTY title</title>
</head>

<body>
  <div class="container"> <!--加入div container-->
    <div class="head">
      <h1>Lorem ipsum</h1>
    </div>
    <div class="box-1"> <!-- container 中再加入div box-1-->
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dolor sed turpis consequat iaculis ut sit
        amet dui. Maecenas consequat maximus bibendum. Proin maximus, metus condimentum auctor tempus, leo enim laoreet
        libero, faucibus interdum libero lorem id tortor. Donec fringilla commodo augue, quis molestie purus ullamcorper
        interdum. Donec non velit ac diam feugiat tristique quis sed urna. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per inceptos himenaeos. Sed dapibus arcu at laoreet tristique. Nullam condimentum,
        nunc quis egestas aliquet, enim purus efficitur massa, sed malesuada leo leo vitae ipsum. Quisque feugiat justo
        ut arcu varius aliquet.
      </p>
  </div>
  </div> 
   
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <title>EMPTY title</title>
</head>

<body>
  <div class="container"> 
    <div class="head">
      <h1>Lorem ipsum</h1>
    </div>
    <div class="box-1"> 
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dolor sed turpis consequat iaculis ut sit
        amet dui. Maecenas consequat maximus bibendum. Proin maximus, metus condimentum auctor tempus, leo enim laoreet
        libero, faucibus interdum libero lorem id tortor. Donec fringilla commodo augue, quis molestie purus ullamcorper
        interdum. Donec non velit ac diam feugiat tristique quis sed urna. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per inceptos himenaeos. Sed dapibus arcu at laoreet tristique. Nullam condimentum,
        nunc quis egestas aliquet, enim purus efficitur massa, sed malesuada leo leo vitae ipsum. Quisque feugiat justo
        ut arcu varius aliquet.
      </p>
  </div>
  </div> 
   
</body>

</html>

加入<style>
```
  <style>
    .container {
      margin-left:10%;
      margin-right:10%;
      width:800px; 🏷 
    }
  </style>
```
原始碼(overflow_hw2.html)
```
<!DOCTYPE html>
<html>

<head>
  <title>EMPTY title</title>
  <style>
    .container {
      margin-left:10%;
      margin-right:10%;
      width:800px;
    }
  </style>
</head>

<body>
  <div class="container"> 
    <div class="head">
      <h1>Lorem ipsum</h1>
    </div>
    <div class="box-1"> 
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dolor sed turpis consequat iaculis ut sit
        amet dui. Maecenas consequat maximus bibendum. Proin maximus, metus condimentum auctor tempus, leo enim laoreet
        libero, faucibus interdum libero lorem id tortor. Donec fringilla commodo augue, quis molestie purus ullamcorper
        interdum. Donec non velit ac diam feugiat tristique quis sed urna. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per inceptos himenaeos. Sed dapibus arcu at laoreet tristique. Nullam condimentum,
        nunc quis egestas aliquet, enim purus efficitur massa, sed malesuada leo leo vitae ipsum. Quisque feugiat justo
        ut arcu varius aliquet.
      </p>
  </div>
  </div> 
   
</body>

</html>
```
<!DOCTYPE html> <html> <head> <title>EMPTY title</title> <style> .container { margin-left:10%; margin-right:10%; width:800px; } </style> </head> <body> <div class="container">  <div class="head"> <h1>Lorem ipsum</h1> </div> <div class="box-1">  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dolor sed turpis consequat iaculis ut sit amet dui. Maecenas consequat maximus bibendum. Proin maximus, metus condimentum auctor tempus, leo enim laoreet libero, faucibus interdum libero lorem id tortor. Donec fringilla commodo augue, quis molestie purus ullamcorper interdum. Donec non velit ac diam feugiat tristique quis sed urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed dapibus arcu at laoreet tristique. Nullam condimentum, nunc quis egestas aliquet, enim purus efficitur massa, sed malesuada leo leo vitae ipsum. Quisque feugiat justo ut arcu varius aliquet. </p> </div> </div> </body> </html>
- ❓但是放大以後,部分文字超出範圍,還需要捲動軸。
修正
```
  <style>
    .container {
      margin-left:10%;
      margin-right:10%;
      width:80%; 🏷 
    }
  </style>
```
原始碼(overflow_hw3.html)
```
<!DOCTYPE html>
<html>

<head>
  <title>EMPTY title</title>
  <style>
    .container {
      margin-left:10%;
      margin-right:10%;
      width:80%;
    }
  </style>
</head>

<body>
  <div class="container"> 
    <div class="head">
      <h1>Lorem ipsum</h1>
    </div>
    <div class="box-1"> 
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dolor sed turpis consequat iaculis ut sit
        amet dui. Maecenas consequat maximus bibendum. Proin maximus, metus condimentum auctor tempus, leo enim laoreet
        libero, faucibus interdum libero lorem id tortor. Donec fringilla commodo augue, quis molestie purus ullamcorper
        interdum. Donec non velit ac diam feugiat tristique quis sed urna. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per inceptos himenaeos. Sed dapibus arcu at laoreet tristique. Nullam condimentum,
        nunc quis egestas aliquet, enim purus efficitur massa, sed malesuada leo leo vitae ipsum. Quisque feugiat justo
        ut arcu varius aliquet.
      </p>
  </div>
  </div> 
   
</body>

</html>
```
<!DOCTYPE html> <html> <head> <title>EMPTY title</title> <style> .container { margin-left:10%; margin-right:10%; width:80%; } </style> </head> <body> <div class="container">  <div class="head"> <h1>Lorem ipsum</h1> </div> <div class="box-1">  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dolor sed turpis consequat iaculis ut sit amet dui. Maecenas consequat maximus bibendum. Proin maximus, metus condimentum auctor tempus, leo enim laoreet libero, faucibus interdum libero lorem id tortor. Donec fringilla commodo augue, quis molestie purus ullamcorper interdum. Donec non velit ac diam feugiat tristique quis sed urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed dapibus arcu at laoreet tristique. Nullam condimentum, nunc quis egestas aliquet, enim purus efficitur massa, sed malesuada leo leo vitae ipsum. Quisque feugiat justo ut arcu varius aliquet. </p> </div> </div> </body> </html>
- ✔️此時放大縮小,不再有超出範圍的情況出現。
- 初步心得是百分比較固定的長寬好用。

overflow實驗

講義

overflow_play.pptx

實驗1:

改變overflow中的值,hidden,visible,auto,scroll其他見chrome debug tool。

原始碼(overflow.html)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <style>
    #box1 {
      width: 40%;
      height: 100px;
      background-color: grey;
      overflow: visible;

    }

    #box2 {
      width: 150px;
      height: 80px;
      background-color: green;

    }
    p{
      margin:0px;
    }
  </style>
</head>

<body>
  <!-- <a href="https://www.youtube.com/watch?v=P72JaLgu8Ns">from</a> -->
  <div id="box1">
    <div id="box2">
      <p>兩個都是block區塊，為甚麼重疊？因為一個包含一個。</p>
      <ol>
        <li>改變 #box1 overflow: (delete)->hidden -> scroll</li>
      </ol>
    </div>
  </div>

</body>

</html>

在這個實驗中如果作如下的更改

  <style>
    #box1 {
      width: 40%;
      height: 100px; /* 🤸 */
      background-color: grey;
      overflow: visible; /* 🤸 */

    }

    #box2 {
      width: 150px;
      height: 80px; /* 🤸 */
      background-color: green;

    }
    p{
      margin:0px;
    }
  </style>

會變成下面怪怪的結果，box2的百分比高度,都自動縮放,而不是限制在某一個高度😒。

因為,百分比是根據親代的設定而定,現在連續兩個百分比,但是最開始的設定未知,有可能是0*100%*10%?

解決辦法是在親代路徑上,有實際的高度,例如px或vh結尾,就恢復正常。

練習

相關投影片

💡div container 包含div box-1,div box-2

練習把box-1 box-2分成左右,而不是上下(參考後面)。

原始碼(overflow_updown2leftright.html)

<!DOCTYPE html>
<html>

<head>
  <title>EMPTY title</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!-- <link rel="stylesheet" type="text/css" href="overflow_hw3.css"> -->
  <style>
    body {
      background-color: #f4f4f4;
      color: #444444;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 16px;
      font-weight: normal;
      font: normal Arial, Helvetica, sans-serif;
    }

    .container {
      margin-left: 10%;
      margin-right: 10%;
      width: 80%;
      border: solid green 5px;
      margin: auto;
    }

    .box-1 {
      background-color: #333;
      color: #fff;
      border: solid red;
    }

    .box-2 {
      background-color: #333;
      color: #fff;
      border: solid red;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box-1">
      <p>
      <h1>Hello</h1>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dolor sed turpis consequat iaculis ut sit amet
      dui. Maecenas consequat maximus bibendum. Proin maximus, metus condimentum auctor tempus, leo enim laoreet libero,
      faucibus interdum libero lorem id tortor. Donec fringilla commodo augue, quis molestie purus ullamcorper interdum.
      Donec non velit ac diam feugiat tristique quis sed urna. Class aptent taciti sociosqu ad litora torquent per
      conubia nostra, per inceptos himenaeos. Sed dapibus arcu at laoreet tristique. Nullam condimentum, nunc quis
      egestas aliquet, enim purus efficitur massa, sed malesuada leo leo vitae ipsum. Quisque feugiat justo ut arcu
      varius aliquet.
      </p>
    </div>
    <div class="box-2">
      <h1>GoodBy</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dolor sed turpis consequat iaculis ut sit
        amet dui. Maecenas consequat maximus bibendum. Proin maximus, metus condimentum auctor tempus, leo enim laoreet
        libero, faucibus interdum libero lorem id tortor. Donec fringilla commodo augue, quis molestie purus ullamcorper
        interdum. Donec non velit ac diam feugiat tristique quis sed urna. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per inceptos himenaeos. Sed dapibus arcu at laoreet tristique. Nullam condimentum,
        nunc quis egestas aliquet, enim purus efficitur massa, sed malesuada leo leo vitae ipsum. Quisque feugiat justo
        ut arcu varius aliquet.
      </p>
    </div>

  </div>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <title>EMPTY title</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  
  <style>
    body {
      background-color: #f4f4f4;
      color: #444444;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 16px;
      font-weight: normal;
      font: normal Arial, Helvetica, sans-serif;
    }

.container {
      margin-left: 10%;
      margin-right: 10%;
      width: 80%;
      border: solid green 5px;
      margin: auto;
    }

.box-1 {
      background-color: #333;
      color: #fff;
      border: solid red;
    }

.box-2 {
      background-color: #333;
      color: #fff;
      border: solid red;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box-1">
      <p>
      <h1>Hello</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dolor sed turpis consequat iaculis ut sit amet
      dui. Maecenas consequat maximus bibendum. Proin maximus, metus condimentum auctor tempus, leo enim laoreet libero,
      faucibus interdum libero lorem id tortor. Donec fringilla commodo augue, quis molestie purus ullamcorper interdum.
      Donec non velit ac diam feugiat tristique quis sed urna. Class aptent taciti sociosqu ad litora torquent per
      conubia nostra, per inceptos himenaeos. Sed dapibus arcu at laoreet tristique. Nullam condimentum, nunc quis
      egestas aliquet, enim purus efficitur massa, sed malesuada leo leo vitae ipsum. Quisque feugiat justo ut arcu
      varius aliquet.
      </p>
    </div>
    <div class="box-2">
      <h1>GoodBy</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dolor sed turpis consequat iaculis ut sit
        amet dui. Maecenas consequat maximus bibendum. Proin maximus, metus condimentum auctor tempus, leo enim laoreet
        libero, faucibus interdum libero lorem id tortor. Donec fringilla commodo augue, quis molestie purus ullamcorper
        interdum. Donec non velit ac diam feugiat tristique quis sed urna. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per inceptos himenaeos. Sed dapibus arcu at laoreet tristique. Nullam condimentum,
        nunc quis egestas aliquet, enim purus efficitur massa, sed malesuada leo leo vitae ipsum. Quisque feugiat justo
        ut arcu varius aliquet.
      </p>
    </div>

</div>
</body>

</html>