11 2022 档案
摘要：注意: transform中的translate移动是无视已经通过style.left移动的值的,也就是比如我要移动到800px的横坐标上,预先已经通过style.left=400移动了,再通过translateX(800px),整个元素会整个继续移动800px. 所以在使用时,不要transfor
阅读全文
摘要：如题: transform之后是不会影响到元素的offsetLeft和offsetTop值的,因此也可以理解为transform是不脱离标准流的,依然在原先的位置. 因此,transform也就无法实现图片跟随鼠标移动的效果,因为图片需要时刻获取到offsetLeft和offsetTop的值,而这两
阅读全文
摘要：在使用C3的transform时出现的一个问题: this.style.transform = 'translateX(' + boxLeft + e.targetTouches[0].pageX - startX + 'px)';这个并没有出现我预料的结果变成 translateX(50px),实
阅读全文
摘要：z-index是定位元素之间的上下叠加的顺序,值越大的在上面 如果z-index覆盖了标准流的内容,可以将z-index设为负值,这样就不会遮住标准流的内容.
阅读全文
摘要：这个是在练习动画展示效果时的一个问题.鼠标经过图标时,会有内容从右边移动出来,如图. 实际中,是将移动的内容预先放在右边,在浏览器视图之外,所以看不到,鼠标经过时就将这部分内容往左移动,出现在浏览器视图中. 但是如果存放移动内容的容器采用的是position:absolute,那么浏览器会出现滚动条
阅读全文
摘要：我不知道怎么做 等待回答.....
阅读全文
摘要：结合js中字符串不可变的特性 单次执行innerHTML和createElement时效率差不多 如果重复执行,因为innerHTML=字符串,需要多次开辟空间存储字符串,所以createElement效率更高. 但是,如果是采用的数组形式存储字符串,那么就不存在每次开辟内存空间存储字符串的情况,
阅读全文
摘要：element.setAttribute('data-index','2') element.setAttribute('data-index',2) 这两个,第一个设置的值是字符串'2',第二个设置的是数值2,但是,在页面渲染出来都是 data-index='2', 而且,通过element.ge
阅读全文
摘要：1.获取伪元素 原生JS中可以使用 window.getComputedStyle() 来获取伪元素.然后利用getPropertyValue方法或直接使用键值访问都可以获取对应的属性值。 语法：window.getComputedStyle(element, [pseudoElement]) 参数
阅读全文
摘要：如果是单纯的字符串赋给变量,虽然类型为string,但是instanceof String是false,并不是String对象,因为没有创建实例. 而这种new一个String实例则instanceof是属于String，但是typeof在原型链中找最高级，new String() 属于对象，则控制
阅读全文
摘要：JS的字符串不可变指的是字符串值是不变的,只是变量指向的地址变化了,重新在内存中开辟了空间. var a='111'; var a='222'; 此时字符串'111'的空间依然存在内存中,重新开辟了一个空间存放'222',同时变量a指向了这个新的空间地址. 基于这个特点,尽量不要在JS中大量的拼接字
阅读全文
摘要：浏览器不是直接运行JS的,是调用js引擎运行js. js引擎运行js分为两个步骤: 1.预解析 :js引擎会把js里面所有的var,以及所有的function提升到当前作用域的最前面 2.代码执行 :按照代码的书写顺序从上往下执行 预解析: 变量预解析--变量提升,就是把所有的变量声明提升到当前的作
阅读全文
摘要：在用bootstrap4的时候,因为要分一行5列显示,但是如果直接设置为col-2,就无法完全居中,如果加justify-content-center,那么自动换行就无法从排列在左侧开始,如图 因此,在网上找到了一些大神写的一行5列的代码: <style> .col-xs-2-half, .col-
阅读全文
摘要：1.小米的hover上移效果 &:hover { -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, .1); box-shadow: 0 15px 30px rgba(0, 0, 0, .1); -webkit-transform: translate3d(
阅读全文
摘要：有的时候我们可能希望的border线要小于元素本身,就无法使用border来画线,我们可以直接利用伪元素画细线 li { &::before { position: absolute; content: ''; background: #665e57; top: -1px; left: 6px; w
阅读全文
摘要：我是在做小米商店首页的侧边栏hover显示时碰到的这个要求,因为想尽量简洁架构,因此侧边栏hover出来的页面也想放在侧边栏的 li元素中,所以就出现了一个限制条件,即li是有宽度限制的,同时li所在的父元素也是有宽度限制的,在第一次尝试使用flex做纵向排列时,出现了背景色不能按照flex纵向排列
阅读全文
摘要：:focus-within:focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配 :focus 伪类。（shadow DOM 树 (en-US)中的后代也包括在内） form:focus-within { .inpu
阅读全文
摘要：flex布局小技巧之让某个子元素靠右或靠左显示 以下以块元素的Flex布局为示例：只需要两句代码，轻松搞定！ 代码1：在父元素里面加入以下代码：（父盒子加了display: flex，就相当于起到浮动的效果，盒子会自行排列成一排） display: flex 代码2：在需要移动的子元素里（此处为靠右
阅读全文
摘要：第一种: 选中需要检查hover状态的元素,在开发者工具中的force element state中强制选择响应的状态,就会显示响应的css样式. 但是这种调试依然无法直接在页面上实时看到hover的样式. 第二种: 在开发者状态下,进入sources标签栏, 鼠标移动到页面你要hover的对象,显
阅读全文
摘要：因为flexible是使用的屏幕宽大来作为rem的计算值,因此我们在设计最大750px,以及最小320px的页面时,会出现页面会一直随屏幕变大而变大,大于750或者小于320 因此设置强制最大值和最小值: @media screen and (min-width: 750px) { html { f
阅读全文
摘要：.yellow { position: relative; width: 300px; height: 300px; padding: 20px; background-color: yellow; } .blue { position: absolute; top:0; left: 0; widt
阅读全文
摘要：虽然是移动端特殊样式,但是随着移动端和客户端逐渐倾向于兼容,这些样式也可以适用于客户端, 目前开发已经逐渐不考虑css的样式兼容性问题,绝大多数的浏览器已经支持新css样式. /*CSS3盒子模型*/ box-sizing: border-box; -webkit-box-sizing: borde
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width,initial-scale=1,
阅读全文
摘要：问题来由: 我是在使用avif格式图片在edge浏览器上显示不出来,出现兼容性问题,因此尝试解决. 第一种: img标签中srcset属性 <img src="original.avif" srcset="alternative.webp" alt=""> img标签的srcset属性可以用于根据浏
阅读全文
