随笔分类 - css
摘要：全局css样式里面，添加下面的代码： .el-scrollbar { .el-scrollbar__bar { opacity: 1 !important; } }
阅读全文
摘要：修改一下样式即可： .swiper-slide{ transform: translate3d(0, 0, 0); }
阅读全文
摘要：outline: none; -webkit-appearance: none; /*去除系统默认的样式*/ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 点击高亮的颜色*/
阅读全文
摘要：给父元素加上 transform属性，fixed即可根据父容器定位。
阅读全文
摘要：今天在写移动端项目的时候，发现高度和行高都设置的一样，在PC和ios上均显示垂直居中，但是在Android上差距很大，会出现偏上的效果，如下 查询了许多资料发现，在Android上的行高会默认显示22px，解决这个冲突的方法： 这个padding的10px是根据自己项目算出来的，这样就可以解决。
阅读全文
摘要：为了让美化上传文件框，设置了cursor:pointer;,然而不起作用，设置font-size:0，这样就可以了。
阅读全文
摘要：网上看到很多移动端适配的各种方法，由于原来工作中对rem的疏忽，所以决定重新学习rem~ 由于移动端特殊性，本文讲的是如何使用rem实现自适应，或叫rem响应式布局，通过使用一个脚本就可以rem自适应，不用再为各种设备宽度不同而烦恼如何实现自适应的问题。 rem是相对于根元素<html>，这样就意味
阅读全文
摘要：这第一次做手机端网页，在交付测试的时候发现一个问题， 就是body的宽度，我设置了overflow:hidden,在谷歌调试的时候确实是不能滑动的，但是在手机端测试的时候发现，overflow:hidden是失效的。就是说，页面是也可以左右摇晃的，延展出去的部分会被扯来扯去= = 后来查阅了一些资料
阅读全文
摘要：zoom的缩放是相对于左上角的；而scale默认是居中缩放； zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化； 对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸。
阅读全文
摘要：@media (-webkit-min-device-pixel-ratio: 2){} @media (-webkit-min-device-pixel-ratio: 3){}
阅读全文
摘要：父元素使用 子元素使用
阅读全文
摘要：-webkit-mask 这个属性是相当强大的，所以详细的介绍超出了本文的范畴，它非常值得深入研究，因为它可以在实际应用中为你省掉很多时间。 -webkit-mask让为一个元素添加蒙板成为可能，从而你可以创建任意形状的花样。蒙板可以是CSS3渐变或者半透明的PNG图片。蒙板元素的alpha值为0的
阅读全文
摘要：cursor:not-allowed;
阅读全文
摘要：当我们做水平居中的时候，会有许多方法，margin:0 auto,或者test-align:center,以及flex布局。当元素的width不固定的时候，我们如何实现水平居中呢，代码如下： 效果如下： 并没有居中，这个时候我们可以用fit-content来实现水平居中了，代码如下： 此时我们就可以
阅读全文
摘要：先看一下vertical-align在W3C当中的值有哪一些： 可是它有数值这一说确实很少提起，我们来看这么一段代码： 这里我写了两个div。里面都是包含了同样的img,box是完全脱离文本流的，大小全靠子元素来撑开，那显示的效果是怎样的呢？ vertical-align会增加容器的高度，而marg
阅读全文
摘要：这是一个小小的不经意的问题，但是却常常被一些面试官提起。一般都会一下子进入懵逼状态，那让我们来看看区别在哪里？ 我先新建一个html,代码如下： 下图是当line-height:150%的效果，父元素的行高为150%时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-heig
阅读全文
摘要：当我们想要元素水平排列的时候，inline-block或者float是最好的选择了，但是当父元素的宽高都设置了的时候，子元素会失效，如下： 代码： 效果： 很明显不是我们想要的效果，你把怎么解决呢，只需要一句代码即可：
阅读全文
摘要：1.用FONT-SIZE：0来清除间距 inline-block的元素之间会受空白区域的影响，也就是元素之间差不多会有一个字符的间隙。如果在同一行内有4个25%相同宽度的元素，会导致最后一个元素掉下来（如图）。你可以利用元素浮动float，或者压缩html，清除元素间的空格来解决。但最简单有效的方法
阅读全文
摘要：导航图标的改变
阅读全文
摘要：众所周知，box-sizing是将w3c盒模型与IE盒模型相互转换的利器，但是有时候也会失效，那么在什么情况下回失效呢，MD在没设置高度的时候回失效的透透的，所以一定记得需要转换的时候设置个高度！！！
阅读全文
