CSS Margin中5個經典布局解決方案，重難點知識，記得收藏復習

幾天我在面試前端開發同學的時候，有問到關于margin基礎布局相關內容的過程中，發現很多同學基本解釋不清楚，今天剛好有點時間就整理了一篇筆記出來。就以下5點在CSS布局經常會用到的經典布局解決方案。

css中margin外邊距（重疊）合并現象
css中margin外邊距穿透現象
css中margin設置負值時的特性
css經典3列自適應布局：圣杯布局
css經典3列自適應布局：雙飛翼布局

可以嘗試動手試一試，有什么疑問！可隨時交流，有問必答。

margin 縱向重疊（合并）問題

元素垂直排列時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并，合并后的間距就是兩者中最大的那個值。

1、以下代碼中，item1與item4之間的間距是多少？

<style>
    .box{
        margin-top:10px;/*上外邊距*/
        margin-bottom:20px;/*下外邊距*/
        height: 20px;
        background-color:skyblue;
    }
</style>
<body>
    <div class="box">item1</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">item4</div>
</body>

答案：

解析：item1 與 item4 之間的間距為 3個下外邊距大小+2個盒子高度=20*3+20*2=100px

2、以下代碼中，item1與item4之間的間距是多少？

<style>
    .box{
        margin-top:10px;
        margin-bottom:20px;
        background-color:skyblue;
    }
</style>
<body>
    <div class="box">item1</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">item4</div>
</body>

答案： item1與item4之間間距為 20px

解析：因為中間兩個box中沒有內容也沒有邊框線，所以外邊距會一直重疊合并，所以最后item1和item4之間距離只有一個下外邊距的大小

3、以下代碼中 container 、 item 、box與瀏覽器頂部的間距是多少？

margin 穿透問題

當一個元素包含在另一個元素中時,如果父元素沒有設置內邊距或邊框把外邊距分隔開，它們的上或下外邊距也會發生合并。

<style>
    body{
        margin:0;
        padding:0;
    }
    .container{
        width:300px;
        height: 300px;
        background-color: salmon;   
        margin-top:100px;/*與瀏覽器頂部的距離*/
        border:5px solid blue;
    }
    .container .item{
        width:200px;
        height: 200px;
        background-color: skyblue;
        margin-top:50px;/*因為container中加了border邊框，所以這里的外邊距不會穿透合并*/
    }
    .container .item .box{
        width:100px;
        height: 100px;
        background-color: bisque;
        margin-top:10px;/*item沒有加邊框線，內邊距和其它內容，所以外邊距會發生穿透合并*/
        border:5px solid red;
    }
</style>
<body>
    <div class="container">
        <div class="item">
            <div class="box"></div>
        </div>
    </div>
</body>

答案： 100px 、155px、155px
解析：
.container與瀏覽器頂部距離是100px，
.item與瀏覽器頂部距離100px + 5px+50px=155px
.box與瀏覽器頂部距離：100px+5px+50px=155px

margin負值問題

margin-left 設置負值，元素向左移動
margin-right 設置負值，自身不受影響，右邊元素向左移動
margin-top設置負值，元素向上移動
margin-bottom 設置負值，自身不受影響，下方元素向上移動

1、兩元素水平排列，左右外邊距設置負值時

<style>
    body{
        margin:0;
    }
    .container{
        width:500px;
        height:200px;
        padding:20px 0px;
        border:5px solid #ddd;
        margin:0px auto;
    }
    .container .common{
        width:200px;
        height: 200px;
        float: left;
    }
    .container .box1{
        background-color: skyblue;
        /* margin-left:-100px; 元素自身向左移動，右邊的元素也會受影響*/
        margin-right:-100px;/*元素自身不受影響，右邊元素向左移動*/
    }
    .container .box2{
        background-color: tomato;
    }
</style>
<body>
    <div class="container">
        <div class="box1 common"></div>
        <div class="box2 common"></div>
    </div>
</body>

當.container .box1中margin-left:-100px;時，如：圖1
當.container .box1中 margin-right:-100px;時，如：圖2
當.container .box1設置margin-left:-100px;和margin-right:-100px時，如：圖3

2、兩元素垂直排列，上下外邊距設置負值時

<style>
    body{
        margin:0;
    }
    .container{
        height: 500px;
        width: 200px;
        padding:0px 20px;
        border:5px solid #ddd;
        margin-top:100px;
    }
    .container .common{
        width:200px;
        height: 200px;
    }
    .container .box1{
        background-color: skyblue;
        /*margin-top:-100px;元素向上移動，下方元素也會受影響*/
        margin-bottom:-100px;/*自身不受影響，下方元素向上移動*/
    }
    .container .box2{
        background-color: rgba(0,0,255,0.5);
    }
</style>

<body>
    <div class="container">
        <div class="box1 common"></div>
        <div class="box2 common"></div>
    </div>
</body>

當.container .box1中margin-top:-100px時，如：圖 1
當.container .box1中margin-bottom:-100px時，如：圖 2
當.container .box1中同時設置margin-top:-100px; 和margin-bottom:-100px;時，如：圖 3

3、經典布局：圣杯布局

這種布局的優點：
中間一欄內容最重要，最先加載和渲染，同時對搜索引擎優化最利。
兩邊內容固定，中間內容自適應

<style>
    body{
        margin:0;
        /*核心代碼*/
        min-width: 650px;/*當頁面寬度不夠時，出現滾動條而不會造成布局錯亂*/
    }
    .clearfix::after{
        display: block;
        content: "";
        clear: both;
    }
    .fl{/*核心代碼*/
        float:left;/*三個盒子一定要添加浮動*/
    }
    .header{
        height: 100px;
        background-color: tomato;
    }

    .container{
        padding-left:200px;/*左邊預留200px位置  用來放left*/
        padding-right:250px;/*右邊預留200px位置  用來放right*/
    }
    .container .center{
        width:100%;/*自適應container的寬度，實現自適應縮放*/
        height: 500px;
        background-color: skyblue;
    }
    .container .left{
        width:200px;
        height: 500px;
        background-color:cadetblue;
        /*核心代碼*/
        margin-left:-100%;/*盒子向左移，因為加了浮動，所以會移動到上一行的最左邊*/
        position: relative;/*利用相對定位，再把盒子往左移200px就占據了最左邊預留的200px空間*/
        left:-200px;
    }
    .container .right{
        width:250px;
        height: 500px;
        background-color:aquamarine;
        /*核心代碼*/
        margin-right:-250px;/*加上這個代碼，相當于right沒有一點寬度，就會移動到上的最右邊位置*/
    }
    .footer{
        height: 100px;
        background-color: #000;
    }
</style>
<body>
    <div class="header">頭部</div>
    <div class="container clearfix">
        <div class="center fl">中間</div>
        <div class="left fl">左邊</div>
        <div class="right fl">右邊</div>
    </div>
    <div class="footer">底部</div>
</body>

4、經典布局：雙飛翼布局

這種布局的優點：
中間一欄內容最重要，最先加載和渲染，同時對搜索引擎優化最利。
兩邊內容固定，中間內容自適應

<style>
    body{
        margin:0;
    }
    .fl{/*核心代碼*/
        float: left;/*一定要添加浮動*/
    }
    .main{
        background-color: #ddd;
        width:100%;
    }
    .main .main-content{
        background-color: skyblue;
        height: 300px;
        /*核心代碼*/
        margin:0 200px 0 200px;/*盒子左右兩邊余留200px，分別給left和right來占用*/
    }
    .left{
        width: 200px;
        height: 300px;
        background-color: coral;
        /*核心代碼*/
        margin-left:-100%;/*往左移動瀏覽器的寬度，最后移動到上一行的最左邊*/
    }
    .right{
        width: 200px;
        height: 300px;
        background-color: tomato;
        /*核心代碼*/
        margin-left:-200px;/*相當于自身寬度為0了，因為加了浮動，然后就顯示在了上一行的最右邊*/
    }
</style>
<body>
    <div class="main fl">
        <div class="main-content">中間</div>
    </div>
    <div class="left fl">左邊</div>
    <div class="right fl">右邊</div>
</body>

為幫助到一部分同學不走彎路，真正達到一線互聯網大廠前端項目研發要求，首次實力寵粉，打造了《30天挑戰學習計劃》，內容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真實企業項目開發，云服務器部署上線，從入門到精通

PC端項目開發（1個）
移動WebApp開發（2個）
多端響應式開發（1個）

共4大完整的項目開發！一行一行代碼帶領實踐開發，實際企業開發怎么做我們就是怎么做。從學習一開始就進入工作狀態，省得浪費時間。

從學習一開始就同步使用 Git 進行項目代碼的版本的管理，Markdown 記錄學習筆記，包括真實大廠項目的開發標準和設計規范，命名規范，項目代碼規范，SEO優化規范

從藍湖UI設計稿到 PC端，移動端，多端響應式開發項目開發

真機調試，云服務部署上線；
Linux環境下的 Nginx 部署，Nginx 性能優化；
Gzip 壓縮，HTTPS 加密協議，域名服務器備案，解析；
企業項目域名跳轉的終極解決方案，多網站、多系統部署；
使用使用 Git 在線項目部署；

這些內容在《30天挑戰學習計劃》中每一個細節都有講到，包含視頻+圖文教程+項目資料素材等。只為實力寵粉，真正一次掌握企業項目開發必備技能，不走彎路！

過程中【不涉及】任何費用和利益，非誠勿擾。

如果你沒有添加助理老師微信，可以添加下方微信，說明要參加30天挑戰學習計劃，來自頭條號！老師會邀請你進入學習，并給你發放相關資料

30 天挑戰學習計劃 Web 前端從入門到實戰 | arry老師的博客-艾編程

目中有時候會遇到這個問題：一行有3個div，希望這3個div平分屏幕寬度，并且高度等于寬度。

第一個問題：平分屏幕寬度

可以對div設置百分比寬度，而不是直接用px寬度，這里用到了響應式設計的思想，可以參考這篇文章：自適應網頁設計（Responsive Web Design）

第二個問題：動態設置高度和寬度一致

有兩種方法，一種是用js動態設置，一種是直接用CSS設置

先看下html代碼

<ul>

</div>

some text

</div>

</li>

</div>

some text

</div>

</li>

</div>

some text

</div>

</li>

</ul>

公用的CSS

ul,li{

list-style: none;

}

* {

margin: 0;

padding: 0;

outline: 0

}

body {

margin: 0;

padding: 0;

-webkit-appearance: none;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-size: 16px;

}

ul{

margin:10px;

}

.container {

display: inline-block;

position: relative;

width: 32%;

text-align: center;

}

用js動態設置

var cw = $('.dummy').width();

$('.dummy').css({'height':cw+'px'});

$(window).resize(function() {

var cw = $('.dummy').width();

$('.dummy').css({'height':cw+'px'});

});

用CSS設置

.dummy {

padding-top: 100%; /* 1:1 aspect ratio */

width: 100%;

background: #333333;

}

CSS設置padding-top的原理：Use CSS to Specify the Aspect Ratio of a Fluid Element

/———————————————————

然后嘗試對圖片設置高度等于動態寬度

js方法很簡單，跟上面的方法基本相同

<ul>

some text

</div>

</li>

some text

</div>

</li>

some text

</div>

</li>

</ul>

.container {

display: inline-block;

position: relative;

width: 32%;

text-align: center;

}

.container img{

width: 100%;

height:100%;

}

var cw = $('.dummy').width();

$('.dummy').css({'height':cw+'px'});

$(window).resize(function() {

var cw = $('.dummy').width();

$('.dummy').css({'height':cw+'px'});

});

CSS方法

<ul>

</div>

some text

</div>

</li>

</div>

some text

</div>

</li>

</div>

some text

</div>

</li>

</ul>

.container {

display: inline-block;

position: relative;

width: 32%;

text-align: center;

}

.dummy{

padding-top: 100%; /* 1:1 aspect ratio */

width: 100%;

background:url(images/test_3.jpg) no-repeat;

-webkit-background-size: 100%;

background-size: 100%;

}

通過設置background可以實現。

div包含img的方法沒有試驗成功，以后繼續嘗試

/————————————-

還有一個問題，怎么設置div和img之間的padding，又能保證div寬度是屏幕寬度的三分之一？

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

背景

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

在線咨詢

上一篇：紅色工作報告PPT模板-免費下載
下一篇：學習前端之前，先了解HTML的發展史

您的項目需求

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

整合營銷服務商

CSS Margin中5個經典布局解決方案，重難點知識，記得收藏復習

1、以下代碼中，item1與item4之間的間距是多少？

2、以下代碼中，item1與item4之間的間距是多少 ？

3、以下代碼中 container 、 item 、box與瀏覽器頂部的間距是多少 ？

margin負值問題

1、 兩元素水平排列，左右外邊距設置負值時

2、兩元素垂直排列，上下外邊距設置負值時

3、經典布局：圣杯布局

4、經典布局：雙飛翼布局

背景

JS Dom各種距離釋義

第一個發現 window.devicePixelRatio 的存在

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

scrollWidth, scrollLeft, clientWidth關系

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

offsetWidth和clientWidth的關系?

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

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

movementX和movementY的含義?

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

現在讓我們寫個拖拽效果

彩蛋

參考資料

您的項目需求

2、以下代碼中，item1與item4之間的間距是多少？

3、以下代碼中 container 、 item 、box與瀏覽器頂部的間距是多少？

1、兩元素水平排列，左右外邊距設置負值時