因為寫不出拖拽移動效果，我惡補了一下Dom中的各種距離

文來源于：程序員成長指北；作者：去偽存真
如有侵權，聯系刪除

背景

最近在項目中要實現一個拖拽頭像的移動效果，一直對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

：測試瀏覽器版本號——chrome 75.0.3770.80；opera 60.0.3255.109；firefox 67.0；ie 11。

接上篇文章，我們繼續來講一些平常可能會用到但是又比較冷門的知識。

一 input提示語句

我們在使用input輸入框和textarea輸入框時，有時候需要給用戶一些提示，比如這個輸入框應該填寫的內容，有人說提前預設“value”不就可以了嗎？如果不是太摳細節，用“value”屬性實現也是可以，但是如果使用“value”做提示，用戶輸入的時候需要先把預設的值刪除，然后才能輸入。這樣做會使用戶體驗大打折扣。因此我們需要其他的方法來實現，這個時候“placeholder”屬性就派上用場啦！“placeholder”翻譯過來就是占位符的意思，我們通過給“placeholder”屬性賦值來占據位置。

<!-- input提示語句 -->
<input type="text" placeholder="請輸入用戶名">
<input type="text" value="請輸入用戶名">

以上面代碼為例，我們得到下圖的結果，點擊第一個輸入框，輸入提示光標在最左邊，輸入文字后提示性語句消失；點擊第二個輸入框，輸入提示光標接在“請輸入用戶名”后面，輸入文字其也不會消失，需要我們手動刪除。

二 input[type="text"]輸入框兼容性

都知道input輸入框是能輸入一行文字，input內文字始終在content內上下居中。但是這里有個例外，在ie（本例版本為ie11）中，當content的高度<文字的line-height時，文字不上下居中。

以下面代碼為例

<input type="text" style="width:200px;height:10px;padding: 20px;border: 1px solid #000;line-height: 30px" placeholder="我是test文字">

得到結果如下圖。我們發現在ie中文字會根據自己行高來判斷自己的位置。這點在做兼容的時候需要特別注意。

解決方案是設置input的content高度>=line-height。

三 margin重疊

大家一定有過這樣的體驗，當兩個相鄰的盒子都有margin時，他們之間的間距有時候會不等于兩個盒子的margin之和。為什么會出現這種情況呢？以下面代碼為例，box-1和box-2都有外邊距且外邊距不一樣。

/* css樣式 */
html,body {
 margin: 0;
 padding: 0;
}
.box-1 {
 margin:40px;
 border: 1px solid #000;
 background: skyblue;
}
.box-2 {
 margin:20px;
 border: 1px solid #000;
 background: skyblue;
}
.in-1{
 display: inline-block;
 width: 200PX;
 height: 100px;
 border: 1px solid red;
 margin: 20px;
 background: yellowgreen;
}
<!-- margin重疊 -->
<div class="box-1">
 <div class="in-1">
 第一個盒子
 </div>
 <div class="in-1">
 第二個盒子
 </div>
</div>
<div class="box-2">
 <div class="in-1">
 第三個盒子
 </div>
 <div class="in-1">
 第四個盒子
 </div>
</div>

得到結果如下圖。我們發現：1. 豎直方向box-1和box-2之間的間距為40px（兩盒子中較大的margin值）而不是60px（兩盒子margin值之和）；2. 水平方向第一個盒子和第二個盒子之間的間距為40px（兩盒子margin值之和）。

我們得到結論：水平方向兩盒子間距=兩盒子margin值之和；豎直方向兩盒子間距=max（盒子1margin值，盒子2margin值）。

上面的結論真的正確的嗎？？？

我們知道margin還可以取負值，如果按照上面的結論，假設兩個盒子的margin值一個是負值，一個是正值，那么他們之間的間距一定是正值的數值。為了驗證上述猜測的正確性，我們將上面的例子做以下修改：

將box-1的margin-bottom值改為-40px并將其他邊的margin值改為20px；
將第二個盒子和第四個盒子的margin-left值改為-20px；
將第三個盒子的margin-right值改為-20px；

得到下圖的結果。審查元素發現：1. 豎直方向box-1和box-2的間距=-20px；2水平方向不存在規律

再繼續修改代碼：

將box-2的margin-top值改為-20px；

得到下圖的結果。審查元素發現：box-1和box-2的間距=-40px。

綜上我們發現豎直方向是有規律的，但是水平方向沒有規律，為什么會出現這種情況呢？

查閱W3C規范恍然大悟，里面的結論歸納一下是這樣的：

1. 兩個相鄰的盒子margin值都是正數時，兩盒子間距=兩盒子較大的margin值

2. 兩個相鄰的盒子margin值都是負數時，兩盒子間距=兩盒子較小的margin值

3. 兩個相鄰的盒子margin值一正一負時，兩盒子間距=兩盒子margin值之和

注意：根據W3C規范，以上結論有以下前提：

margin必須相鄰且是豎直方向相鄰；
兩盒子必須處于普通文檔流（normal flow），
兩盒子父元素必須相同；
兩盒子必須都是塊級元素（不能是inline-block元素）；

四字母大小寫

有些情況我們需要單詞全部顯示大寫，例如文章大標題，按鈕提示詞等等，有的時候也需要全部小寫。為了避免誤輸入，我們可以設定當前元素的文本自動轉換大小寫，具體屬性值如下：

<!--注意full-width兼容性很差，一般不使用-->
text-transform: none(默認不改變) | capitalize(首字母大寫) | uppercase(全部大寫) | lowercase(全部小寫) | full-width(全寬度);

以下面代碼為例。

<p>tEst enGlish</p>
<p style="text-transform: none">tEst enGlish</p>
<p style="text-transform: capitalize">tEst enGlish</p>
<p style="text-transform: uppercase">tEst enGlish</p>
<p style="text-transform: lowercase">tEst enGlish</p>
<p style="text-transform: full-width">tEst enGlish</p>

得到結果如下圖。

五各元素默認的盒模型

之前的學習我們了解了標準盒模型（box-sizing=content-box）和怪異盒模型（box-sizing=border-box）兩種。兩種模型的用途各不相同，沒有優劣之分。我們的困惑是為什么有時候設置的width是content的width，而有時候是border+padding+content的width呢？下面我們來講一講html常見元素默認的盒模型類型。

方法很簡單，利用chrome的調試工具中的“computed”查看元素box-sizing屬性的值。在四個實驗瀏覽器檢查下面兩圖中的塊級元素和行內元素發現只有selcet元素默認的盒模型是怪異盒模型（box-sizing=border-box），其他元素默認的盒模型均為標準盒模型（box-sizing=content-box）。

于所有Web開發人員來說，無論你選擇的是哪種框架或后端語言，都需要大量使用HTML（超文本標記語言）。

HTML標題標記

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>無標題文檔</title>
    </head>
    
    <body>
        <h1>1級標題</h1>
  <h2>2級標題</h2>
  <h3>3級標題</h3>
  <h4>4級標題</h4>
  <h5>5級標題</h5>
  <h6>6級標題</h6>
    </body>
</html>12345678910111213141516復制代碼類型：[html]

圖示

h的級別越小文字大小越小。

當然了，這些文字標題都是左對齊的。

其實在標題標記中還有重要的屬性！詳情見文章------

我們可以給<h1>，<h2>......等標記加屬性值讓其變得更加多樣化！

代碼

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>無標題文檔</title>
    </head>
    
    <body>
        <h1 align="center">1級標題</h1>
        <h2 align="left">2級標題</h2>
        <h3 align="right">3級標題</h3>
        <h4 align="justify">4級標題</h4>
        <h5 align="right">5級標題</h5>
        <h6 align="center">6級標題</h6>
    </body>
</html>12345678910111213141516復制代碼類型：[html]

圖示

align標記在----文章已經有些許敘述，我們再來講講吧。

<h1 align="center"></h1> <!--居中-->
<h2 align="left"</h2> <!--左對齊-->
<h3 align="right"></h3> <!--右對齊-->
<h4 align="justify"></h4><!--段落兩端對齊-->1234復制代碼類型：[html]

所以圖示才是如此顯示的。

開課吧廣場-人才學習交流平臺

在線咨詢

上一篇：前端開發：JavaScript 存儲數據
下一篇：在laravel中使用simple_html_dom爬取顯示整本小說

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商