天天看點
傳回

【前端面試指南】CSS3新特性

  1. 邊框
    1. 圓角效果 
      div.a {
            /* 上右下左都是 10px */
            border-radius: 10px;
            /* 上右下左參數不一 */
            border-radius: 10px 20px 30px 40px;
        }
    2. 實心圓 
      div.a {
            height: 100px;
            width: 100px;
            background: #111;
            border-radius: 50px;
        }
    3. 左半圓 
      div.a {
            height: 100px;
            width: 50px;
            background: #111;
            border-radius: 50px 0 0 50px;
        }
    4. 上半圓 
      div.a {
            height: 50px;
            width: 100px;
            background: #111;
            border-radius: 50px 50px 0 0 ;
        }
    5. 陰影
      1. box-shadow
        1. box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴充半徑] [陰影顔色] [投影方式]
        【前端面試指南】CSS3新特性
        代碼 
        .a {
            height: 200px;
            width: 200px;
            box-shadow: 4px 3px 20px 6px #333 inset,
                -30px 20px 30px -2px #ecb;
        }
      2. 陰影模糊半徑與陰影擴充半徑的差別
        1. 陰影模糊半徑：此參數可選，其值隻能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
        2. 陰影擴充半徑：此參數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值時，則縮小；
    6. 為邊框應用圖檔 border-image
  2. 顔色
    1. rgba 
      color：rgba(R,G,B,A)
/*舉例*/
color：rgba(255,255,255,0.5)
    2. 漸變顔色 
      1. background-image:linear-gradient(to top left,red,green);
background-image: linear-gradient(-90deg, red, yellow);
background-image:radial-gradient(red, yellow, green);
background-image: radial-gradient(circle, red, yellow, green);
      2. 【前端面試指南】CSS3新特性
  3. 文字與字型
    1. text-overflow：使用…表示文本溢出 
      text-overflow:clip; /*剪切*/
overflow:hidden; /*溢出内容為隐藏*/
white-space:nowrap; /*強制文本在一行内顯示*/

text-overflow:ellipsis; /*顯示省略标記*/
overflow:hidden; /*溢出内容為隐藏*/
white-space:nowrap; /*強制文本在一行内顯示*/
    2. word-wrap：目前行超過指定容器的邊界時是否斷開轉行。 
      word-wrap:normal；/*控制連續文本換行*/
word-wrap:break-word；/*内容将在邊界内換行*/
    3. 嵌入字型
      1. 設定字型@font-face 
        @font-face {
    font-family: "XX Font";
    src: url("./xx");
}
      2. 使用字型 
        p {
    font-size :12px; 
  	font-family : "XX Font";
}
    4. 文本陰影 
      text-shadow: 4px 4px 0 red;
text-shadow: X-Offset Y-Offset blur color;
  4. 與背景相關的樣式
    1. background-origin：設定元素背景圖檔的起始位置 
      background-origin:border-box; /*邊框*/
background-origin:padding-box; /*内邊距*/
background-origin:content-box; /*内容區域*/
    2. background-clip：将背景圖檔做适當的裁剪以适應實際需要 
      background-clip:border-box; /*邊框*/
background-clip:padding-box; /*内邊距*/
background-clip:content-box; /*内容區域*/
background-clip:no-clip; /*不裁剪*/
    3. background-size：設定背景圖檔的大小 
      background-size: auto /*預設值，不改變背景圖檔的原始高度和寬度；*/
background-size: 60px 80px /*兩個值時，将背景圖檔寬高依次設定為前面兩個值 */
background-size: 60px /*一個值時，将其作為圖檔寬度值來等比縮放*/
background-size: 50% /* 設定為所在元素寬高乘以百分比得出的數值 */
background-size: cover /*覆寫，即将背景圖檔等比縮放以填滿整個容器*/
background-size: contain /*容納，即将背景圖檔等比縮放至某一邊緊貼容器邊緣為止。*/
  5. CSS3選擇器
    1. 選擇器的優先級：

      !important;

       > 内聯樣式 > id選擇器 > 類選擇器 > 标簽選擇器 > 通配符選擇器
    2. 屬性選擇器
      【前端面試指南】CSS3新特性
      a[class^=icon] {
  background: green;
  color: #fff;
}

a[href$=pdf] {
  background: orange;
  color: #fff;
}

a[title*=more] {
  background: blue;
  color: #fff;
}
    3. 結構性僞類選擇器
      1. root：根元素，在HTML文檔中，根元素始終是<html>。 
        :root {
            background: blue;
        }
      2. not：否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個元素之外的所有元素。 
        div :not([id="footer"]) {
            background: orange;
        }
      3. empty：選擇器表示的就是空，一點内容都沒有，哪怕是一個空格。 
        p:empty {
            display: none;
        }

      4. target：目标選擇器，用來比對文檔(頁面)的url的某個标志符的目标元素。

        點選連結後将背景改為桔色

        :target {
            background: orange;
        }
      5. first-child：選擇父元素的第一個子元素的元素E 
        ul>li:first-child {
            color: red;
        }
      6. last-child 
        ul>li:last-child {
            border-bottom: none;
        }
      7. nth-child(n)
        【前端面試指南】CSS3新特性
        ol>li:nth-child(2n+1) {
            background: green;
        }
      8. nth-last-child 
        ol>li:nth-last-child(5) {
            background: orange;
        }
      9. first-of-type選擇器：指定了元素的類型，其主要用來定位一個父元素下的某個類型的第一個子元素 
        .wrapper>div:first-of-type {
            background: orange;
        }
      10. nth-of-type(n)選擇器：計算父元素中指定的某種類型的子元素 
        .wrapper>p:nth-of-type(2n) {
            background: orange;
        }
      11. last-of-type選擇器：父元素下的某個類型的最後一個子元素 
        .wrapper>p:last-of-type {
            background: orange;
        }
      12. nth-last-of-type(n)選擇器 
        .wrapper>p:nth-last-of-type(3) {
            background: orange;
        }
      13. only-child選擇器：選擇父元素中僅有一個的子元素，而且是一個唯一的子元素 
        .post p:only-child {
  background: orange;
}
      14. only-of-type選擇器：選擇一個元素是它的父元素的唯一一個相同類型的子元素 
        .wrapper>div:only-of-type {
            background: orange;
        }
      15. :enabled選擇器 
        input[type="text"] :enabled {
            border: 1px solid #f36;
            box-shadow: 0 0 5px #f36;
        }
      16. :disabled選擇器 
        input[type="submit"]:disabled {
  background: #eee;
  border-color: #eee;
  color: #ccc;
}
      17. :checked選擇器：單選按鈕和複選按鈕選中狀态的樣子 
        input[type="radio"]:checked + span {
  opacity: 1;
}
      18. ::selection選擇器：用來比對突出顯示的文本(用滑鼠選擇文本時的文本) 
        ::selection {
  background: orange;
  color: white;
}

::-moz-selection {
  background: orange;
  color: white;
}
      19. :read-only選擇器：用來指定處于隻讀狀态元素的樣式 
        input[type="text"]:-moz-read-only{
  border-color: #ccc;
}
input[type="text"]:read-only{
  border-color: #ccc;
}
      20. :read-write選擇器：指定當元素處于非隻讀狀态時的樣式 
        input[type="text"]:-moz-read-write{
  border:2px solid red;
}
input[type="text"]:read-write{
  border:2px solid red;
}
      21. ::before和::after：給元素的前面或後面插入内容 
        .clearfix::before,
.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
  6. CSS3變形
    1. 旋轉 rotate()：通過指定的角度參數使元素相對原點進行旋轉
    2. 扭曲 skew()：讓元素傾斜顯示
    3. 縮放 scale()：
      1. scale(X,Y)使元素水準方向和垂直方向同時縮放
      2. scaleX(x)元素僅水準方向縮放（X軸縮放）
      3. scaleY(y)元素僅垂直方向縮放（Y軸縮放） 
      div:hover {
            -webkit-transform: scale(1.5, 0.5);
            -moz-transform: scale(1.5, 0.5) transform: scale(1.5, 0.5);
        }
    4. 位移 translate()：
      1. translate(x,y)水準方向和垂直方向同時移動
      2. translateX(x)僅水準方向移動（X軸移動）
      3. translateY(Y)僅垂直方向移動（Y軸移動） 
      div:hover {
            -webkit-transform: translate(50px, 100px);
            -moz-transform: translate(50px, 100px);
            transform: translate(50px, 100px);
        }
    5. 原點 transform-origin
      【前端面試指南】CSS3新特性
      div {
            -webkit-transform-origin: left top;
            transform-origin: left top;
        }
  7. CSS3動畫
    1. 過渡屬性 transition-property：指定過渡動畫的CSS屬性名稱
      【前端面試指南】CSS3新特性
      div {
            -webkit-transition-property: width;
            transition-property: width;
        }
    2. 過渡所需時間 transition-duration：設定從舊屬性過渡到新屬性花費的時間長度，俗稱持續時間。 
      div {
            -webkit-transition-duration: 1s;
            transition-duration: 1s;
        }
    3. 過渡函數 transition-timing-function：指定浏覽器的過渡速度
      【前端面試指南】CSS3新特性
      div {
            -webkit-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
        }
    4. 過渡延遲時間 transition-delay：指定一個動畫開始執行的時間 
      div {
            /* 指定元素、持續時長、過渡函數、延遲時長 */
            transition: background 0.8s ease-in 0.3, color 0.6s ease-out 0.3;
        }
    5. 關鍵幀 @keyframes 
      @keyframes changecolor {
            0% {
                background: red;
            }

            20% {
                background: blue;
            }

            40% {
                background: orange;
            }

            60% {
                background: green;
            }

            80% {
                background: yellow;
            }

            100% {
                background: red;
            }
        }

        div:hover {
            animation: changecolor 5s ease-out .2s;
        }
    6. 調用動畫 animation-name：調用 @keyframes 定義好的動畫 
      div {
            animation-name: around;
        }
    7. 設定動畫播放時間 animation-duration：指定元素播放動畫所持續的時間長 
      div {
            animation-duration: 5s;
        }
    8. 設定動畫播放方式 animation-timing-function：讓元素根據時間的推進來改變屬性值的變換速率
      【前端面試指南】CSS3新特性
      div {
            animation-timing-function: ease;
        }
    9. 設定動畫開始播放的時間 animation-delay：定義在浏覽器開始執行動畫之前等待的時間。 
      div {
            animation-delay: 3s;
        }
    10. 設定動畫播放次數：animation-iteration-count 
      div {
            animation-iteration-count: 5;
            animation-iteration-count: infinite;
        }
    11. 設定動畫播放方向 animation-direction 
      div {           
           animation-direction: normal;  /* 動畫的每次循環都是向前播放； */          
           animation-direction: alternate; /* 動畫播放在第偶數次向前播放，第奇數次向反方向播放。 */
       }
    12. 設定動畫的播放狀态 animation-play-state 
      div {            
            animation-play-state: running; /* 預設值 将暫停的動畫重新播放 */            
            animation-play-state: paused; /* 将正在播放的動畫停下來 */
        }
    13. 設定動畫時間外屬性 animation-fill-mode
      【前端面試指南】CSS3新特性
      div {
            animation-fill-mode: forwards;
        }
  8. 布局樣式相關
    1. 多列布局 columns：主要應用在文本的多列布局 
      div {
            columns: 150px 3;
        }
    2. 列間距 column-gap 
      div {
            column-width: auto;
            column-width: 20px;
        }
    3. 清單邊框 column-rule 
      div {
            column-count: auto;
            column-count: 4;
        }
    4. 列間距 column-gap 
      div {
            column-gap: normal;
            column-gap: 2em;
        }
    5. 清單邊框 column-rule：定義列與列之間的邊框寬度、邊框樣式和邊框顔色。
      【前端面試指南】CSS3新特性
      div {
            column-rule: 2px dotted green;
        }
    6. 跨列設定 column-span：橫跨所有列 
      div {
            column-span: none; /*預設值 不橫跨任何列*/
            column-span: all; /*橫跨所有列*/        
        }
    7. 盒子模型 box-sizing
      【前端面試指南】CSS3新特性
      div {
            box-sizing: border-box;
            box-sizing: content-box;
            box-sizing: inherit;
        }
  9. 響應式設計
    1. 媒體類型
      值 裝置類型
      All 所有裝置
      Braille 盲人用點字法觸覺回饋裝置
      Embossed 盲文列印機
      Handheld 便攜裝置
      Print 列印用紙或列印預覽視圖
      Projection 各種投影裝置
      Screen 電腦顯示器
      Speech 語音或音頻合成器
      Tv 電視機類型裝置
      Tty 使用固定密度字母栅格的媒介，比如電傳打字機和終端
    2. 媒體查詢：根據使用者的使用裝置的目前寬度，你的Web頁面将加載一個備用的樣式，實作特定的頁面風格。
  10. 自由縮放屬性 resize 
    div {
  resize: none; /* 使用者不能拖動元素修改尺寸大小。 */
  resize: both; /* 使用者可以拖動元素，同時修改元素的寬度和高度 */
  resize: horizontal; /* 	使用者可以拖動元素，僅可以修改元素的寬度，但不能修改元素的高度。 */
  resize: vertical; /* 使用者可以拖動元素，僅可以修改元素的高度，但不能修改元素的寬度。 */
  resize: inherit;  /* 繼承父元素的resize屬性值。 */
}
  11. 外輪廓屬性 outline[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-qPO8wzTJ-1597735261194)(/Users/light/Library/Application Support/typora-user-images/image-20200712111839521.png)] 
    div {
            outline: red solid 2px;
        }
  12. CSS生成内容 content 
    h1:before {
            content: "我是被插進來的";
            color: red;
        }
前端面試指南
上一篇: linux指令詳解 每天一個linux指令目錄
下一篇: Win7系統設定成允許遠端登入_20200317

繼續閱讀