随笔分类 - css
ios Safari 不兼容问题 transform rotateY
摘要：解决方法 1.transform: perspective(1000); 2.transform：translateZ(1000px) 注意：backface-visibility
阅读全文
dns-prefetch、prerender、prefetch的理解
摘要：前端优化选项 DNS预获取 DNS prefetch，即DNS预获取。前端优化中与DNS有关的两点：一个是减少DNS的请求次数，另一个是进行DNS预获取。 DNS预获取可以加快页面渲染速度，无需用户点击链接就能在后台解析，所以能减少用户的等待时间，提升用户体验； 默认情况下，浏览器会对当前页面中和当
阅读全文
scss文件中使用深度选择器/deep/报错 Expected selector
摘要：https://vue-loader.vuejs.org/zh/guide/scoped-css.html
阅读全文
纯CSS绘制三角形（各种角度）
摘要：今天给大家带来 CSS 三角形绘制方法 复制代码代码如下: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bo
阅读全文
伪元素和伪类的区别
摘要：总结： 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息； 伪元素本质上是创建了一个有内容的虚拟容器； CSS3中伪类和伪元素的语法不同； 伪类 :link :hover 伪元素 ::before ::after 可以同时使用多个伪类，而只能同时使用一个伪元素； 其中伪类和伪元素的根本
阅读全文
box-shadow四个边框设置阴影样式
摘要：其实对于box-shadow，老白我也是一知半解，之前用的时候直接复制已有的，也没有仔细思考过box-shadow的数值分别对应什么，最后导致阴影的边如何自由控制，苦于懒人一个一直没有正式去学习，今天无意中看到以下这篇文章，瞬间清醒有木有，看完整片文章，对于box-shadow阴影四个边的设置完全了
阅读全文
纯CSS属性pointer-events：none解决滚动穿透、事件穿透问题
摘要：·什么是滚动穿透： 在移动端的前端开发中，我们常常会用到Modal弹窗，又称模态框，用来在已有页面显示新的选项、提示或新内容。遮罩层常出现在弹窗后，用来在视觉上，帮助用户集中注意力，功能上，防止用户继续操作页面上的其他内容。遮罩层通常是一个绝对定位，宽高充满内容区域或可视区域，层级略低于弹窗的具有一
阅读全文
Sass @mixin 与 @include
摘要：@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。 @include 指令可以将混入（mixin）引入到文档中。 定义一个混入 混入(mixin)通过 @mixin 指令来定义。 @mixin name { property: value; property: value; ...
阅读全文
多行文本溢出显示省略号(…)全攻略
摘要：大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 css 代码: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 但是这个属
阅读全文
elementui-select改变宽度
摘要：设置style="width:100%"与父盒子同宽，改变父盒子的宽度即可
阅读全文
关于css中touch-action属性 在移动端开发中遇到的问题
摘要：初次接触第一次接触touch-action这个属性 是在之前一个网约车公众号项目中遇到的 当时采用的是vue做框架 cube-ui做组件库 当时在版本迭代的时候增加了余额支付的功能 需要一个密码键盘 种种原因没有引入第三方插件 而是选择了手写 样式如下图： 当连续快速点击某个数字时，在ios端出现了
阅读全文
Houdini：也许是你未曾听过的最振奋人心的 CSS 进化
摘要：原文链接：Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard Of更多译文将陆续推出，欢迎点赞+收藏+关注我的专栏，未完待续…… 你是否曾经想要使用一些特别的CSS特性，却因为未曾得到所有浏览器的支持而选择放弃
阅读全文
requestAnimationFrame
摘要：在Web应用中，实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的API，那就是 re
阅读全文
（淘宝无限适配）手机端rem布局详解
摘要：从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习，讨论html5设计稿尺寸以及前端与设计之间协作流程的问题，内容较多，但对你的技术和工作一定有价值，欢迎阅读和点评：）。 这是淘宝的github网址，里面有
阅读全文
CSS 实现隐藏滚动条同时又可以滚动
摘要：移动端页面为了更接近原生的体验，是否可以隐藏滚动条，同时又保证页面可以滚动？ 使用 overflow:hidden 隐藏滚动条，但存在的问题是：页面或元素失去了滚动的特性。由于只需要兼容移动浏览器（Chrome 和 Safari），于是想到了自定义滚动条的伪对象选择器::-webkit-scroll
阅读全文
BFC
摘要：1. BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，（只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。） 2.BFC的布局规则有： 1.BFC就是在页面上的一个独
阅读全文
