Web前端單詞大全

1. style 修飾
   width 寬度
   height 高度
   title 想說明的
   text-align 水平對齊方式
   center 居中 left 居左 right 居右
   line-height 垂直對齊方式/行高 當行高等於高度時候垂直居中
   background 背景
   image 引入背景圖片(url)
   background-position： 背景定位(x軸，y軸；)
   background-repeat 背景平鋪
   :no-repeat;不平鋪 repeat-x;水平平鋪 repeat-y;垂直平鋪
   background：url() repeat left center #00;
   順序：背景圖片 重複 定位 顏色
   top/right/bottom/left/center 方向英文：上、右、下、左，中
   color 顏色
   
   font 文字
   font-family 字體
   font-size 字號
   font-weight：normal 正常 :bold 加粗
   font-style: normal;取消傾斜 :italic;斜體
   font:italic bold 24px/24px '楷體';
   順序：是否斜體 是否粗體 字體大小/行高 字體
   文本修飾屬性：
   text-decoration：
   overline 頂劃線
   underline 下劃線
   line-through 中劃線/刪除線
   none 無/取消下劃線
   display 轉化顯示模式 元素轉化
   block 塊
   inline 行內
   inline-block 行內塊
   
   省略號
   white-space:nowrap 強制不換行
   overflow:hidden 溢出隱藏
   text-overflow：ellipsis 省略號
   font-family：‘微軟雅黑’ 讓省略號在下面
   必須給寬度
   僞類
   a:link 設置未訪問時候的顏色 點擊後變成a的正常顏色
   a:visited 設置訪問事後顏色
   a:hover 當鼠標放上去會變顏色
   a:active 鼠標點擊變顏色
   順序 lvha 驢哈
   
   auto 自動居中
   margin 外邊距
   margin-top 上外邊距
   margin-right 右外邊距
   margin-bottom 下外邊距
   margin-left 左外邊距
   padding 內邊距
   padding-top 上內邊距
   padding-right 右內邊距
   padding-bottom 下外邊距
   padding-left 左外邊距
   float 浮動 ：left|right|none 左|右|不浮動
   cursor:pointer 小手的代碼。。
   clear：left|right|both 清除浮動
   overflow：hidden 溢出隱藏
   
   index 首頁
   base 裏面寫清除默認樣式的
   text-indent：em 首行縮進 （LOGO名字）
   之後logo 必須用H1引背景圖片 裏面寫上字
   position：relative|absolute|fixed 定位
   relative 相對定位
   absolute 絕對定位
   fixed 固定定位
   Left/top/right/bottom 定位的偏移量
   z-index 改變標籤z軸堆疊順序
   opacity 透明代碼 1不透明（0.9 0.8.。。。。） 0透明
   filter：alpha（opacity：0-100）
   
   input{outline:none} 取消焦點
   
   <form action="連接" method="">
   post 相對安全 gat 不安全
   input 表單 單標籤
   type="text" 帳號/文本
   type="password" 密碼
   type="submit" 提交
   type="button" 只是一個點擊按鈕
   type="radio" 單選框 label雙標籤 選項內容
   type="checkbox" 複選框 label雙標籤 選項內容
   value="提示 如 請輸入密碼"
   placeholder="也是提示"
   select
   option 選項欄
   textarea 下拉框
   resize：none 禁止任意拖放
   name="user" 帳號
   name="password" 密碼
   
   table{ border-collapse:collapse;} 讓border合併
   tr加
   colspan="3" 橫向合併
   rowspan="3" 縱向合併
   align 左右對齊方式 middle（左）left center right
   valign 上下對齊方式 top center bottom
   cellspacing="0" 清除外面的邊距
   cellpadding="0" 清楚裏面的邊距
   
   <table cellspacing="0" cellpadding="0">
   <thead><tr><th>表頭</th></tr></thead>
   <tbody><tr><td>表身</td></tr></tbody>
   <tfoot><tr><td>表低</td></tr></tfoot>
   </table>
   frameborder="0" 取消邊框
   screlling="no" 取消滾動條
   iframe src
   
   <frameset>
   <frame />
   </frameset>
   
   letter-spacing：具體數值 字母間距
   word-spacing：數值 單詞間距
   overflow：auto 溢出滾動
   visibility：hidden 隱藏
   charset 字符集
   utf-8 國際編碼
   gb2312/gbk 中國編碼
   author 做者
   copyright 版權
   keywords 關鍵詞
   description 介紹
   
   js
   @media screen and (max-width:900px){}; 屏幕自適應
   
   媒體 屏幕 最大
   
   push :添加一個數組元素
   document ：文檔
   pop ：刪除最後一個數組元素
   console ：控制檯
   shift ：刪除第一個數組元素
   string ：字符串
   Concat 組合數組
   undefined ：未定義
   typeof ：關鍵字
   join：數組轉化爲指定分隔符
   slice：返回指定數組
   length：數組長度
   Array：數組
   number：數字
   boolean：布爾
   alert：提示框
   parseInt：轉化爲整型數值
   continue：繼續
   is NaN：非數字
   sort：升序
   break：截斷 跳出
   reverse：倒序
   object：對象類型
   parseFloat：轉化爲浮點值
   index：索引
   floor：向下取整
   variable：變量
   ceil：向上取整
   round:四捨五入
   abs：返回絕對值
   eval：解析字符串並運算
   max：比較最大值
   return：返回
   min：比較最小值
   addEventListener：事件名 函數
   to.fixed：保留小數點
   attachEvant：（on）事件名
   random：隨機數
   eletment：元素
   eventName：事件名
   function：函數
   removeEventListener：事件解除
   detachEvent：刪除已註冊事件
   open（）：彈出一個新窗口
   function：函數（方法）
   showModalDialog：彈出一個模式窗口
   close（）：關閉當前窗口
   Date：日期對象
   getFullYear（）：年份
   getMonth（）：月份（0--11）
   getDate（）：幾號
   getDay（）：星期幾（週一至週六）
   getHours（）：小時（0--23）
   getMinites（）：分鐘
   getSeconds（）：秒數（0--59）
   getMilliseconds（）：毫秒數
   getTime（）：從1970至今的毫秒數
   Date.now（）：從1970至今的毫秒值
   tolocaleDatestring（）：輸出本地化的日期
   setTimeout：延遲時間
   tolocaleTimestring（）：輸出本地化得時間
   clearTimeout：定時器對象
   tolocalestring：輸出本地化的日期和時間
   setInterval：間隔時間
   clearInterval：中止
   window.status：瀏覽器狀態欄信息
   window.screen：屏幕信息
   screen.width：屏幕寬度
   screen.height：屏幕高度
   screen.availwidth：去掉任務欄寬度
   screen.avaiheight：去掉任務欄高度
   history：瀏覽歷史記錄
   location：地址欄對象
   navigator：用於獲取用戶瀏覽器信息
   appCodeName：瀏覽器代碼名的字符串表示
   appName：返回瀏覽器的名稱
   appVersion：返回瀏覽器的平臺和版本信息
   platform：返回運行瀏覽器的操做系統平臺
   userAgent：返回由客戶機發送服務器的
   user-agent：頭部的值
   Exception：異常 意外狀況（try---catch）
   獲取元素對象方式:
   getElementByld：
   getElementsByName：
   gatElementsByTagName：
   getElementByClassName：
   onlick 當點擊的時候
   onmouseover 鼠標移入
   onmouseout 鼠標移出
   onblur：失去焦點事件
   onkeydown：鍵盤按下事件（前）
   onkeypress：鍵盤按下事件（後）
   onload：當頁面加載完成以後觸發
   onchange;內容改變事件
   onkeydown;鍵盤按下事件（前）
   onkeyup;鍵盤松開事件
   onkeypress;鍵盤按下事件（後）
   onmouseout：鼠標移出事件
   onmouseover：鼠標移入事件
   onselect：內容被選中事件
   ondblclick：鼠標雙擊事件
   onfocus：得到焦點事件
   onkeyup：鍵盤松開事件
   複選框操做 checked=" "
   checked 默認選中
   false 不選中
   true 選中
   typeof 查看數據類型
   object 對象
   number 數字
   string 字符串
   function 函數
   boolean 布爾值 true false
   undefined 未定義
   parseInt 整數
   parseFloat 浮點數/小數
   Number 數字
   
   hide 隱藏
   show 顯示
   skin 皮膚
   code 代碼
   even 事件
   array 數組
   integer 整數
   veruant 變量
   common 公用
   switch
   case 狀況
   break 中斷整個循環
   continue 跳出本次循環
   default 不履行/全部狀況都不知足的時候走這個
   null 沒有/空對象
   computed 計算後/生效的
   eval（JS能夠讀懂的代碼：如‘1+1’->字符串） 這個代碼會把（）裏面的字符串換成計算機讀懂的代碼來計算 + - * % 都行 （計算用的）
   return 返回
   write 輸入
   find 查找
   
   interval 間隔
   setInterval（函數名，1000/） 間隔定時器
   clearInterval 清除間隔定時器
   Timeout 超時
   setTimeout 延遲定時器
   clearTimeout 清除延遲定時器
   obj.disabled 讓按鈕/變成不可以使用
   true 不可用
   false 可用
   date 時間
   get 獲取
   set 設置
   Fullyear 滿年
   month 月 （從0月開始）
   day 日 獲取須要 date
   week 星期 獲取須要day （從0到6）
   hours 小時
   minutes 分鐘
   seconds 秒
   single 一個/一倍
   dubble 兩個/兩倍
   triple 三個/三倍
   
   arguments 函數傳參-實參的集合
   arguments.length 函數傳參-實參的長度
   arr.push（） 向數組最後添加一項
   arr.unshift() 向數組前面添加一項
   arr.pop（）刪除數組最後一位.
   arr.shift（） 刪除數組第一位
   arr.splice(開始的位置，刪除的個數，添加的東西1。。。)
   arr.join('') 變字符串 是中間的隔開東西 如- ，空格 等等。。。
   arr.concat(arr1,arr2,arr..要拼接的數組...); 數組拼接/合併數組
   arr.reverse() 反轉/顛倒數組
   arr.sort() 數組排序 按照字符串比大小的方法來排序
   arr.sort(function(a1,a2){ return a1-a2 //從小到大 return a2-a1 //從大到小 }) a1 a2隨便起 表明的是數組中隨機的某兩項
   str.charAt() 字符串裏面的下標
   str.indexOf(‘’) 下字符串對應的下標數（相同的就取第一個）
   str.lastIndexOf（‘’）下字符串對應的下標數（相同的就取最後一個）
   str.substring (開始位置，結束位置)/（開始位置-不寫結束位置默認就從開始位置到最後） 截取子串
   str.toUpperCase() 大寫字母
   str.toLowerCase() 小寫字母
   str.split(切割的方式 '-' '' '空格'等) 切割變成數組
   str.charCodeAt('a') 輸入字符查找對應的編碼
   String.fromCharCode(編碼) 輸入編碼查找對應的字符
   json.name=value; 添加
   delete json.name 刪除
   token 括號
   try catch(e) 異常
   math.random() 求隨機數
   parseInt（math.random()（m-n）+n） 求n-m之間隨機的整數， 前包括後不包括
   math.abs() 求絕對值
   math.max(，，，) 求最大值
   math.min(，，，) 求最小值
   math.pow(n,m) 求n的m次方
   math.sqrt(a) 開方
   math.PI π
   math.ceil(12.3) 向上取整 13
   math.floor(12.3) 向下取整 12
   math.round(a) 四捨五入
   !important Css樣式值後面加這個 權重最大
   navigator.userAgent UA 例子判斷瀏覽器的類型
   navigator.language 語言
   navigator.platform 操做系統
   
   Sibling 兄弟
   next 下一個
   previous 上一個
   獲取元素/節點：
   (父級) obj.children 找：兒子/子級 子節點
   (子級) obj.parentNode 找：父親/父級 父節點
   (同級) obj.nextElementSibling || obj.nextSibling 下一個同級/節點 (同級) obj.previousElementSibling || obj.prenviousSibling 上一個同級/節點
   (父級) obj.firstElementChild ||obj.firstChild 首節點
   (父級) obj.lastElementChild || obj.lastChild 尾節點
   建立元素：
   document.createElement_x('標籤名') 建立元素
   添加插入
   (父級) obj.appendChild(誰) 往元素裏面最後添加一個
   帶剪切效果
   (父級) obj.insertBefore(把誰，加在誰的前面) 往元素裏面添加一個
   帶剪切效果
   刪除元素：
   (父級) obj.removeChild(子級) 刪除子級
   window.open() 打開
   window.close() 關閉
   a標籤：target=""
   不填 默認新頁面打開
   _blank 新頁面打開
   _self 本頁面打開
   window.location 地址欄信息
   window.location.href 連接信息
   window.location.search 數據信息
   window.location.hash 錨點信息
   *瞭解就行 面試背住
   window.location.procotol 協議信息
   window.location.hostname 域名信息
   window.location.port 端口號信息
   window.location.pathname 路徑信息
   
   back 返回
   forward 向前
   history 歷史
   window.history.back 返回歷史記錄 退
   window.history.forward 返回歷史記錄 前
   alert（） 彈
   confirm 詢問提示框
   prompt 問答提示框
   console.log（） 在F12中顯示;
   document.write（*） 在頁面中輸入
   scroll 滾動 有兼容問題
   client 客戶端/可視區
   offsetHeight/Width 物體盒子模型的寬高
   offsetTop/Bottom/方向 物體距上/下/左/右的距離
   offsetparent 定位父級
   window.onScroll 當滾動的時候 滾動事件
   window.onresize 當縮放的時候 縮放事件
   onfocus 當獲取焦點的時候
   onblur 當失去焦點的時候
   obj.getAttribute('屬性名') 獲取屬性名對應的屬性值
   obj.setAttribute('屬性名','屬性值') 設置屬性
   obj.removeAttribute('屬性名') 刪除屬性
   
   event 事件
   onmousemove 鼠標移動事件
   onload 當圖片加載完成時
   onerror 當圖片加載失敗時
   cancelBubble 取消冒泡
   onkeydown 當按鍵按下的時候
   onkeyup 當按鍵擡起的時候
   oEvent.keycode 鍵盤編碼
   oncontextmenu 當按右鍵的時候
   return false 阻止瀏覽器右鍵菜單
   cache 緩存
   
   onmousedown 鼠標按下時
   onmouseup 鼠標擡起時
   onmousemove 鼠標移動事件
   obj.setCapture() 開始捕獲
   obj.releaseCapture() 取消捕獲
   obj.cloneNode() 克隆複製一個節點
   document/obj.addEventListener（'不加on的事件名',函數名,false） 添加事件綁定 兼容高級
   document/obj.attachEvent（'加on的事件名',函數名） 添加事件綁定 兼容IE系列
   document/obj.removeEventListener（'不加on的事件名',函數名,false） 解除事件綁定
   document/obj.detachEvent（'加on的事件名',函數名） 解除事件綁定
   
   onmouseenter 鼠標移入
   onmouseleave 鼠標移出
   onmousewheel 鼠標滾輪事件
   DOMMouseScroll 鼠標滾動事件
   oEvent.wheelDelta 非火狐 測試鼠標滾輪向上向下彈得數字
   oEvent.detail 火狐 測試鼠標滾輪向上向下彈得數字
   
   return false 阻止瀏覽器默認事件 可是在事件綁定中失效
   oEvent.preventDefoult 在事件綁定中用 阻止瀏覽器默認事件（若是單獨用只兼容高級瀏覽器）
   oninput 當輸入的時候 iE9- 沒有此方法
   onpropertychange 當屬性改變的時候 IE系列
   oEvent.srcElement 事件源 非火狐
   oEvent.target 事件源 高級瀏覽器
   
   duration 期間
   start 開始
   count 次數
   complete 完成
   var bFlag=false/ture 開關 自定義
   
   easing 速度類型：
   linear 勻速
   ease-in 加速
   ease-out 減速
   window.onload 頁面加載完畢後執行（代碼、資源）
   DOMReady 頁面加載完畢後執行（代碼）
   DOMContentLoaded DOM加載事件
   obj.onreadystatechange 監控事件（模擬DOM加載事件）
   readyState 加載狀態
   document/obj.readyState 加載狀態
   ondbclick 鼠標雙擊
   queryselector 新的獲取元素方法
   
   window.location.reload 從新加載
   
   cookie
   expires 期限
   session 一個會話（瀏覽器打開和關閉）
   path 路徑
   define 定義
   require 引用其餘模塊
   exports 導出模塊
   module 批量導出模塊，
   data-main 主要數據/初始化接口
   
   success 成功
   error 失敗
   
   Request 請求
   ActiveX 瀏覽器插件
   XMLHttpRequest（） ajax 建立/ 不兼容ie6-
   ActiveXObject（'Microsoft.XMLHTTP'） 建立/(插件) ie系列
   
   oAjax.open()打開
   oAjax.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
   oAjax.send() 發送
   onreadystatechange 接收/當通訊狀態變化
   
   oAjax.abort() 使停止
   oAjax.readyState 是否完成/加載狀態
   oAjax.status 是否成功
   response 回答/響應
   oAjax.responseText 返回結果
   
   JSON.parse() 能夠把字符串json變成json 不過json要正規些 雙引號
   JSON.stringify() json打印出來的方法
   
   encode 編碼
   decode 解碼
   Component 組件/元件
   encodeURIComponent('中文') 中文轉化成編碼
   decodeURIComponent('編碼') 編碼轉化成中文
   
   str.replace 替換
   new RegExp() 正則表達式
   str.search() 跟indexOf同樣 在正則用
   str.match 匹配
   
   正則.test（你要校驗的str） true 正確知足 false 不知足 用這個的時候必定配合行首和行尾
   轉譯
   \d 數字 [0-9]
   \w 數字、英文、下劃線 [0-9a-z]
   \s 空白字符 全部的空白字符
   . 表明任意字符
   \D 非數字 [^0-9]
   \W 非數字、英文、下劃線 [^0-9a-z]
   \S 非空白字符
   \u4e00-\u9fa5 中文
   量詞
   {n} n個
   {n,m} n-m個
   {n,} 最少n個，最多隨便
   {0，m} 最少隨便 最多m個
   
   {1，} 就是 若干個
   {0，} 任意個 能夠沒有
   ？ {0,1} 最少沒有 最多1個
   \ 轉譯特殊字符
   
   | 或的意思
   i 忽略大小寫
   g 全局匹配
   m 多行模式
   
   ^ 行首 若是在方括號裏面是除了
   $ 行尾
   *jq
   hide 隱藏
   show 顯示
   toggle 點擊
   hover 移入
   fadeIn 淡入
   fadeOut 淡出
   animate 運動函數（move）
   slideDown 滑動從上往下出來
   slideUp 滑動從下往上隱藏
   eq(下標) 標籤獲取的下標
   li>a li下面的第一級a
   僞類選擇器:
   li:last li最後一個
   li:first li第一個
   li:eq(2) 第三個li
   obj：even 偶數
   obj：odd 奇數
   obj：has("p/標籤名") 裏面包含‘p’這個標籤的就會選取
   obj：contains("p/內容") 內容有得‘p’ 就都會選取
   event/本身起行參名字.pageX X軸座標
   event/本身起行參名字.pageY Y軸座標
   offset().top 物體絕對的位置 ->getPos()函數
   offset().left 物體絕對的位置
   position().top 物體距定位父級距離 ->offsetTop
   position().left 物體距定位父級距離
   document.scrollTop 和原生同樣
   document.scrollLeft 和原生同樣
   .width/.height 物體自己的寬高
   innerHeight/Width 物體內部的寬高 包括padding 不包括邊框
   outerHeight/Width 物體盒子模型寬高
   父級.append(子級) 在父級內的後部追加
   父級.prepend(子級) 在父級內的前面追加
   子級.appendTo(父級) 在父級後部追加
   子級.prependTo(父級) 在父級前部追加
   obj1.after(obj2) 把2放在1的後面
   obj1.before(obj2) 把2放在1的前面
   bind() 事件綁定
   unbind() 事件解綁
   live() 事件委託
   die() 解除事件委託
   **以上四種不推薦 由於原理仍是昂 因此推薦on
   obj.on（） 能夠事件綁定/委託
   
   each 循環
   $.trim() 去除首尾空格
   
   extend() 延伸
   height() 就是寬度
   innerHeight 包括padding、不包括邊框
   outerHeight 盒子模型的
   offset().left -> getPos()
   position().left -> offsetLeft()
   scrollTop() -> scrollTop
   eve.pageX/Y 座標
   maxlength 表單元素最大長度 屬性
   $.fn.函數名=function(){} 創建jq封裝函數
   $.fn.extend({函數名1:function(){},函數名2:function(){},...})
   
   漢字：[0x4e00,0x9fa5]（或十進制[19968,40869]）
   數字：[0x30,0x39]（或十進制[48, 57]）
   小寫字母：[0x61,0x7a]（或十進制[97, 122]）
   大寫字母：[0x41,0x5a]（或十進制[65, 90]）
   parent() 父級
   offsetParent() 定位父級
   parents() 全部父級 括號裏面能夠篩選 好比放class名字或...
   str/arr.slice（開始位置，結束位置） 切 從開始到結束 若是隻有開始 就從開始到最後。 前包後不包
   
   prototype 原型
   form表單中 submit 提交 reset 重置
   xxx instanceOf xxx 檢測一個對象屬於某個類
   xxx.constructor==xxx 看構造函數 雙等是判斷 直接父級屬不屬於xxx 一個等號是賦值讓直接父級等於xxx
   fn.call(this的指向，參數一，參數二，....) 改變this的指向 fn中的this=
   fn.apply(this的指向，[參數一，參數二，....]) 改變this的指向 fn中的this=
   init 開始
   
   localStorage 本地存儲
   通常的規範
   localStorage.name=value 存
   localStorage.name 取
   delete localStorage.name 刪除一條
   localStorage.clear() 刪除所有
   規範的存取
   localStorage.setItem(name,value)
   localStorage.getItem(name)
   localStorage.removeItem(name)
   sessionStorage 臨時存儲 和localStorage同樣用法
   include() 包含
   template.defaults.openTag=''; 自定義模板開始樣子
   template.defaults.closeTag=''; 自定義模板結束樣子
   template.config('openTag','')
   template.config('closeTag','')
   template.config('escape',true/false) true不默認轉譯 false默認轉譯
   
   m model 模型
   v view 視圖
   c controller 控制器
   scope 範圍 做用域
   then 而後
   model模型
   bind綁定
   ng-app=""; 引用其餘模塊
   ng-model="" 數據從哪來
   ng-bind="" 或 model 或 {{xxx}} 數據到哪去
   ng-init 初始化
   ng-repeat 循環
   angular.module('名字',[依賴模塊).controller('名字',function(依賴項){})
   $scope
   $http
   $interval
   $timeout
   ` 反單引號 包住字符串 拼接是這樣 ${}
   
   |currency:"" 貨幣
   date:"" 時間戳轉化處理
   route 路由/狀態
   filter 過濾器
   directive 指令
   restrict 類型 E:'element' C:'class' M:'comment' A:'attribute'
   service 依賴
   oDate.toString() 獲取正常時間
   creator.ionic.io 作手機端的框架網站不錯
   
   ng-show true false 顯示 隱藏
   ng-hide true false 隱藏 顯示
   ng-clack
   comment 註釋
   bundle 打包
   transclude 嵌入
   params 參數
   provider 提供者
   .config() 配置
   $scope.$watch(數據，fn)
   template 模板
   templateUrl:'模板地址' 模板
   $ bower install * 下載東西用的
   ReactDOM.render(什麼東西，渲染到哪)
   type='text/babel'
   state 狀態
   extends 延伸 繼承
   constructor 建立
   super 超類/父類
   component 組件
   React.Component
   this.props.屬性
   組件中 ref和正常的ID相似
   
   vue
   el：'id'
   data:{}
   $index
   capitalize 首字母大寫
   uppercase 變大寫字母
   lowercase 變小寫字母
   ev.stoppropagation() 阻止冒泡
   ev.preventDefault() 阻止默認事件 angular
   angular.bind(this的指向，要改變指向的函數名，參數)
   bootstrap 開啓應用模式
   copy(複製誰,複製到哪裏) 複製/克隆
   equals(a,b) 比較
   forEach 循環
   fromJson 字符串json轉化成json
   extend（obj，obj1，obj2。。。） 擴展
   
   標籤裏面屬性 transition="名字" 過渡 動畫
   .名字-
   transition 過渡
   transition：時間 讓誰變/all ease;
   enter 進來
   leave 出去
   route 路由/狀態
   watch 監控
   props 存東西 可在替換模板身上用
   Router-view 狀態視圖
   v-link="{path:名字
   animation:8s test/名字 linear infinite/數值/次數;
   background-size 背景尺寸
   contain 以最合適的狀態展現 可能會留白
   cover 儘量填滿
   nth-child(下標 注意：從1開始) 注意:項目不用這個。禁用
   nth-of-type(下標 注意：從1開始) 注意:項目不用這個。禁用
   background-origin： 背景從哪裏開始
   content-box
   border-box
   padding-box
   background-clip： 背景從哪裏開切
   content-box
   border-box
   padding-box