Flex 布局

发布于 2020-04-08 00:00:00

HTML5元素拖拽

属性:

draggable="true"

事件

dragstart: 网页元素开始拖动时触发
drag:      被拖动的元素在拖动过程中持续触发
dragenter: 被拖动的元素进入目标元素时触发,应在目标元素监听该事件
dragleave: 被拖动的元素离开目标元素时触发,应在目标元素监听该事件
dragover:  被拖动元素停留在目标元素之中时持续触发,应在目标元素监听该事件
drap:      被拖动元素或从文件系统选中的文件,拖放落下时触发
dragend:   网页元素拖动结束时触发

dataTransfer对象

拖动开始时,在dataTransfer对象上储存一条文本信息。当拖放结束时,可以用getData方法取出这条信息。

dataTransfer对象的属性

dropEffect:拖放的操作类型,决定了浏览器如何显示鼠标形状,可能的值为copymovelinknone

effectAllowed:指定所允许的操作,可能的值为copymovelinkcopyLinkcopyMovelinkMoveallnoneuninitialized(默认值,等同于all,即允许一切操作)。

files:包含一个FileList对象,表示拖放所涉及的文件,主要用于处理从文件系统拖入浏览器的文件。

types:储存在DataTransfer对象的数据的类型。

dataTransfer对象的方法

setData(format, data)``:在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型,比如text、url、text/html`等。

getData(format)``:从dataTransfer`对象取出数据。

clearData(format)``:清除dataTransfer`对象所储存的数据。如果指定了format参数,则只清除该格式的数据,否则清除所有数据。

setDragImage(imgElement, x, y):指定拖动过程中显示的图像。默认情况下,许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素,而不是指向图像的路径,参数x和y表示图像相对于鼠标的位置。

dataTransfer对象允许在其上存储数据,这使得在被拖动元素与目标元素之间传送信息成为可能。

dropEffect:拖放的操作类型,决定了浏览器如何显示鼠标形状,可能的值为copymovelinknone

定位的方式(position)

要想实现html定位需要设置两个选项:定位的类型+定位的位置。

静态定位(static) HTML 元素默认情况下的定位方式为 static(静态),静态定位的元素不受 top、bottom、left 和 right 属性的影响。 position: static; 的元素不会以任何特殊方式定位;它始终根据页面的正常流进行定位。

相对定位(relative) 相对定位的参照点是该元素本身原先的起点位置。并且即使该元素偏移到了新的位置,也仍然从原始的起点处占据空间。

绝对定位(absolute) 绝对定位是相对于已定位的并且包含关系最近的祖先元素来定位的,如果父元素都没有设置定位,就相对于body。 绝对定位会使元素从文档流中被删除,结果就是该元素原本占据的空间被其它元素所填充。

固定定位(fixed) 固定定位相对于浏览器窗口进行定位,固定定位会固定在浏览器的某个位置,不会随滚动条滚动。最常用的就是电脑里面弹出的小广告,如果你不关掉它,当滑动鼠标查看网页时,小广告一直会在那里,还有常用的就是网站或者APP的导航栏和底部的选择栏。

粘性定位(sticky) 粘性元素根据滚动位置在相对(relative)和固定(fixed)之间切换。起先它会以相对定位的形式显示,直到在视口中遇到给定的偏移位置 ,然后将其“粘贴”在适当的位置(比如 position:fixed)。

定位的位置 定位的位置主要分为上(top)、下(bottom)、左(left)、右(right)。 动态设置元素的高度

height: calc(100% - 61px);
父元素:100%高度-61px

vue页面如何使用原生js给input赋值

场景是需要写一段js注入到某个网页实现自动登录,这个网页使用vue开发的,这个时候直接给dom赋值value属性是没有效果的,所以有了下面的方法。

使用原生js给绑定了得vue赋值

document.getElementsByClassName("test-class")[0].value="this is test"

赋值后输入框得到焦点又会重新变回初始状态,触发该input得input事件进行触发更新

document.getElementsByClassName("test-class")[0].dispatchEvent(new Event('input'))

css3实现背景图片颜色修改的多种方式

css3可以改变图片的颜色了。从此再也不用设计出多张图,而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。

方式一:利用css3滤镜filter中的 drop-shadow

代码如下:

.icon{
    display: inline-block;
    width: 180px;
    height: 180px;
    background: url('img/XXX.png') no-repeat center cover;
    overflow: hidden;
}

.icon:after{
    content: '';
    display: block;
    height: 100%;
    transform: translateX(-100%);
    background: inherit;
    filter: drop-shadow(144px 0 0 #fff); //需要修改的颜色值
}

说明:

drop-shadow 滤镜可以给元素或图片非透明区域添加投影 将背景透明的 PNG 图标施加一个不带模糊的投影,就等同于生成了另外一个颜色的图标 再通过 overflow:hidden 和位移处理将原图标隐藏

mix-blend-mode 取值情况:除了最后3个,大体和ps效果一样

mix-blend-mode: normal; // 正常
mix-blend-mode: multiply; // 正片叠底
mix-blend-mode: screen; // 滤色
mix-blend-mode: overlay; // 叠加
mix-blend-mode: darken; // 变暗
mix-blend-mode: lighten; // 变亮
mix-blend-mode: color-dodge; // 颜色减淡
mix-blend-mode: color-burn; // 颜色加深
mix-blend-mode: hard-light; // 强光
mix-blend-mode: soft-light; // 柔光
mix-blend-mode: difference; // 差值
mix-blend-mode: exclusion; // 排除
mix-blend-mode: hue; // 色相
mix-blend-mode: saturation; // 饱和度
mix-blend-mode: color; // 颜色
mix-blend-mode: luminosity; // 亮度
mix-blend-mode: initial; // 默认
mix-blend-mode: inherit; // 继承
mix-blend-mode: unset; // 还原

方式二:利用css3的mix-blend-modebackground-blend-mode

代码如下:

.icon{
    display: inline-block;
    width: 180px;
    height: 180px;
    background-image: url($'img/XXX.png'), linear-gradient(#f00, #f00);
    background-blend-mode: lighten;
    background-size: cover;
}

说明:

lighten这个混合模式:变亮、变亮模式与变暗模式产生的效果相反,黑色比任何颜色都要暗,所以黑色会被任何色替换掉。反之,如果素材的底色是黑色,主色是白色。那就应该用变暗(darken)的混合模式  。

linear-gradient(#f00,  #00f )还可以实现渐变颜色的效果。

总结

方式一局限于png格式的图片,方式二不限制图片的格式。

css3具有一定的兼容性。chrome、Firefo、移动端较为适合使用。

解决Mac Chrome浏览器滚动条自动隐藏的问题

<style>

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    height: 5px;
    background-color: rgba(0, 0, 0, .3)
}

</style>