整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          前端常見面試題總結-HTML篇

          、關于HTML語義化,你知道都有哪些標簽?

          語義化就是讓計算機能夠快速讀懂內容,高效的處理信息。搜索引擎只能通過標簽來判斷內容的語義,因為頁面的很大一部分流量來自搜索引擎,要使頁面盡可能地對搜索引擎友好,所以盡可能地使用語義化標簽,如:

          div是division分離,span是span范圍,table是表格,ol是orderList有序列表,ul是unorderList無序列表,li是list item列表選項,html5進一步推進web語義化的發展,使用了一些新的標簽有header、artical、address等。

          2、HTML標簽分類有哪些?都有啥特點?

          • 塊級標簽

          默認寬度是100%

          塊級標簽獨占一行

          塊級標簽可以使用height設置高度

          常見塊級標簽:div、p、h1~h6、ol、ul、table、form等等。

          • 行級標簽

          默認寬度由內容撐開

          行級標簽不會自動換行,從左到右一次排列

          行級標簽height設置高度失效,高度由內容撐開。

          常見行級標簽:span、a、br、strong、lable、i、em。

          • 行內塊標簽

          結合行級和塊級的優點

          可以設置元素的寬高

          還可以將多個元素顯示在一行從左到右一次排列。

          常見行內塊標簽:img、input。


          3、網頁編碼設置有幾種方式?

          Charset屬性規定HTML文檔的字符編碼,常見的屬性值有以下幾個:

          • UTF-8(8-bit Unicode Transformation Format)是一種針對Unicode的可變長度字符編碼,又稱萬國碼。用在網頁上可以同一頁面顯示中文簡體繁體以及其他語言。
          • GBK是漢字編碼,是雙字節碼,可表示簡體和繁體字。
          • ISO8859-2字符集,也稱Latin-2,收集了東歐字符。


          4、HTML的框架優缺點有哪些?

          Html框架有iframe和frame兩個,將多個頁面通過一個瀏覽器窗口顯示。

          框架的優點:

          • 重載頁面時不需要重載整個頁面,只需要重載頁面中的一個框架頁,減少數據傳輸,加快網頁加載速度。
          • Iframe使用簡單不需要引入任何插件,主要用于不需要搜索引擎搜索的頁面。
          • 方便制作導航,多個頁面共用,方便開發和維護。

          缺點:

          • 會產生很多頁面,不容易管理。
          • 不方便打印,不能實現對frameset的打印。
          • 瀏覽器后退按鈕失效。
          • 不利于SEO優化,不能為每個頁面設置標題和關鍵字,影響搜索。
          • 多數小型移動設備無法完全顯示框架。
          • 多框架頁面會增加服務器的http請求。
          • H5已經拋棄該標簽。


          5、HTML5有哪些新特性,移除了哪些元素?

          H5新增了圖像、位置、存儲、多任務等功能。

          新增元素:

          • Canvas
          • video和audio元素
          • 本地離線緩存:localStorage長期存儲,瀏覽器關閉之后數據不丟失,sessionStorage的數據在瀏覽器關閉后自動刪除。
          • 語義化標簽:artical、footer、header、nav、section
          • 位置API:Geolocation
          • 表單控件:calendar、date、time、email、search、url
          • 新技術:web worker(運行在后臺的js,獨立于其他腳本,不影響頁面性能。可以在頁面繼續任何操作,此時web worker在后臺運行)、web socket
          • 拖放API:drag、drop

          移除元素:

          • 框架元素:frame、frameset、noframes。
          • 純表現元素:basefont、font、center、u、big、strike、tt

          Html5新增了 27 個元素,廢棄了 16 個元素,根據現有的標準規范,把 HTML5 的元素按優先級定義為結構性屬性、級塊性元素、行內語義性元素和交互性元素 4 大類。


          6、如何區分HTML和HTML5?

          DOCUMENT聲明方式是區分的重要元素。

          • Html聲明方式:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd”>
          • Html5聲明方式:<!DOCTYPE html>

          根據新增加的結構、功能來區分。H5有好多新增語義化標簽。


          7、H5文件離線存儲怎么使用,工作原理是什么?

          在線情況下,瀏覽器發現html頭部有manifest屬性,它會請求manifest文件,如果是第一次訪問那么瀏覽器就會根據manifest文件的內容下載相應的資源,并進行離線存儲。如果已經訪問過并且資源已經離線存儲了,那么瀏覽器就會使用離線的資源加載頁面。然后瀏覽器會對比新的manifest文件與舊的manifest文件,如果文件沒有改變,就不會有任何操作,如果文件改變了,那么就會重新下載資源,并進行離線緩存。

          頁面頭部加入manifest屬性。如:<html manifest="demo.appcache">

          在cache.manifest文件中編寫離線存儲的資源。


          8、Cookies,sessionStorage和localStorage的區別?

          共同點:都是保存在瀏覽器端,而且都是同源的。

          區別:

          • Cookies是為了標識用戶身份而存儲在用戶本地的數據,始終在同源http請求中攜帶,在瀏覽器與服務器間來回傳遞,而sessionStorage和localStorage不會自動把數據發給服務器,僅在本地保存。
          • 存儲大小差異。Cookie保存的數據很小,不能超過4k,而sessionStorage和localStorage保存數據大,可達到5M。
          • 存儲有效期不同。Cookie在設置的cookie過期前始終有效,而sessionStorage僅在瀏覽器關閉之前有效,localStorage始終有效,與瀏覽器窗口沒關系。
          • 作用域不同:cookie在所有同源窗口都是共享,sessionStorage不能在不同瀏覽器窗口上共享,localStorage在所有同源窗口都是共享的。


          9、title與h1的區別、b與strong的區別、i與em的區別?

          title屬性沒有明確意義,只表示標題,h1表示層次明確的標題,對頁面信息抓取也有很大的影響。

          strong標明重點內容,語氣加強含義,b表示無意義的視覺表示

          em表示強調文本,i是斜體,是無意義的視覺表示

          視覺樣式標簽:b、u、i、s

          語義樣式標簽:strong、em、ins、del、code


          10、viewport 所有屬性 ?

          viewport是用戶網頁的可視區域,使用meta設置viewport時有很多屬性,分別對以下各個屬性介紹

          • width :設置layout viewport的寬度,為一個正整數,或字符串'device-width';
          • initial-scale:設置頁面的初始縮放值,為一個數字,可以帶小數。
          • minimum-scale:允許用戶的最小縮放值,為一個數字,可以帶小數。
          • maximum-scale:允許用戶的最大縮放值,為一個數字,可以帶小數。
          • height:設置layout viewport的高度,這個屬性對我們并不重要,很少使用
          • user-scalable:是否允許用戶進行縮放,值為‘no’或者‘yes’。
          • target-densitydpi:值可以為一個數值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 這幾個字符串中的一個

          安卓中還支持:target-densitydpi,表示目標設備的密度等級,作用是決定css中的1px 代表多少物理像素。


          11、meta標簽的name屬性值?

          name屬性主要用于描述網頁,與之對應的屬性值為content,content中的內容主要是便于搜索機器人查找信息和分類信息用的。

          Meta標簽的name屬性語法格式是:

          <meta name=”參數”content=”具體的參數值”>

          Name主要有以下幾個參數:

          • Keywords(關鍵字):關鍵字用來告訴搜索引擎你網頁的關鍵字是什么。
          • Description(網站內容描述):描述用來瀏覽器你的網頁主要內容是什么。
          • Robots(機器人向導):robots用來搜索機器人哪些頁面需要索引,哪些頁面不需要索引。
          • Author(作者):添加網頁作者信息。

          Content的參數主要有name的參數來決定,如果是關鍵字的時候,多個關鍵字之間使用逗號隔開,一般使用5個關鍵字為宜;如果是描述的時候,描述長度一般控制在200字左右;如果是索引的時候,一般使用inde、noindex、none、all,默認是all。

          文來源于:程序員成長指北;作者:去偽存真

          如有侵權,聯系刪除


          背景


          最近在項目中要實現一個拖拽頭像的移動效果,一直對JS Dom拖拽這一塊不太熟悉,甚至在網上找一個示例,都看得云里霧里的,發現遇到最大的攔路虎就是JS Dom各種各樣的距離,讓人頭暈眼花,看到一個距離屬性,大腦中的印象極其模糊,如同有一團霧一樣,不知其確切含義。果然是基礎不牢,地動山搖。今天決心夯實一下基礎,親自動手驗證一遍dom各種距離的含義。


          JS Dom各種距離釋義


          下面我們進入正題, 筆者不善于畫圖, 主要是借助瀏覽器開發者工具,通過獲取的數值給大家說明一下各種距離的區別。


          第一個發現 window.devicePixelRatio 的存在


          本打算用截圖軟件丈量尺寸,結果發現截圖軟件顯示的屏幕寬度與瀏覽器開發者工具獲取的寬度不一致,這是為什么呢?


          • 截圖軟件顯示的屏幕寬度是1920



          • window.screen.width顯示的屏幕寬度是1536



          這是怎么回事?原來在PC端,也存在一個設備像素比的概念。它告訴瀏覽器一個css像素應該使用多少個物理像素來繪制。要說設備像素比,得先說一下像素和分辨率這兩個概念。


          • 像素 屏幕中最小的色塊,每個色塊稱之為一個像素(Pixel)



          • 分辨率 分辨率=屏幕水平方向的像素點數 * 屏幕垂直方向的像素點數; 另外說一下,關于分辨率有多種定義,可以細分為顯示分辨率[1]、圖像分辨率[2]、打印分辨率[3]和掃描分辨率[4]等,此處是指顯示分辨率。



          • 設備像素比


          設備像素比的定義是:


          window.devicePixelRatio =顯示設備物理像素分辨率顯示設備CSS像素分辨率\frac{顯示設備物理像素分辨率}{顯示設備CSS像素分辨率}顯示設備CSS像素分辨率顯示設備物理像素分辨率


          根據設備像素比的定義, 如果知道顯示設備橫向的css像素值,根據上面的公式,就能計算出顯示設備橫向的物理像素值。


          顯示設備寬度物理像素值 = window.screen.width * window.devicePixelRatio;


          設備像素比在我的筆記本電腦上顯示的數值是1.25, 代表一個css邏輯像素對應著1.25個物理像素。



          我前面的公式計算了一下,與截圖軟件顯示的像素數值一致。這也反過來說明,截圖軟件顯示的是物理像素值。



          • window.devicePixelRatio 是由什么決定的 ?


          發現是由筆記本電腦屏幕的縮放設置決定的,如果設置成100%, 此時window.screen.width與筆記本電腦的顯示器分辨率X軸方向的數值一致,都是1920(如右側圖所示), 此時屏幕上的字會變得比較小,比較傷視力。



          • 邏輯像素是為了解決什么問題?


          邏輯像素是為了解決屏幕相同,分辨率不同的兩臺顯示設備, 顯示同一張圖片大小明顯不一致的問題。比如說兩臺筆記本都是15英寸的,一個分辨率是1920*1080,一個分辨率是960*540, 在1920*1080分辨率的設備上,每個格子比較小,在960*540分辨率的設備上,每個格子比較大。一張200*200的圖片,在高分率的設備上看起來會比較小,在低分辨率的設備上,看起來會比較大。觀感不好。為了使同樣尺寸的圖片,在兩臺屏幕尺寸一樣大的設備上,顯示尺寸看起來差不多一樣大,發明了邏輯像素這個概念。

          規定所有電子設備呈現的圖片等資源尺寸統一用邏輯像素表示。然后在高分辨率設備上,提高devicePixelRatio, 比如說設置1920*1080設備的devicePixelRatio(dpr)等于2, 一個邏輯像素占用兩個格子,在低分辨率設備上,比如說在960*540設備上設置dpr=1, 一個css邏輯像素占一個格子, 這樣兩張圖片在同樣的設備上尺寸大小就差不多了。通常設備上的邏輯像素是等于物理像素的,在高分辨率設備上,物理像素是大于邏輯像素數量的。由此也可以看出,物理像素一出廠就是固定的,而設備的邏輯像素會隨著設備像素比設置的值不同而改變。但圖片的邏輯像素值是不變的。


          document.body、document.documentElement和window.screen的寬高區別


          差別是很容易辨別的,如下圖所示:


          • document.body -- body標簽的寬高
          • document.documentElement -- 網頁可視區域的寬高(不包括滾動條)
          • window.screen -- 屏幕的寬高



          • 網頁可視區域不包括滾動條


          如下圖所示,截圖時在未把網頁可視區域的滾動條高度計算在內的條件下, 截圖工具顯示的網頁可視區域高度是168, 瀏覽器顯示的網頁可視區域的高度是167.5, 誤差0.5,由于截圖工具是手動截圖,肯定有誤差,結果表明,網頁可視區域的高度 不包括滾動條高度。寬度同理。



          • 屏幕和網頁可視區域的寬高區別如下:


          屏幕寬高是個固定值,網頁可視區域寬高會受到縮放窗口影響。



          • 屏幕高度和屏幕可用高度區別如下:


          屏幕可用高度=屏幕高度-屏幕下方任務欄的高度,也就是:


          window.screen.availHeight = window.screen.height - 系統任務欄高度



          scrollWidth, scrollLeft, clientWidth關系


          scrollWidth(滾動寬度,包含滾動條的寬度)=scrollLeft(左邊卷去的距離)+clientWidth(可見部分寬度); 
          // 同理 
          scrollHeight(滾動高度,包含滾動條的高度)=scrollTop(上邊卷去的距離)+clientHeight(可見部分高度);


          需要注意的是,上面這三個屬性,都取的是溢出元素的父級元素屬性。而不是溢出元素本身。本例中溢出元素是body(document.body),其父級元素是html(document.documentElement)。另外,


          溢出元素的寬度(document.body.scrollWidth)=父級元素的寬度(document.documentElement.scrollWidth) - 滾動條的寬度(在谷歌瀏覽器上滾動條的寬度是19px)



          <!DOCTYPE html> 
          <html lang="en"> 
            <head>     
              <meta charset="UTF-8">     
              <meta http-equiv="X-UA-Compatible" content="IE=edge">     
              <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->     
              <title>JS Dom各種距離</title>     
              <style>         
                html, body {             
                  margin: 0;         
                }         
                body {             
                  width: 110%;             
                  border: 10px solid blue;         
                }         
                .rect {             
                  height: 50px;             
                  background-color: green;         
                }     
              </style> 
            </head> 
            <body>     
              <div id="rect" class="rect"></div> 
            </body> 
          </html>
          


          元素自身和父級元素的scrollWidth和scrollLeft關系?


          從下圖可以看出:


          • 元素自身沒有X軸偏移量,元素自身的滾動寬度不包含滾動條
          • 父級元素有X軸便宜量, 父級元素滾動寬度包含滾動條


          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
              <title>JS Dom各種距離</title>
              <style>
                  div {
                      border: 1px solid #000;
                      width: 200px;
                      height: 600px;
                      padding: 10px;
                      background-color: green;
                      margin: 10px;
                  }
              </style>
          </head>
          
          <body>
              <div class="rect">    111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
              </div>
          </body>
          <script>
          </script>
          </html>
          


          offsetWidth和clientWidth的關系?


          offsetWidth和clientWidth的共同點是都包括 自身寬度+padding , 不同點是offsetWidth包含border


          如下圖所示:


          • rect元素的clientWidth=200px(自身寬度) + 20px(左右padding) = 220px
          • rect元素的offsetWidth=200px(自身寬度) + 20px(左右padding) + 2px(左右boder) = 222px



          <!DOCTYPE html>
          <html lang="en">
          
          <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
              <title>JS Dom各種距離</title>
              <style>
                  div {
                      border: 1px solid #000;
                      width: 200px;
                      height: 100px;
                      padding: 10px;
                      background-color: green;
                      margin: 10px;
                  }
              </style>
          </head>
          
          <body>
              <div class="rect">111111111111111111111111111111111111111111111111</div>
          </body>
          <script>
          
          
          </script>
          
          </html>
          


          event.clientX,event.clientY, event.offsetX 和 event.offsetY 關系


          代碼如下,給rect元素添加一個mousedown事件,打印出事件源的各種位置值。


          <!DOCTYPE html>
          <html lang="en">
          
          <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
              <title>JS Dom各種距離</title>
              <style>
                  html,
                  body {
                      margin: 0;
                  }
          
                  body {
                      width: 200px;
                      padding: 10px;
                      border: 10px solid blue;
                  }
          
                  .rect {
                      height: 50px;
                      background-color: green;
                  }
              </style>
          </head>
          
          <body>
          
              <div id="rect" class="rect"></div>
          
          
          </body>
          <script>
              const rectDom = document.querySelector('#rect');
          
              rectDom.addEventListener('mousedown', ({ offsetX, offsetY, clientX, clientY, pageX, pageY, screenX, screenY }) => {
                  console.log({ offsetX, offsetY, clientX, clientY, pageX, pageY, screenX, screenY });
              })
          </script>
          
          </html>
          
          


          我們通過y軸方向的高度值,了解一下這幾個屬性的含義。 綠色塊的高度是50px, 我們找個特殊的位置(綠色塊的右小角)點擊一下,如下圖所示:


          • offsetY=49, 反推出這個值是相對于元素自身的頂部的距離
          • clientY=69, body標簽的border-top是10,paiding是10, 反推出這個值是相對網頁可視區域頂部的距離
          • screenY=140,目測肯定是基于瀏覽器窗口,


          所以它們各自的含義,就很清楚了。



          事件源屬性

          表示的距離

          event.offsetX、event.offsetY

          鼠標相對于事件源元素(srcElement)的X,Y坐標,

          event.clientX、event.clientY

          鼠標相對于瀏覽器窗口可視區域的X,Y坐標(窗口坐標),可視區域不包括工具欄和滾動偏移量。

          event.pageX、event.pageY

          鼠標相對于文檔坐標的x,y坐標,文檔坐標系坐標 = 視口坐標系坐標 + 滾動的偏移量

          event.screenX、event.screenY

          鼠標相對于用戶顯示器屏幕左上角的X,Y坐標


          • pageX和clientX的關系


          我們點擊下圖綠色塊的右下角,把pageX和clientX值打印出來。如下圖所示:


          • 可視區域的寬度是360,點擊點的clientX=359(由于是手動點擊,有誤差也正常)
          • 水平方向的偏移量是56
          • pageX是415,360+56=416,考慮到點擊誤差,可以推算出 ele.pageX = ele.clientX + ele.scrollLeft



          getBoundingClientRect獲取的top,bottom,left,right的含義


          從下圖可以看出,上下左右這四個屬性,都是相對于瀏覽器可視區域左上角而言的。



          從下圖可以看出,當有滾動條出現的時候,right的值是359.6,而不是360+156(x軸的偏移量), 說明通過getBoundingClientRect獲取的屬性值是不計算滾動偏移量的,是相對瀏覽器可視區域而言的。



          movementX和movementY的含義?


          MouseEvent.movementX/movementX是一個相對偏移量。返回當前位置與上一個mousemove事件之間的水平/垂直距離。以當前位置為基準, 鼠標向左移動, movementX就是負值,向右移動,movementX就是正值。鼠標向上移動,movementY就是負值,向下移動,movementY就是正值。數值上,它們等于下面的計算公式。 這兩個值在設置拖拽距離的時候高頻使用,用起來很方便。


          curEvent.movementX = curEvent.screenX - prevEvent.screenX; 
          curEvent.movementY = curEvent.screenY - prevEvent.screenY;


          想移動元素,mouse和drag事件怎么選?


          mouse事件相對簡單,只有mousedown(開始),mousemove(移動中),mouseup(結束)三種。與之對應的移動端事件是touch事件,也是三種touchstart(手指觸摸屏幕), touchmove(手指在屏幕上移動), touchend(手指離開屏幕)。


          相對而言, drag事件就要豐富一些。


          • 被拖拽元素事件


          事件名

          觸發時機

          觸發次數

          dragstart

          拖拽開始時觸發一次

          1

          drag

          拖拽開始后反復觸發

          多次

          dragend

          拖拽結束后觸發一次

          1


          • 目標容器事件


          事件名

          觸發時機

          觸發次數

          dragenter

          被拖拽元素進入目標時觸發一次

          1

          dragover

          被拖拽元素在目標容器范圍內時反復觸發

          多次

          drop

          被拖拽元素在目標容器內釋放時(前提是設置了dropover事件)

          1


          想要移動一個元素,該如何選擇這兩種事件類型呢? 選擇依據是:


          類型

          選擇依據

          mouse事件

          1. 要求絲滑的拖拽體驗 2. 無固定的拖拽區域 3. 無需傳數據

          drag事件

          1. 拖拽區域有范圍限制 2. 對拖拽流暢性要求不高 3. 拖拽時需要傳數據


          現在讓我們寫個拖拽效果


          光說不練假把式, 掃清了學習障礙后,讓我們自信滿滿地寫一個兼容PC端和移動端的拖動效果。不積跬步無以至千里,幻想一口吃個胖子,是不現實的。這一點在股市上體現的淋漓盡致。都是有耐心的人賺急躁的人的錢。所以,要我們沉下心來,打牢基礎,硬骨頭啃一點就會少一點,步步為營,穩扎穩打,硬骨頭也會被啃成渣。



          <!DOCTYPE html>
          <html lang="en">
          
          <head>
                  
              <meta charset="UTF-8" />    
              <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
              <title>移動小鳥</title>
              <style>
                  body {
                      margin: 0;
                      font-size: 0;
                      position: relative;
                      height: 100vh;
                  }
          
                  .bird {
                      position: absolute;
                      width: 100px;
                      height: 100px;
                      cursor: grab;
                      z-index: 10;
                  }
              </style>
          </head>
          
          <body>
              <img class="bird" src="./bird.png" alt="" />  
          </body>
          
          <script>
              let evtName = getEventName();
              // 鼠標指針相對于瀏覽器可視區域的偏移
              let offsetX = 0, offsetY = 0;
              // 限制圖片可以X和Y軸可以移動的最大范圍,防止溢出
              let limitX = 0, limitY = 0;
          
              // 確保圖片加載完
              window.onload = () => {
                  const bird = document.querySelector(".bird");
                  const { width, height } = bird;
          
                  limitX = document.documentElement.clientWidth - width;
                  limitY = document.documentElement.clientHeight - height;
          
                  bird.addEventListener(evtName.start, (event) => {
                      // 監聽鼠標指針相對于可視窗口移動的距離
                      // 注意移動事件要綁定在document元素上,防止移動過快,位置丟失
                      document.addEventListener(evtName.move, moveAt);
                  });
          
                  // 鼠標指針停止移動時,釋放document上綁定的移動事件
                  // 不然白白產生性能開銷
                  document.addEventListener(evtName.end, () => {
                      document.removeEventListener(evtName.move, moveAt);
                  })
          
                  // 移動元素
                  function moveAt({ movementX, movementY }) {
                      const { offsetX, offsetY } = getSafeOffset({ movementX, movementY });
          
                      window.requestAnimationFrame(() => {
                          bird.style.cssText = `left:${offsetX}px;top:${offsetY}px;`;
                      });
                  };
              };
          
              // 獲取安全的偏移距離
              const getSafeOffset = ({ movementX, movementY }) => {
                  // //距上次鼠標位置的X,Y方向的偏移量
                  offsetX += movementX;
                  offsetY += movementY;
          
                  // 防止拖拽元素被甩出可視區域
                  if (offsetX > limitX) {
                      offsetX = limitX;
                  }
          
                  if (offsetX < 0) {
                      offsetX = 0;
                  }
          
                  if (offsetY > limitY) {
                      offsetY = limitY;
                  }
          
                  if (offsetY < 0) {
                      offsetY = 0;
                  }
          
                  // console.log({ movementX, movementY, offsetX, offsetY });
                  return { offsetX, offsetY };
              }
          
              // 區分是移動端還是PC端移動事件
              function getEventName() {
                  if ("ontouchstart" in window) {
                      return {
                          start: "touchstart",
                          move: "touchmove",
                          end: "touchend",
                      };
                  } else {
                      return {
                          start: "pointerdown",
                          move: "pointermove",
                          end: "pointerup",
                      };
                  }
              }
          </script>
          
          </html>
          
          
          


          彩蛋


          在chrome瀏覽器上發現一個奇怪的現象,設置的border值是整數,計算出來的值卻帶有小數



          而當border值是4的整數倍的時候,計算值是正確的



          看了這篇文章[5]解釋說,瀏覽器可能只能渲染具有整數物理像素的border值,不是整數物理像素的值時,計算出的是近似border值。這個解釋似乎講得通,在設備像素比是window.devicePixelRatio=1.25的情況下, 1px對應的是1.25物理像素, 1.25*4的倍數才是整數,所以設置的邏輯像素是4的整數倍數,顯示的渲染計算值與設置值一致,唯一讓人不理解的地方,為什么padding,margin,width/height卻不遵循同樣的規則。


          參考資料


          [1] https://baike.baidu.com/item/%E6%98%BE%E7%A4%BA%E5%88%86%E8%BE%A8%E7%8E%87/3431933?fromModule=lemma_inlink


          [2] https://baike.baidu.com/item/%E5%9B%BE%E5%83%8F%E5%88%86%E8%BE%A8%E7%8E%87/872374?fromModule=lemma_inlink


          [3] https://baike.baidu.com/item/%E6%89%93%E5%8D%B0%E5%88%86%E8%BE%A8%E7%8E%87/9560832?fromModule=lemma_inlink


          [4] https://baike.baidu.com/item/%E6%89%AB%E6%8F%8F%E5%88%86%E8%BE%A8%E7%8E%87/7122498?fromModule=lemma_inlink


          [5] https://www.w3.org/TR/CSS22/cascade.html#specified-value

          ?

          .canvas-font居中圖解


          canvas


          主站蜘蛛池模板: 日本一区二区三区中文字幕| 日本一区二区视频| 人妻无码一区二区视频| 东京热人妻无码一区二区av| 曰韩精品无码一区二区三区| 亚洲AV成人一区二区三区在线看 | 亚洲国产一区二区a毛片| 成人中文字幕一区二区三区| 国产免费无码一区二区| 精品女同一区二区三区在线| 亚洲色偷精品一区二区三区| 任你躁国语自产一区在| 精品一区二区三区中文字幕| 大伊香蕉精品一区视频在线| 国产一区二区三区国产精品| 日韩成人无码一区二区三区| 日本视频一区在线观看免费 | 日本一区二区视频| tom影院亚洲国产一区二区| 日本精品高清一区二区| 久久久久一区二区三区| 中文字幕无线码一区二区| 中文字幕一区二区区免| 国产传媒一区二区三区呀| 日本免费一区二区久久人人澡| 国产在线第一区二区三区| 精品国产一区二区三区免费看| 亚洲欧美成人一区二区三区| 成人精品视频一区二区| 精品人妻无码一区二区三区蜜桃一 | 中文字幕一区二区三区永久| 一区二区三区无码高清视频| 变态调教一区二区三区| 欧洲精品一区二区三区| 久久精品岛国av一区二区无码| 久久se精品一区二区影院| 精品日产一区二区三区手机| 亚洲色精品三区二区一区| 2021国产精品视频一区| 日本一区二区在线播放| 国产伦精品一区二区三区女|