随笔分类 - CSS
摘要：本本节课讲解在webpack v4中的 Scss 提取和懒加载。值得一提的是，v4和v3在 Scss 的懒加载上的处理方法有着巨大差别。Scss 是 Sass 3 引入新的语法，其语法完全兼容 css3，并且继承了 Sass 的强大功能。也就是说，任何标准的 css3 样式表都是具有相同语义的有效的
阅读全文
posted @ 2020-07-16 17:32
前端一点红
摘要：html中的空格的规则 在html中内容中的多个空格一般会被视为一个，连续的多个空格符被自动合并了。同时内容前后的空格也会被清除， 如下： <p> fly63 com </p> 显示效果为： fly63 com 备注：浏览器的这种机制处理，同样适用于除了普通的空格键，还包括制表符（\t）和换行符（\
阅读全文
posted @ 2020-07-16 17:28
前端一点红
摘要：css中:focus-within是什么 在css中 :focus-within 是一个伪类，现在已经被列入到css选择器中（css Level 4 selector）。css中伪类:focus-within能非常方便处理获取焦点状态， 当元素本身或其后代获得焦点时，:focus-within伪类的
阅读全文
posted @ 2020-07-16 17:26
前端一点红
摘要：网站的加载速度不仅影响着用户体验，也会影响搜索引擎的排名，在百度推出“闪电算法”以来，将网站首屏打开速度被列入优化排名行列，并明确指定打开时间为 2 秒。作为前端开发的我们需要如果来优化网站的打开速度呢？下面就整理挖掘出很多细节上可以提升性能的东西分享给大家 优化网站性能的14条规则： 1. 尽可能
阅读全文
posted @ 2020-07-16 17:25
前端一点红
摘要：用户体验一直是前端开发需要考虑的重要部分，在数据请求时常见到锁屏的loading动画，而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代，以优化用户体验 Skeleton Screen Skeleton Screen(骨架屏)就是在页面数据尚未加载前先给用户展
阅读全文
posted @ 2020-07-16 17:24
前端一点红
摘要：为了让网页内容更好的适应各类屏幕尺寸，一般都需要用到height:100%。但是会发现，height百分比失效并没有生效，这是什么原因造成的呢，以及我们需要如何解决呢？ height百分比失效的原因 你让div的height="100%"，执行网页时，css先执行到，而整个网页中的内容还没有完全载入
阅读全文
posted @ 2020-07-16 17:09
前端一点红
摘要：问题产生的原因 当我们为div标签声明了宽度，但是仍然会出现文本越界的情况，不知道大家有没有发现，只有文本内容为单词或者纯数字的时候才会出现这种情况。原因是由于：浏览器在解析我们页面的时候，给这一串数字当成一个词了，这样就不会自动切断字符串而进行换行。 解决方法 需要使用css中的word-wrap
阅读全文
posted @ 2020-07-16 17:08
前端一点红
摘要：css的pointer-events属性 auto：与 pointer-events 属性未指定时的表现效果相同。 none：该元素永远不会成为鼠标事件的 target。但是，当其后代元素的 pointer-events 属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒
阅读全文
posted @ 2020-07-16 17:06
前端一点红
摘要：一、css下兼容性的元素水平/垂直翻转实现 随着现代浏览器对css3的支持愈发完善，对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能。相关的css代码如下： /*水平翻转*/ .flipx { -moz-transform:scaleX(-1); -webkit-transfor
阅读全文
posted @ 2020-07-16 16:55
前端一点红
摘要：什么是Browsh? Browsh是一个纯文本浏览器，可以运行在大多数的TTY终端环境和任何浏览器。目前，终端客户端比浏览器客户端更先进。 TTY 客户端 终端客户端即时更新和交付，以便于体验新的功能，例如，你可以观看视频。它使用UTF-8半块技巧(▀)从每个字符单元中获取2中颜色，从而仿真基本图形
阅读全文
posted @ 2020-07-16 16:53
前端一点红
摘要：做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。 可是啊，现实太残酷，浏览
阅读全文
posted @ 2020-07-16 16:37
前端一点红
摘要：一般情况下，如果没有经过特殊处理，移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟。也就是说，当我们点击页面的时候移动端浏览器并不是立即作出反应，而是会等上一小会儿才会出现点击的效果。在移动WEB兴起的初期，用户对300ms的延迟感觉不明显。但是，随着用户对交互体验的要求越来越高，现
阅读全文
posted @ 2020-07-16 16:27
前端一点红
摘要：box-sizing用于更改用于计算元素宽度和高度的默认的 css 盒子模型。它有content-box、border-box和inherit三种取值。inherit指的是从父元素继承box-sizing表现形式，不再冗赘。 1. 属性讲解 content-box 默认值，也是css2.1中的盒子模
阅读全文
posted @ 2020-07-16 16:22
前端一点红
摘要：说到Tab切换，你可能首先想到的就是使用jQuery，短短几行代码就可以轻松搞定一个Tab切换。而今天所要分享的，是使用 0 行js代码来实现Tab切换！ 方法一：模拟单选框原理 该方法大致原理如下：当用户点击label元素时，该label所绑定的input单选框就会被选中，同时通过使用css选择器
阅读全文
posted @ 2020-07-16 16:19
前端一点红
摘要：在移动端部分浏览器中点击了图片，变成了查看图片的效果，怎么防止img的图片被手机浏览器的图片查看器打开呢？下面整理了一些方法来实现。 1、1.在img元素上添加 onclick="return false" <img src="./img/tip.png" onclick="return false
阅读全文
posted @ 2020-07-16 16:10
前端一点红
摘要：微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。 由此带来的变化是，这些前端应用可以独立运行、独立开发、独立部署。以及，它们应该可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Ta
阅读全文
posted @ 2020-07-16 16:02
前端一点红
摘要：需求 textarea默认的高度不是对着内容变化，而是随着内容增多，出现了滚动条。目前的需求是实现一个能够输入的textarea，并且高度跟着内容变化。 发现了一个比较好用的插件flexText，但是这个基于jquery写的，目前的技术栈是react，所以简单看了下，然后用原生的js模拟了一个实现。
阅读全文
posted @ 2020-07-16 15:54
前端一点红
摘要：1.不要让你的代码脱离你的掌控，尽量简洁 别让你的代码脱离你的掌控 这是编程的一种通用建议，不仅仅适合css. 当你开始写代码的时候，先思考，思考以下几个问题： 我怎样实现？ 有其他方法实现么？ 怎样优化（简洁，可维护，等等）？ 急于编码会浪费时间，你有可能花了一个小时也没实现，不得不从头再来，这不
阅读全文
posted @ 2020-07-16 15:53
前端一点红
摘要：网络加载类 减少 HTTP 资源请求次数 合并静态资源图片、JavaScript 或 css 代码，减少页面请求数和资源请求消耗 避免重复的资源，防止增加多余请求 减小 HTTP 请求大小 减少没必要的图片、JavaScript、css 及 html 代码 对文件进行压缩优化 使用 gzip 等方式
阅读全文
posted @ 2020-07-16 15:45
前端一点红
摘要：使用 css 让元素不可见的方法很多，剪裁、定位到屏幕外、明度变化等都是可以的。虽然它们都是肉眼不可见，但背后却在多个维度上都有差别。 元素不可见，同时不占据空间、辅助设备无法访问、不渲染 使用 script 标签隐。例如： <script type="text/html"> <img src="1
阅读全文
posted @ 2020-07-16 15:41
前端一点红
浙公网安备 33010602011771号