Grid 是一个基于二维网格布局的系统，有了它我们可以非常方便的实现过去很复杂布局，无需再使用float, inline-block, position 这些本质上是 hack 的方法。
在很多商城app中，有一个功能是选中按钮后，右下角会显示一个三角形，然后三角形中有一个勾，提示用户已经选中了此选项，但在很多组件中是没有提供这个的，下面我们来实现这个功能，效果如下：
很多人认为页面页脚部分不就是用footer主义化标签包起来嘛，然而不然；如果你足够细心的话就会发现当我们页面中主体内容不够多的时候会发生这样的情况：
css3 Grid Layout 表格布局是在css中强大的难以置信的布局模块。它是二维空间的，所以它可以处理行和列
1、浏览器事件模型（捕获阶段、冒泡阶段） 2、Vue中的 computed和 watcher的区别（刚好是我没看到的〒▽〒） 3、使用过 webpack吗（没用过，面试官建议我去看看） 4、小程序中遇到过最大的问题（原生组件遮挡的问题） 5、cookie和 localStorage的区别（没有了解） 6、算法：一个 1-100的数组，从中间拿掉一个，怎么确定拿了哪一个数 7、em和 rem的区别，还有 vh是什么 8、说说 position（static、absolute、relative、fixed）。具体参考我的这篇文章：前端：CSS定位position 9、JavaScript的类型（基本类型和引用类型） 10、合并两个数组的方法（concat），拼接字符串数组的方法（join） 11、CSS选择器权重（优先级）计算。前端：CSS选择器优先级计算 12、js文件加载 defer（页面渲染完成才会执行）和 async（获取js时不阻塞，获取完成后立即执行并阻塞）的区别。 13、img标签的 src、alt的用处（我的天，我把这两个听成一个单词了） 14、不适用 localStorage是怎么在不同页面传递数据的 15、怎么做不同屏幕的适配（CSS3媒体查询）
在现代化前端开发中，我们可以借助构建工具来简化很多工作，单应用多端构建就是其中应用比较广泛的方案，webpack中提供了loader与plugin来给予开发者非常大的操作空间来操作构建过程，通过操作中间产物我们可以非常方便地实现多端构建，当然这是一种思想而不是深度绑定在webpack中的方法，我们也可以借助其他的构建工具来实现，比如rollup、vite、rspack等等。
1、flex-grow指扩展flex子项所占据的宽度，扩展的空间就是除去元素外剩余的空白间隙。
HTML 中的“空白符”包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。
在网页设计中，背景是一个重要的视觉元素，它可以为网页增添层次感和美感。通过 CSS 样式表，我们可以轻松地控制网页的背景效果。在这篇博客中，我将介绍如何使用 CSS 来设置网页背景，让你的网站更加吸引人。
vertical-align，写过 CSS 的朋友们肯定都知道这个属性的作用，顾名思义，垂直对齐，主要目的用于将相邻的文本与元素对齐。MDN 中对它的定义如下：
昨天产品需求评审，产品经理收到用户的反馈，在系统中有一些文本域，用户希望在在文本中填写的文本内容和格式都能够被保留下来，目前只能保存文本内容，对于文本域的换行和空格，在显示的时候都没有正确显示。
标签会让浏览器尝试在声明的URL中检索图像。但是，如果所提供的URL在最后没有像“.jpg”，“.gif”或“.png”这样的扩展名。例如，实际上会让访问该页面的任何人访问liaobu.de这个网址。aff链接可以直接放入，也可以在.htaccess中创建重定向。
（1）用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
你是否找到：一个好玩的开源项目，结果卡在了部署环境、安装依赖上？最后"含恨而终"！
好评回答：进入控制面版→维护首页内容→自定义空白面版→输入方框内代码，有的人给出的代码还要打字,我的不需要,其实在代码里加入一个就可以了,因为这个东西是HTML代码里的空格,相当于有内容了.—- a:hover {cursor:url(‘http://放在连接上的鼠标样式’)}BODY {cursor:url(‘http://平时的鼠标样式’)}详见 若还觉得不够详细可直接给我留言，有几十种个性模板供你参考
因为渲染引擎可以通过跳帧（frame-skipping）及其它技术来确保性能尽量流畅
按钮 是 扩展 按钮 , 使用 Ctrl + Shift + X 也可以快速进入插件安装界面 ;
作者：charryhuang，腾讯 CSIG 前端开发工程师 1991年8月，第一个静态页面诞生了，这是由Tim Berners-Lee发布的，想要告诉人们什么是万维网。从静态页面到Ajax技术，从Server Side Render到React Server Components，历史的车轮滚滚向前，一个又一个技术诞生和沉寂。 前言 1994年，万维网联盟（W3C，World Wide Web Consortium）成立，超文本标记语言（HTML，Hyper Text Markup Languag
在电脑中使用过网页版知乎的小伙伴们应该都知道，在使用前是必须进行登录的，为此小编就带来了知乎免登录插件2021，这是专门针对知乎登录问题而打造的一个浏览器插件脚本工具。因为在访问网页版时会强制要求你登录账号，否则根本点不进去，无法正常使用，但是有了该插件，只需要启动即可轻松帮助用户实现不登录也可正常使用知乎网页版，并只要启动了知乎免登陆脚本不仅直接免去了登陆的流程，还丝毫不会影响用户浏览其中的问题、文章、答案以及别人的评论等内容，十分强大。 不过需要注意的是，这个脚本是属于油猴脚本的，所以在使用前需要先安装油猴管理器，当然小编也是有打包提供的，只需要先安装好油猴，再导入安装脚本即可。
安装配置使用 目录结构 安装 扩展配置搜索 Easy LESS扩展插件安装重启 配置 项目所在的根目录，新建.vscode目录 .vscode目录下新建settings.json文件 说明 compress 是否除多余的空白 out 指定生成css的位置，其中${workspaceRoot}为vscode常量,表示当前项目根目录 { "less.compile":{ "compress": true, "out":"${workspaceRoot}/css/" } }
SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点： 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。 先来看一个示例： Sass 语法： $font-
写css，你少不了与margin打交道。你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？……
mui是一个高性能的HTML5开发框架，从UI到效率，都在极力追求原生体验；这个框架自身有一些规则，刚接触的同学不很熟悉，特总结本文；想了解mui更详细的信息，请访问mui官网。
入职一个月了，mentor很nice，愿意接受一个0基础的我还带我成长，留下了感动人心的泪水。进入状态的速度很快，入职第一天就开始做工作，但是因为一片空白，什么都不会，所以写出来的分析报告各种不合格，mentor一直在引导我思考，和我沟通，会合适的给予一个指导，让我的思路更明确，逐渐在一轮又一轮的工作中培养思维习惯，形成正确的思维方式。他让我通过不同的事情，让我循序渐进的了解产品经理的工作流程，重新搭建了我的方法论。
vue中,将textarea进行v-model绑定后，在使用{{ }}显示时，换行不生效，直接显示成空格
在本页面，你将扩展《英雄指南》应用，让它显示一个英雄列表， 并允许用户选择一个英雄，查看该英雄的详细信息。
本人在实践过程中偶尔遇见此等不解的状况，但往往睁一只眼闭一只眼，采取另外的方式了，而今看到原博主的一篇文章，大受启发，希望对各位博友也有所帮助~
鱼皮最新原创项目教程，欢迎学习 大家好，我是鱼皮。今天给大家分享一些 2023 年前端必备的 VS Code 插件： 前端框架 ES7+ React/Redux/React-Native snippets 该插件提供了许多速记前缀来加速开发并帮助开发人员为 React、Redux、GraphQL 和 React Native 创建代码片段和语法。 例如，创建一个新文件并输入 rfce 然后按回车键，这将生成一个 React 函数组件，导入 React 并导出组件。 VSCode React Refact
最近不是在参加创意游戏的活动吗，就想用css能不能组合出一些好看的效果，比如空心的圆环，或者扇形之类的，于是乎就去网上搜教程，结果找遍了谷歌和百度都没能找到想要的结果，可能这个需求确实小，也可能是我搜索的姿势不对吧，找出来的都是用障眼法实现相应的效果，根本不是我想要的，忽然想起来前阵子掘金给了一本张鑫旭大佬的css新世界，于是乎去翻了翻书里的内容，果然找到了解决的办法，那就是用强大的clip-path属性，下面就让我们来看看这个属性如何实现我们想要的效果的吧。
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时，实际值会按比例分配元素宽度时，不禁会问"我真的懂border吗？"。本系列将稍微深入探讨一下那个貌似没什么好玩的border！ 《CSS魔法堂：重拾Border之——解构Border》 《CSS魔法堂：重拾Border之——图片作边框》
ngx_pagespeed是Nginx的一个扩展模块，借助pagespeed,为Nginx网站服务器提速。主要的功能是针对前端页面而进行服务器端的优化，对前端设计人员来说，可以省去优化css、js以及图片的过程。 ngx_pagespeed对nginx自身负载能力的提升基本是看不到的，甚至会因为进行服务器端的优化而使系统增加负载；但从减少客户请求数的角度去看，牺牲部分服务器性能还是值得的。 ngx_pagespeed模块的主要功能大致有： 1）图像优化：剥离元数据、动态调整，重新压缩 2）CSS和JavaS
问题：我怎么才能收到你们公众号平台的推送文章呢？ 内容部分 1.尽量减少HTTP请求数 80%的终端用户响应时间都花在了前端上，其中大部分时间都在下载页面上的各种组件：图片，样式表，脚本，Flash等等。减少组件数必然能够减少页面提交的HTTP请求数。 减少页面组件数的一种方式是简化页面设计。 合并文件是通过把所有脚本放在一个文件中的方式来减少请求数的，当然，也可以合并所有的CSS。 CSS Sprites是减少图片请求数量的首选方式。把背景图片都整合到一张图片中，然后用CSS的background-ima
Github：https://github.com/apache/incubator-pagespeed-ngx
《CSS世界》第六章 流的破坏与保护总结 author: @TiffanysBear float属性 float的本质与特性 1.包裹性（包含包裹和自适应） 2.块状化并格式化上下文 3.破坏文档流 4.没有任何margin合并 float的作用机制 float属性使父元素高度塌陷，为了实现文字环绕效果。高度塌陷是为了让跟随的内容可以和浮动元素在一个水平线上。（行框盒子在正常定位状态下只会跟随浮动元素，不会发生重叠） clear属性 clear属性让自身不能和前面的浮动
其中，有个属性值暴露了vertical-align和line-height之间的基友关系，大家猜猜看是哪个属性值？
继前面几篇文章后再来说说老生常谈的话题，怎么样提升前端性能。文中很多取材自网络及《High Performance Web Sites》，并根据自己工作中所接触到的知识整理而成。
不同于其他很多属性，盒模型中垂直方向上的Margin会在相遇时发生崩塌，也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时，只有二者中的较大值会被保留下来，可以从下面这个简单的例子来学习:
通过动手练习来学习一项新的技术是很好的方式，但是如果对整体的概念没有一个清晰的了解就很容易犯错或者给自己挖坑。
我想你每天写css代码有时候也会觉得很痛苦：这个布局的css怎么这么难实现！我也经常会有这种感觉，一个看似简单的布局总是要琢磨半天才能实现，偶尔还会出现一些怪异的超出理解的现象。这是因为我们对css只是大概知道个形，并没有看透css的本质。在同事的推荐下我阅读了张鑫旭老师的《css世界》，才发现css跟想象中的不太一样。本文为《css世界》个人总结笔记，为缩减篇幅丢弃了张老师冗余的小幽默，丢掉了些含金量较低的章节内容，因为ie已经被淘汰出局，所以有关css兼容性的地方也全部忽略不记，同时对个人觉得不易理解的地方加上了一些自己的理解和验证，所以错误之处还望指正。顺便推荐个好用的在线代码编辑工具，国内镜像站点，方便各位对本文实例进行测试。另外本文会随着作者对css的更深入理解而逐步更新，希望到最后能够文如标题展现出真正的css世界。
vue-router是vue单页面开发的路由，就是决定页面跳转的！<router-link> 组件支持用户在具体有路由功能的应用中（点击）导航。通过to属性指定目标地址。
网络犯罪分子很少重复发明轮子，因为从勒索软件到窃密程序，地下市场有各种各样可供购买的工具包，任何人都可以快速上手。
在过去的几年里，网站进化成了复杂的网页应用。曾经的互联网只涉及到简单的商业信息展现，而如今，看看 Facebook、Slack、Spotify 以及 Netflix，互联网正在改变你的社交和生活方式。随着互联网的发展，前端开发这个行业达到了全新的高度，并得到了前所未有的重视。
如果你是一名网页开发者或设计师，你可能听说过Tailwind CSS，这是一个以实用为主的CSS框架，已经在开发社区中引起了轰动。Tailwind CSS 提供了一种独特的方法来构建用户界面，通过提供预定义的实用类，可以实现快速高效的开发。
在规则声明中，“选择器” 负责选取 DOM 树中的元素，这些元素将被定义的属性所修饰。选择器可以匹配 HTML 元素，也可以匹配一个元素的类名、ID, 或者元素拥有的属性。以下是选择器的例子：
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
