css
关注
分享
扫一扫
vieber
欢迎关注本人公众号：程序员软技能
展开
-
css动画卡片位置会闪的问题
然后动画开始的时候会显示出来，这个时候卡片会从右下角蹦出来，体验很不好，研究发现只需要将动画延迟播放，让卡片准备好，再进行动画就可以了。使用css做了一个动画，当用户点击按钮的时候动画就会出现，但是因为动画卡片是居中显示的，原创 2022-10-24 17:21:08 · 557 阅读 · 0 评论 -
webpack编译出来的css不生效
项目从webapck3升级到webpack5，vue中的scss编译出来的是这个样子，看起来scss loader配置没问题，就是vue-loader配置版本的问题了。原创 2022-09-01 23:33:01 · 1047 阅读 · 0 评论 -
node-sass升级为dart-sass
卸载node-sassnpm uninstall node-sass安装dart-sassnpm install sass sass-loader -D在选择dart-sass版本的时候建议低一些，我一开始比较高"sass": "^1.32.13",，导致我报错，因为我的除法使用的是/写法$num / 200，这样就会报错。Recommendation: math.div($num, 200)More info and automated migrator: https://sass-la原创 2021-08-02 19:12:48 · 3505 阅读 · 1 评论 -
sass-loader报错UnhandledPromiseRejectionWarning: TypeError: resolverFactory is not a function
报错信息building for production...(node:98351) UnhandledPromiseRejectionWarning: TypeError: resolverFactory is not a functionat getWebpackResolver node_modules/sass-loader/dist/utils.js原因因为sass-loader版本比较高，本地是10版本，所以会有这个错误，现在将为npm i sass-loader@7 7版本就可以解原创 2021-08-02 17:31:46 · 2162 阅读 · 0 评论 -
苹果刘海屏适配
https://juejin.cn/post/6844903967625854990原创 2021-04-21 19:02:40 · 270 阅读 · 0 评论 -
css深度作用选择器
解决引用第三方组件样式覆盖问题。<style scoped>.a >>> .b { /* ... */ }</style>或者有些像 SASS 之类的预处理器无法正确解析 >>>，这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。<style scoped>.container /deep/ .ele-item { font-size: 16px;}&原创 2021-03-01 20:40:18 · 397 阅读 · 0 评论 -
如何让苹果手机H5横向滚动条不显示
在ios上我们H5有时候会有横向滚动的样式，但是横向滚动有时候不好看，我们需要禁止掉他们。设置-webkit-scrollbar高度为0即可 &::-webkit-scrollbar { height: 0; }参考文章::-webkit-scrollbar原创 2021-02-03 16:03:49 · 1530 阅读 · 0 评论 -
iphone7系统版本12.2H5滑动不流畅问题解决
问题代码.wrapper { width: 100vw; height: 100vh; overflow-y: auto;}解决方案.wrapper { width: 100vw; min-height: 100vh; overflow-y: auto;}原创 2021-01-15 14:22:50 · 405 阅读 · 0 评论 -
sass中计算之后增加百分号
width: 100%;可以这样写$value * 1%;原创 2020-09-21 21:21:13 · 1048 阅读 · 0 评论 -
ios webview设置网页下拉背景色
给html，body设置网页背景色即可。html, body { background-color: #fff;}原创 2020-09-16 15:02:18 · 860 阅读 · 0 评论 -
安卓5.0手机H5页面滚动卡顿问题解决
经定位是由于上面头部定位区域使用了固定定位之后加了过滤器filter: blur(50px);解决方案will-change: transform;分析filter在滚动的时候疯狂的占用cpu，卡住了渲染进程，就靠这一行代码解决了。大致原理很简单，这行代码能够开启GPU加速页面渲染，从而大大降低CPU的负载能力，达到页面渲染优化的效果。参考文章从手机滚动丢帧问题，学习浏览器合成与渲染...原创 2020-07-06 21:22:02 · 1553 阅读 · 0 评论 -
获取scrollTop的一个兼容性问题
在mac电脑上的chrome浏览器获取页面scrollTopdocument.documentElement.scrollTop使用这样的写法，无论是chrome还是safari获取到的都是一样的值，并且是有效的不为0.但是在安卓手机上则正好相反document.body.scrollTop这样写才能争取获取到top值。所以正确是兼容性写法是let scrollTop = document.documentElement.scrollTop || document.body.scrollT原创 2020-05-25 15:10:39 · 493 阅读 · 0 评论 -
在安卓低版本手机5、6上面内部滚动空白问题
在安卓低版本手机webview h5实现的时候，实现一个元素内部滚动这个容器内部是一个列表元素，然后这个列表元素滚动的时候就会出现掉帧的情况，有些空白在里面暂时有个临时的解决方案，严格设置每个元素的z-index值，特别fixed定位的元素和其他元素，但是还是会掉帧，只不过停止的时候会正常显示...原创 2020-05-19 19:37:30 · 364 阅读 · 1 评论 -
解决上面div背景色和下面div背景色之间的0.5px的间隙
问题是这个样子的，我写了一个div有个背景色，然后下面也有个div有个背景色，然后他两之间有个1px的白色间隙，代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev...原创 2020-03-30 16:47:11 · 1316 阅读 · 0 评论 -
移动端fixed定位没有按照窗口定位的情况
第一种ios上面父元素设置了下面这个css导致fixed定位改变为当前父元素-webkit-overflow-scrolling: touch原创 2020-03-04 16:39:58 · 944 阅读 · 0 评论 -
vue中使得当前文件css只在当前文件生效关键字
vue中使用scoped关键字，使得当前文件css只在当前文件生效原创 2020-01-18 17:29:25 · 1969 阅读 · 0 评论 -
safair中vue修改了数据，但是视图没有更新解决方案
使用vuex，也适用了splice来改数据，修改了评论的数据，但是视图没有更新。state.tabContainer.splice(index, 1, { info: info });查看dom元素里面数据明明更新了，但是网页没有更新，解决办法在vue中我子组件watch父组件一个值，然后数据更新的时候修改这个值，设置元素宽度强制重排， this.$refs.infoC...原创 2020-01-15 17:06:46 · 623 阅读 · 0 评论 -
h5如何隐藏横滑滚动条
在移动端隐藏使用 ::-webkit-scrollbar { width: 0px; }即可原创 2020-01-11 16:11:00 · 1490 阅读 · 0 评论 -
sticky粘性布局
这个布局对于移动端非常好用，他是相对于他最近的滚动祖先，和最近的块级组件进行top，left，bottom，right值进行偏移。偏移值不会影响其他元素。就好像该元素是fixed定位一样。该值总是要创建一个新的层叠上下文，当他最近的一个拥有滚动机制的祖先上（当祖先是overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是真的滚动祖先。这个阻止了所...原创 2019-12-27 15:47:03 · 515 阅读 · 0 评论 -
ios上面浏览器使用z-index失效
发现是父元素使用了这个属性-webkit-overflow-scrolling: touch;导致z-index失效。去掉这个属性就行了。原创 2019-12-16 19:01:20 · 714 阅读 · 0 评论 -
h5锚点使用
跳转地址使用name跳转代码<a name="voicePrivacy"><b>e）xxx。</b><br></a>然后访问的时候在链接后面加上#号和那么就可以自动跳到访问的位置。也就是定位到文章中的某一段内容。xxx.html#voicePrivacy使用id也可以<a id="voicePrivacy...原创 2019-11-25 16:45:07 · 4089 阅读 · 0 评论 -
实时动态滚动判断距离显示顶部栏不闪烁
问题在一开始做实时滚动条顶部滚动对时候然后使用,在tabContainerDom滚动到距离顶部一段距离的时候显示headerFixed<div ref="headerFixed" class="header-fixed" :class="{'show': showFixedBlock}"></div>.header-fixed { opacity: 0;...原创 2019-11-12 17:42:50 · 254 阅读 · 0 评论 -
chrome浏览器78版本显示滚动条出现白条异常
在chrome浏览器78版本上，设置元素overflow-x: scroll;导致页面滚动条显示出来有一个白色的条，把这个设置为auto即可，既可以保证滚动条超出的时候自动显示出来，也可以去掉白条...原创 2019-11-05 21:36:03 · 1651 阅读 · 1 评论 -
如何优雅的选择默认字体(font-family)
http://www.imooc.com/article/11261转载 2016-12-11 18:02:55 · 9085 阅读 · 0 评论 -
position之absolute定位深入理解
和float是兄弟在我们写样式的时候会发现使用float和absolute的时候，会发现都会出现高度塌陷的问题，和脱离文档流的情况，而且你如果设置了的话就会表现出类似于display：inline-block的表现形式，所以我们可以用这两个对比着记。跟随性这个是在设置了absolute之后，我们的这个元素如果在某个元素之前的话就会居高临下，好像是浮在他后面的元素上面，后面的元素会占据这个元素本来的位原创 2016-03-12 00:26:51 · 8518 阅读 · 0 评论 -
line-height
所有的元素都有一个line-height，这个值会显著地影响行内元素如何显示。 line-height由行内盒子模型引出来，在css权威指南这本书上有写 内容盒子，有时候我们没写内容，让也会有一个匿名文本的东西， 内联盒子 行内盒子，这个框通过向内容区增加行间距来描述。 包含盒子 内联元素由行高决定 内容区域高度+行间距=行高 百分数继承父级元素 匹配20像素的使用经验，line-原创 2016-03-18 20:12:33 · 502 阅读 · 0 评论 -
布局解决方案
两列布局一列定宽，另一列自适应直接上代码一看就懂 <style > .left { float: left; width: 100px; } .right { margin-left: 120px; } </style> <div class=原创 2016-02-13 10:46:51 · 554 阅读 · 0 评论 -
页面居中总结
有时候为了各种居中，因为要做到适配，如果页面宽度该变还想要居中，经过实践，现将总结的方案写下来。水平居中1.子盒子使用display:inline-block; 父盒子使用text-align:center 优点是兼容性比较好2.子盒子使用display:table;margin:0 auto3.父盒子使用position:relative 子盒子使用position:absolute;原创 2016-02-12 21:34:33 · 643 阅读 · 0 评论 -
css input[type=file] 样式美化，input上传按钮美化
思路：input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。代码如下DOM结构<a href="javascript:;" class="a-upload"> <input type="file" name="" id="">点击这里上传文件</a><a href="javascript:;" class="file转载 2015-11-25 20:16:50 · 3219 阅读 · 0 评论 -
好的文章
1.css控制图片等比例压缩这里写链接内容转载 2015-11-23 16:48:31 · 319 阅读 · 0 评论 -
写一个简单的几个页面的心得
因为一直在学javaScript，页面布局有点练的少了，最近再写几个页面，发现了很多问题，现在来总结一下。 因为是移动端的项目，所有有一些和pc端的不一样，我以前采用的移动端的布局使用的是(http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html).淘宝的fiexible布局方案，使用rem作为尺寸，flex布局方式，但是这原创 2016-12-09 20:31:18 · 1178 阅读 · 0 评论 -
安卓h5页面webview闪屏问题
原来使用的是渐变覆盖，导致开始的bgcolor是白色，会有一个渐变的过程，把bgcolor也设置成你要的颜色就可以了原创 2018-06-23 10:28:41 · 4290 阅读 · 3 评论 -
safari浏览器计算div高度不一致
渲染之前window.onload是一个值，渲染完成之后是另一个值。原因http://www.w3help.org/zh-cn/causes/RD5017行高没有设置，导致渲染前计算的行高和实际出来的高度不一致导致的解决方案统一给body设置line-height进行继承，这样计算高度就不会有问题了...原创 2018-07-03 15:22:53 · 2290 阅读 · 0 评论 -
input输入框选择美化
我们要美化一个多选的按钮 <label class="item-select"> <span>周日</span> <div class="right"> <input type="checkbox" class="input-check" @click="原创 2018-09-14 19:28:01 · 6886 阅读 · 3 评论 -
css进度条文字叠加效果实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-11-02 17:31:04 · 1960 阅读 · 0 评论 -
css简单实现横排自适应元素滚动
父盒子设置display: flex布局， overflow-x: scroll;然后子元素设置 flex-shrink: 0; 让他不要变小，就按照父元素窗口元素元素百分比进行， width: 32.4%; padding-right: .1rem;然后设置相应的边距...原创 2019-08-02 17:22:10 · 1791 阅读 · 0 评论 -
css命名规则
同一个父元素下不能出现相同名字的子类class。div尽量不要超过三层原创 2019-08-05 11:10:02 · 152 阅读 · 0 评论 -
h5实现网易云音乐歌单详情页向上滚动粘性滚动效果
网易云音乐app歌单详情页的交互效果特别好看，h5也要自己实现一下。实现步骤首先一个背景，背景图高斯模糊，然后加上遮罩然后titlebar上面留出位置下面一个div为了让他自适应高度，我们设置为绝对定位，然后top一个titlebar的高度，bottom为0，这样就占满整个屏幕然后播放全部设为粘性布局position: sticky; top: 0;然后他们父盒子元素设置...原创 2019-08-01 15:13:01 · 1436 阅读 · 0 评论 -
CSS技巧收集——毛玻璃效果
https://www.cnblogs.com/ghost-xyx/p/5677168.html核心代码.content { background-position: center top; background-size: cover;}.content::after { background-image: url(xxx.jpg); background...转载 2019-08-19 16:10:04 · 202 阅读 · 0 评论 -
css3做背景渐变
今天想做一个背景渐变效果，不用背景图片，开始走了好多弯路，终于找到了解决问题的办法，希望大家以后不要再走这些弯路。 开始我是这样做的<body class="gradient"> 在body里面添加类名，然后设置渐变。这样出来的效果是不对的，不信可以试一下，只有在body里面设置一个div再给里面设置这样的背景渐变就可以了。 这里要用到css教程CSS3 渐变（Gradients） 大家把这原创 2015-11-22 21:37:48 · 456 阅读 · 0 评论