幾個css常用標籤

標籤：eve   hit   文本   lin   排列   容器   ott   pos   tar   

總結一下自己在項目中常用到的一些css屬性：

      1.將某個快固定在螢幕的頂部/底部位置:

           position:fixed;

           bottom:0;或者 top:0;   

      2.個瀏覽器的相容首碼：

          -webkit-   /*safrai、chrome瀏覽器私人*/

          -moz-      /*firefox瀏覽器私人*/

          -mz-       /*IE瀏覽器私人*/

          -0-         /*歐朋瀏覽器私人*/

      3.flex （也需加上相容首碼）

           在css中，可以說flex是一個即輕便又簡潔的布局神器了，下面列出常用的幾個屬性：

             在容器上  position:flex;

                     設定子級的排列方向      flex-direction:row            (→)

                                                    flex-direction:row-reverse (←)  

                                                    flex-direction:column        (↓)

                                                    flex-direction:row-reverse  (↑)

                     設定子級的對其方式      justify--contet:center         置中

                                                    justify--contet:flex-star      靠左對齊

                                                    justify--contet:flex-end       靠右對齊 

                                                    justify--contet:space-between   子級之間留空隙 （如兩個子級分別在貼兩頭）

                                                    justify--contet:space-around     子級之間、之前、之後都留有空隙

                     多個子級進行排列         flex-wrap:nowrap                預設不換行

                                                    flex-wrap:wrap                    換行

                     在子級中                    order:具體數值                     預設為零、數值小的排前面

                                                    flex-grow: 具體數值              預設為零、如果有1和2則這兩個子級瓜分剩餘空間，分別佔1/3 和 2/3空間。

        4.         偽類別選取器                  多個同類標籤下如:li p span img  可通過父級的類去控制個別子標籤  .content li:first-child{}   .content li:last-child{} 

                                                    多個子級時也可以這樣寫    .content li:nth-child(第幾個子級就寫幾，不限同類標籤){}  

        5.         漸層背景                     background-image:-webkit-linear-gradient(right,#000000,#777777 50%,#000000);有to right; to left; to top; to bottom

        6.         超出文本部分用省略符號代替  text-overlow:ellipsis;    /*相容性：ie支援。safari:-webkit-.歐朋-0-*/

                                                       white-space:nowrap;

                                                       overflow:hidder; 

                                                       word-break: break-all;                                                      -webkit-box-orient: vertical;                                                      -webkit-line-clamp: 3;           (換幾行)        7.        背景陰影                        box-shadow:水平陰影 垂直陰影 羽化值 陰影顏色

        8.        圖片濾鏡                        fliter:blur(2px)模糊度

幾個css常用標籤