欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。

作为前端开发，CSS写多了，难免会遇到一些痛点：重复的代码、难以维护的选择器、缺乏变量和函数等等。这时候，CSS预处理器就像救星一样出现了！而Less和Sass就是其中最受欢迎的两个。今天，我就来聊聊它们之间的区别，帮你选出最适合自己的那一款。

记得刚学习JavaScript时，面对原型和原型链这个概念，我一度感到非常困惑。直到在项目中遇到一个实际问题，才让我真正理解了它的重要性。今天，就让我们通过几个实际的例子，来揭开JavaScript对象继承的神秘面纱。

作为前端开发必备的核心概念，闭包常常让初学者感到困惑。记得刚入行时，我也曾被各种晦涩的解释绕得云里雾里。直到在项目中踩了几个坑，才真正理解了它的精妙之处。今天，就让我们抛开教科书式的定义，用实际的代码来聊聊这个看似神秘的概念。

理解浏览器渲染流程就像掌握了前端开发的底层密码。当杨涛深入这些原理后，他不仅能快速定位性能问题，还能预见代码的渲染结果。记住，优秀的开发者不仅要让代码能运行，更要明白代码是如何运行的。

理解HTML和XHTML的区别有助于开发者根据项目需求做出合理选择。虽然现代Web开发已倾向于使用HTML5，但了解XHTML的严谨性对于培养良好的编码习惯仍然有益。正如杨涛在项目复盘中所说："技术选择没有绝对的对错，只有适合与否。"

在网页开发中，理解HTML元素的默认显示类型是构建良好结构的基础。就像建筑师需要了解不同材料的特性一样，前端开发者必须掌握各类HTML元素的行为特点。本文将带你全面了解行内元素、块级元素和空元素的区别及应用场景。

在Retina等高PPI屏幕普及的今天，传统的1px边框往往显得过于粗犷。设计师追求的极致细节需要我们实现真正的"细线"效果。特别是在制作分割线、边框等元素时，0.5px的线条能够带来更加精致的视觉体验。下面我们就来探索各种实现方案。

在扁平化设计大行其道的今天，渐变色彩成为了打破界面单调性的秘密武器。从Instagram的logo到各种流行网站的按钮，渐变效果无处不在。它不仅能够增加视觉层次感，还能引导用户视线，创造独特的品牌识别度。作为前端开发者，掌握CSS渐变技术能让你的设计作品脱颖而出。

在Flex布局中，flex这个简写属性看似简单，却让不少开发者感到困惑。flex: 1、flex: 0 1 auto、flex: 0 0 200px这些写法到底有什么区别？理解这三个参数的含义，能让我们真正掌握Flex布局的精髓，实现各种复杂的伸缩布局效果。

还记得被float和clearfix支配的恐惧吗？Flex布局的出现彻底改变了前端开发者的布局方式。根据2023年前端工具调查报告，Flex布局的使用率已经达到惊人的98%，成为最受欢迎的CSS布局方案。今天，我将通过10个真实场景，带你全面掌握Flex布局的实战应用。

还记得那个"浏览器战争"的年代吗？不同浏览器对同一网页的渲染效果千差万别，开发者不得不为IE、Netscape等不同浏览器编写特定代码。正是Web标准和W3C的出现，终结了这种混乱局面，让"一次编写，到处运行"成为可能。今天，我们就来深入探讨这个支撑现代Web发展的基础架构

作为CSS中最基础也最强大的属性之一，display决定了元素如何在页面上呈现。一个简单的display属性变化，就能让元素从垂直排列变为水平排列，从块级元素变为内联元素，甚至创建复杂的网格布局。掌握display的各种属性值，是成为前端高手的必经之路。

在日常前端开发中，我们几乎每天都要与CSS打交道。但你是否思考过：为什么有些项目使用<link>引入CSS，而有些则使用@import？不同的引入方式会对页面性能产生什么影响？今天，我们就来彻底搞懂CSS的各种引入方式及其适用场景。

在移动端开发中，设计师通常提供 750px宽的设计稿（如iPhone 6/7/8的2倍图），而前端需要将其转换为灵活的rem单位以实现适配。本文将以 “750px设计图中20px等于多少rem” 为例，详细讲解换算方法，并给出完整的适配方案。

在前端开发中，CSS单位的选择直接影响页面的布局适配能力。不同的单位（如rem、em、vw/vh、%）适用于不同的场景，理解它们的计算规则和适用场景，能帮助我们更高效地实现响应式设计。本文将深入对比这些单位，并给出实际应用建议。

TypeIt 是一个轻量级、灵活的 JavaScript 库，用于实现文字打字机效果。它支持多种功能，如自定义打字速度、删除文字、循环动画等，非常适合用于标题、标语或动态文本展示。

通常情况下，我们会使用图片或者svg去完成三角形效果图，但如果单纯使用css如何完成一个三角形呢？

视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验我们可以把网页解刨成：背景层、内容层、悬浮层

在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号

css样式文件有两种引入方式，一种是link元素，另一种是@import@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时而且多个@import可能会导致下载顺序紊乱比如一个css文件index.css包含了以下内容：@import url("reset.css")那么浏览器就必须先把index.css下载、解析和执行后，才下载、解析和执行第二个文件

CSS3 中的增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表

当我们对DOM的修改引发了DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来

CSS动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块即指元素从一种样式逐渐过渡为另一种样式的过程常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合

Grid网格布局是一种基于网格线的布局方式，它将页面按照行和列进行划分，将内容元素放置在网格线之间。这种布局方式具有很强的规律性和重复性，能够呈现出整洁、有序、美观的页面效果。Grid网格布局常用于网页、UI设计、移动应用等多种场合，是一种非常实用的布局方式。

Flexbox 是一种新的 CSS 布局模式，它可以轻松地实现各种复杂的布局。与传统的布局方式（如浮动、定位等）相比，Flexbox 具有更高的灵活性和性能。

两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满，比如Ant Design文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器

父级设置为相对定位，子级绝对定位 ，并且四个定位属性的值都设置了0，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个margin：auto它就可以上下左右都居中了

在平常的样式排版中，我们经常遇到将某个模块隐藏的场景通过css隐藏元素的方法有很多种，它们看起来实现的效果是一致的但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法

它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）一个盒子由四个部分组成：content、padding、border、margin

本文主要探讨了我们如何解决CSS优先级问题，尤其是关于CSS重置层面的问题。随着我们接近2023年底，随着用户升级他们的浏览器，这种使用CSS层来解决CSS冲突的方法将越来越常见。在构建Pink Design的过程中，我们有幸为开发者这种类型的用户提供服务，他们通常会定期更新浏览器。因此，我们选择了采用这种新的、利用CSS层进行开发的方法。

1:in-range这篇文章介绍了15个重要的CSS属性，旨在提高读者的CSS知识和技能。文章以清晰的方式解释了每个属性的作用和用法，并提供了相应的示例代码。通过这篇文章，读者可以了解到一些有趣且实用的CSS属性。1:in-range。

在 Web 开发领域中，有很多误解流传，即使它们被反驳了很多次也仍然存在。"外部链接应该总是在新标签页中打开" 就是一个很好的例子。CSS Tricks在将近十年前就对此进行了详细的解释（简而言之：大多数情况下是错误的），但它似乎仍然在某些角落中存在。案例证明：在CSS中，pxem或 rem单位之间没有功能上的区别的想法是一个我一遍又一遍听到的误解，因此我想在这里发帖来解决这个问题。我们要非常清楚：在CSS中使用的单位绝对很重要。并且在设置时font-size应尽可能避免使用 px。

这篇文章详细解释了CSS中的sticky定位方式，并讲解了它的工作原理。CSS中的sticky定位有很好的浏览器支持，但许多开发者并没有使用它。原因有两方面：一是等待浏览器支持的时间太长，导致这个特性被遗忘；二是大部分开发者并不完全理解它的工作原理。我假设你们都知道CSS定位，但让我们简要回顾一下：直到3年前，有四个CSS位置：staticrelativeabsolute和fixed。static或relative与absolute或fixed之间的主要区别在于它们在DOM流中占用的空间。

解决input框被禁用后无法添加点击事件的bug 简单易懂，快来围观