随笔分类 - css
摘要：注意: 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,那么浏览器会出现滚动条
阅读全文
摘要：1.获取伪元素 原生JS中可以使用 window.getComputedStyle() 来获取伪元素.然后利用getPropertyValue方法或直接使用键值访问都可以获取对应的属性值。 语法：window.getComputedStyle(element, [pseudoElement]) 参数
阅读全文
摘要：在用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
阅读全文
摘要：虽然是移动端特殊样式,但是随着移动端和客户端逐渐倾向于兼容,这些样式也可以适用于客户端, 目前开发已经逐渐不考虑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属性可以用于根据浏
阅读全文
摘要：三种方式: 1.用border-image 来实现： .box { width: 200px ; height: 200px ; border: 10px solid #ddd; border-image: linear-gradient(rgb(89, 0, 255),pink) 30 30; }
阅读全文
摘要：1. 父子元素margin塌陷** 给子元素设置margin后，初衷是让子元素在父元素中有一定的margin。运行结果发现，子元素和父元素的margin合并在了一起，子元素的margin直接传递给父元素，margin变成了父元素相对于当前窗口的margin，而不是子元素相对于父元素的margin。
阅读全文
