1.overflow不繼承

    div {
       overflow: hidden;

    }

所以子也要設定

    p{
        overflow: hidden;
    }

2.設寬高object-fit才抓的到

    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        }

3.display：顯示方式 vs position：定位

position=>如何讓圖片上有文字
(檔案:position下)

(1)static預設

      .reddiv {
        position: static;
        /* 所以以下都沒反應 */
        top: 500px;
      }

(2)fixed
設定fixed會在"原本的位置""飄浮"起來
因為原本被拿出來固定,綠色藍色就往上推了
(原本位置不保留)
原本=>都會在同樣的位置 EX:TOP

        #reddiv {

        position:fixed;
        /* 離瀏覽器視窗距離 */
        right: 0;
        bottom: 0;
        }

(3)relative
relative要設定其他值,才會移動,不然就是static(預設)
原本位置有保留並且飄浮起來,所以下面綠色和藍色不會往上跑
(原本位置保留)
原本=>黏在瀏覽器上

      #reddiv {
        
        position: relative;
       /* 離前一個元素的位置距離 */
        top: 100px;
        left: 200px;
      }

(4)absolute
設定absolute會在"原本的位置""固定在上面"
因為原本被拿出來固定,綠色藍色就往上推了
(原本位置不保留)
原本=>黏在瀏覽器上

      #reddiv {
         position: absolute;
        /* 對齊瀏覽器 */
        top: 100px;
        left: 200px;
      }

(5)relative + absolute

relative要設定其他值,才會移動,不然就是static(預設)
原本位置有保留並且飄浮起來,所以下面綠色和藍色不會往上跑
但是因為配合absolute,解釋在下方

      .demo {

        position: relative;
      }

absolute此時會找爸爸看有沒有設定relative
有就會找他設定相對位置top: 50px

      #greendiv {
        position: absolute;
         top: 50px;
        right: 100px;
      }

使用時機-響應式網站

4.position置中

      .box {
        width: 200px;
        height: 200px;
        background-color: #fa0;
        position: absolute;

方法1.

        top: 50%;
        left: 50%;
        /* 到這裡還沒置中,因為基準點是方框的左上角,所以要200-100對齊方框中間 */
        margin-top: -100px;
        margin-left: -100px;

方法2.

        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 

方法3.

        top: 0;
        left: 0;
        left: 0;
        right: 0;
        margin: auto

5.z-index,position有設才可以用

      #rainbow {
        position: relative;
      }


      #rainbow > div:hover {
       z-index : 1;
      }

6.適用方式:

• display(顯示 flex grid inline-block)=>大版面用

• position(定位 上下左右)=>小版面用(RWD)
  使用時機-響應式網站
  (1)電腦看可能會是好的,但是在手機或平板都會跑版,
  此時使用相對定位(這個方法)最不會跑版
  (2)作品集加上作者名稱固定在左上角,使用此方法就不用一個一個找定位

• float (飄移 left right)=>大版面用也可以用,圖片的處理好用

7.float: right會受到父層限制

因為div飄浮起來後.group1抓不到div而無法產生內容
如有想顯示的東西都要寫在父層(.group1)才不會抓不到
(檔案float_30_clear)

      .group1 {
        background-color: #fa0;
        width: 300px;
        height: 75px;
        overflow: hidden;
      }

      .group1 > div {
        float: right;
      }

解決辦法有3：

(1) 第二個div 加入 clear屬性

     #apple {
        clear: right; 
      }

(2) 在 .group1 加入 overflow: hidden;(父)
會抓出寬高,還可以clear(奧義XD,神奇的用法)

      .group1 {
        overflow: hidden; 
      }

(3)透過虛擬元素

      .group1::after {
        content: "";
        display: block;
        clear: both;
      }

8.px 單位注意事項

在瀏覽器縮放為100%的情況下，小於10px以後，看起來一模一樣，使用上要小心

 <p style="font-size: 8px">標題1!!( 8px )</p>
 <p style="font-size: 6px">標題2!!( 6px )</p>

字不要用到這麼小!!會無法看清楚而且難設定

9.css 的單位表示方式

(1)px不受任何影響

(2)em巢狀,受父層影響(父子31)

      :root {
        font-size: 32px;
      }


   <div id="div1" style="font-size: 3em">
   <div id="div1child" style="font-size: 1em">標題1</div>

(3)rem無巢狀,受父層影響

      :root {
        font-size: 32px;
      }

(4)% 受父層影響

#demo {
        background-color: lightcoral;
        height: 80%;
     }

(5)vh,vw只受瀏覽器影響,與%數不同 */

#demo {
        height: 100vh;
        width: 100vw;
       }

EX:
100vw: 1200 100vh: 600
50vw : 600 50vh: 300

vmin,vmax依照vw及vh的比例下去算 50為一半
50vmax = 600 50vmin = 300

10.預覽手機格式

11.RWD => try

https://www.w3schools.com/css/css_rwd_mediaqueries.asp
@定義媒體 專給螢幕 條件為 寬度 <= 600px(最大600)

      @media only screen and (max-width: 600px) {
        body {
          background-color: lightblue;
        }
      }

800~1000之間(最小800最大1000))

      @media only screen and (min-width: 800px) and (max-width: 1000px) {
        body {
          background-color: #fa0;
        }
        p {
          color: yellow;
        }
      }