整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

因为写不出拖拽移动效果，我恶补了一下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值一个是负值，一个是正值，那么他们之间的间距一定是正值的数值。为了验证上述猜测的正确性，我们将上面的例子做以下修改：

  1. 将box-1的margin-bottom值改为-40px并将其他边的margin值改为20px；
  2. 将第二个盒子和第四个盒子的margin-left值改为-20px；
  3. 将第三个盒子的margin-right值改为-20px；

得到下图的结果。审查元素发现：1. 竖直方向box-1和box-2的间距=-20px；2水平方向不存在规律

再继续修改代码：

  1. 将box-2的margin-top值改为-20px；

得到下图的结果。审查元素发现：box-1和box-2的间距=-40px。

综上我们发现竖直方向是有规律的，但是水平方向没有规律，为什么会出现这种情况呢？

查阅W3C规范恍然大悟，里面的结论归纳一下是这样的：

1. 两个相邻的盒子margin值都是正数时，两盒子间距=两盒子较大的margin值

2. 两个相邻的盒子margin值都是负数时，两盒子间距=两盒子较小的margin值

3. 两个相邻的盒子margin值一正一负时，两盒子间距=两盒子margin值之和

注意：根据W3C规范，以上结论有以下前提：

  1. margin必须相邻且是竖直方向相邻；
  2. 两盒子必须处于普通文档流（normal flow），
  3. 两盒子父元素必须相同；
  4. 两盒子必须都是块级元素（不能是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小时内与您取得联系。

推荐阅读
友情链接 久治县 郧西县 龙川县 肥西县 信阳 周口 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服