HTML笔记

1.@media

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

2.@drop

        2.1.使用

        拖拽元素时的监听事件，放在div标签中

<div @drop="drop" @dragover="dragOver" @dragstart="start">

drop 元素被放置在有效的放置目标上时被触发 

dragstart 用户拖动元素时触发

         2.2.保存拖放数据

event.dataTransfer.getData("name")
event.dataTransfer.setData("name", value)

3.clientX、offsetX

        clientX：以浏览器左上角为原点 

        offsetX：相对于目标元素的x坐标

4.getBoundingClientRect

        获取元素的位置和大小信息

        应用：

document.addEventListener( 'pointerdown', (event) =>{
    let getBoundingClientRect  = document.getElementById("")
    event.clientX - getBoundingClientRect .left
})

5.offsetWidth 

        获取div元素的宽度，包含内边距（padding）和边框（border）

6.clientWidth 

        获取div元素的宽度，包含内边距