HTML、CSS_0428-0429

 text-overflow

           單行顯示：

             純 css 超過容器寬度後自動變...

            Text-overflow : ellipsis; 

             一定要搭配(溫開水)

            ->overflow:hidden+white-space:nowrap

            

            多行顯示：

            display: -webkit-box; 

            -webkit-line-clamp: 4; 

            -webkit-box-orient: vertical;

            

文字斷行方式

            word-break 是決定如何斷行單字

            word-wrap 斷行後，文字仍超過容器寬度時決定如何處理 ，避免單字太長把版面撐破

            word-break：normal/break-all/keep-all

                                正常                  全斷                   標點符號斷行

                                                                               英文不能用            英文沒差、CJK

            Word-wrap：normal/break-word/initial/inherit

                                             切斷詞並換行       

             word-break:keep-all後可以使用word-wrap:break-word來將文字包在容器中    

            

@font-face(設定字型)

        根據每個瀏覽器的支援程度

        有下載後使用下載的字型跟使用Google-font的方法

        

        Icon Font：用字體來表示小圖示

     可以使用font-awesome這個網站(https://fontawesome.com/)

        下載後解壓縮到網頁資料夾內，並改名成 fontawesome

        用 link css 的方式連結到 “fontawesome/css/all.css”

         

       SVG

           調整SVG-->使用height跟width

                更改SVG的顏色-->fill:rgb(只能在路徑改，因為路徑最大)

                SVG對於製作LOGO來說最好用

                

          可以使用icomoon來尋找SVG的圖片檔

        

Object-fit(區域填滿設定)

           設定包在裡面的元素填滿方式，主要是用在圖片上

                屬性設定在圖片上，圖片也要先設寬高

                ○ fill: 預設，不管圖片長寬比例的填滿 

                ○ contain: 保持比例，以完整顯示內容為主 

                ○ cover: 保持比例，以填滿空間沒有空白為主

                ○ none: 不縮放

Object-position(物件位置)

        搭配object-fit，可以設定對齊位置

            預設為object-position(center center)

            屬性可以使用px、%、top left.....

CSS3的新增單位

    rem/em

      rem(root-em)：用html的預設字體大小當單位

                                   2rem=32px

         em：字體大小，一路繼承下來

         所有單位都可以用rem！

    Vh/Vw(viewport height/viewport width)

            1vh/1vw=1/100瀏覽器的高/寬

    Vmax/Vmin

            根據view-port的大小決定

            Ex.1024*˙720

            1vmax=1024/100

            1vmin=720/100

            常用於行動裝置的旋轉，可以使比例不變

    calc()

            使CSS的單位可以計算

            常用在相對單位-絕對單位(計算的時候一定要有空格)

            calc(100% - 100px)

    transform(變形)

        效能比position好得多

            加入hover的話可以做移動的變化

            transform:translateX()：X軸移動

            transform:translateY()：Y軸移動

            -->簡寫寫法  transform:translate(X,Y)

            transform:rotate(deg)：旋轉的角度

            transform:scaleX()：縮放X軸

            transform:scaleY()：縮放Y軸

            -->簡寫寫法 transform:scale(X,Y)

            transform:skew(deg)：平行四邊形的位移

            transform:skewX(deg)

            transform:skewY(deg)

            -->簡寫寫法 transform:skew(X,Ydeg)

            transform-origin(定義變形中心點)

            小技巧：ctrl+shift+p->wrap->輸入名稱 可以直接把div外面套已經取好名字的div

transform: translateX(10px) rotate(60deg);

            假如說要多重屬性的話 只能寫在同一個transform */

            /* 不能按照下面的寫法

            transform:rotate(30deg);

            transform: translateX(30px);

 Transform matrix(a,b,c,d,e,f) 變形矩陣

            matrix(1,0,0,1,e,f) = translate(e,f)

            matrix( aX,0,0,dY,0,0) = scale(a,d)

            matrix(1, 0, tan(a), 1, 0, 0) ->skewX            

            matrix(1, tan(a), 0, 1, 0, 0) ->skewY

Transform-origin(變形中心點)

                    左上角為原點，即為(0,0)

                    ● 也可以使用 n%, left, right, center, top, bottom

transition(漸變)

            ● transition: width 2s; 

            ● transition-property: css 屬性(例如寬度、顏色)

            ● transition-duration: 屬性變化時間，單位為秒

            ● transition-timing-function  動畫變速效果

            ● transition-delay: 2s  動畫延遲時間

            可以製作自訂的動畫時間效果 cubic-bezier()

            http://cubic-bezier.com/