CSS Learning log (1/13 update)

CSS 紀錄
1. 為div設定背景圖案，把圖案自動縮放成跟div大小一樣
    background-image: url("../../assets/00Indoor.png");
    width: 400px;
    height: 200px;
    background-size:contain; //cover會把圖片撐大，直到符合div的大小
    // 也有人說background-size: 100% 100%; 可以
    background-repeat:no-repeat;

2. 設定背景為單色：
    background-color: rgba(0%, 0%, 100%, 0.4);
    // 最後那個是透明度
3. 註解：跟C++一樣  // 和 /**/
4. 動作設定 (假設你想要滑鼠移過去的時候顏色改變)
    .RoomInLayout{
        …
        background-color: rgba(0%, 0%, 100%, 0.4);
        …
        }
    .RoomInLayout:hover { (還有支援其他event)
            background-color: rgba(0%, 0%, 100%, 0.9);
            transition: 0.5s; (漸漸變化)
        }
5. 設定div的相對位置
    http://zh-tw.learnlayout.com/position.html
    大致上是：
        1. position: static 自動排版
        2. position: relative 相對於parent 元素的位置 (要記得設定距離)
        3. position: fixed 相對於
6.  Margin-left: 這個element和左邊的element的距離
     padding-left:這個element的內部元件距離左邊邊界的距離
7. 在css中 .XXX {} 表示class，
            #XXX {} 表示id
            class通常用來表示style
            id通常用來微調行為
            id 是唯一，class可以被很多人用
8. CSS3之後多了新單位vh和vw ()
    這裡有解釋
    https://pjchender.blogspot.com/2015/04/css-3vh-vw.html
    基本上%是相對於parent element的
    vh/vw是相對於整個pages的
9. 想要找網頁的整體主題 theme:
    https://coolors.co/
10. Before/After
用法：套用在指定的class上面，before和after都需要指定content: "XXX"
會在指定的class的前/後放入你的content內容，目的是減少html tag的使用 (不然你就要特地指定一個.xxx_before{} 或是 .xxx_after{} )
比如說
    <div class="hello">HelloWorld</>
然後在css中
.hello::before{ content:"123" }
.hello::after{ content:"ABC" }
顯示出來就會是123HelloWorldABC
還有個特殊用法是支援attr()屬性，可以使用目標class的attribute
比如說
<div class="hello" href="www.123.com.tw" target="_blant">HelloWorld</>
.hello::before{ content:attr(href) }
.hello::after{ content:attr(targer) }
顯示出來是 www.123.com.twHelloWorld_blant
11. div的定位，
大致上分成
    (a) static: 預設
    (b) relative: 可以設定top/right/bottom/left，距離上下左右要多少
    (c) absolute: 可以設定元素的絕對位置，如果parent元素沒有特別設定就會對齊整個網站
    (d) 套路：parent元素設定relative，裡面的子元素設定absolute: 裡面的子元素的位置會相對parent元素
    (e) float: 靠上下左右