JavaScript 3 种书写位置及 script 标签的正确存放位置
JS 的代码并没有强制规定放在 HTML 中的某个位置，如果您有使用过开发者工具查看过网页源码，那么您会看到很多 JS 代码都以 .js 文件的形式存放，并且放在了 HTML 文件最后，也就是 </body> 结束标签之前。 但如果仔细观察，在 <head&gt
笔记哥 05/16/2025
JavaScript 的各种调试方法
任何一门编程语言，在学习之前都应该先弄清楚它的调试方法，毕竟没有不挖坑的人类！ 程序一旦出现问题，第一时间就是找到问题出在哪儿，其次才是拿出解决办法。如果都找不到问题原因，那又何从谈起解决办法呢？ 如何排查编程问题，这就是一门艺术了，同样的问题，也许 A 只需要 10 分钟，B
JavaScript 的各种调试方法 图1
JavaScript 的各种调试方法 图2
JavaScript 的各种调试方法 图3
笔记哥 05/15/2025
移动端适配的视口元标签（meta）常见使用场景
经常查看网页源码的同学应该都有注意到，基本上面向移动端的所有网站都有个 <meta name="viewport" xxx> 这样的HTML元素。 为什么需要 meta 标签？ 在移动端刚起步的时候，默认网页是以 PC 端的宽度渲染，这就导致用户看
笔记哥 05/13/2025
CSS offset 路径动画演示
什么是路径动画？ 随手画一条不规则的线，让元素按照这条不规则的线运动起来，这就是所谓的路径动画。 前面说过的动画都只能针对某一个 CSS 属性，要想实现路径动画可没办法，路径动画必须借助 CSS3 的 offset 相关能力。 offset 相关属性 要实现路径动画，必须用到 o
CSS offset 路径动画演示 图1
CSS offset 路径动画演示 图2
CSS offset 路径动画演示 图3
笔记哥 05/11/2025
纯 CSS 使用 column 属性实现瀑布流布局
什么是瀑布流？ 看一张图，以下图片来源于花瓣网截图： 如上图所示，瀑布流就是让内容按列显示，自动填充空白。 使用 column 实现瀑布流 源码： <div class="masonry"> <div class="item&q
纯 CSS 使用 column 属性实现瀑布流布局 图1
纯 CSS 使用 column 属性实现瀑布流布局 图2
纯 CSS 使用 column 属性实现瀑布流布局 图3
笔记哥 05/09/2025
CSS @media 媒体查询不要只会视口宽度适配详解
@media 媒体查询的出现解决了什么问题？ 曾经，一个网页要兼容移动端和 PC 端，前端的代码复杂度嗖嗖嗖的飙升，需要使用多套代码对各种屏幕尺寸做适配。 @media 的出现解决了 CSS 中无法适配设备尺寸的问题，让 CSS 拥有了处理简单逻辑的能力。 媒体查询就像进店试穿衣
CSS @media 媒体查询不要只会视口宽度适配详解 图1
笔记哥 / 技术博文 / 768 次阅读 / 05/08/2025
CSS @media 媒体查询不要只会视口宽度适配详解 图1
深入理解 CSS 变量 var() ：实现主题换肤与代码功能
曾经主题切换功能可以作为软件中亮眼的卖点存在，毕竟那时候要实现换肤可不容易，一套主题一套样式，这代码的重复率嗖嗖嗖的就涨上去了~~当然也可以借助 CSS 预编译 语言编译出多套 CSS 样式表。 没有用觉得我们其实并不需要多套样式表实现换肤？我们只是想要一个像 JS 设计模式中的
深入理解 CSS 变量 var() ：实现主题换肤与代码功能 图1
深入理解 CSS 变量 var() ：实现主题换肤与代码功能 图2
深入理解 CSS 变量 var() ：实现主题换肤与代码功能 图3
笔记哥 05/06/2025
CSS 循环动画 animation 效果解析和演示
相关属性 @keyframes 定义动画的关键帧序列 animation-name 指定 @keyframes 动画的名称 animation-duration 动画单次循环的持续时间（必需属性，否则动画不会生效） animation-timing-function 动画速度曲线
CSS 循环动画 animation 效果解析和演示 图1
CSS 循环动画 animation 效果解析和演示 图2
CSS 循环动画 animation 效果解析和演示 图3
笔记哥 04/29/2025
浏览器如何确定最终的CSS属性值？解析计算优先级与规则
前言 上篇文章中有提到CSS值的处理过程，但如果想要确定一个元素的最终样式值可以不需要这么多步。实际上我们写的任何一个标签元素无论写没写样式，它都会有一套完整的样式。理解这一点非常重要‼️ 比如：一个简单的p标签 打开浏览器控制台，选中元素，切换到computed选项，勾选sho
浏览器如何确定最终的CSS属性值？解析计算优先级与规则 图1
浏览器如何确定最终的CSS属性值？解析计算优先级与规则 图2
浏览器如何确定最终的CSS属性值？解析计算优先级与规则 图3
笔记哥 04/28/2025
CSS 动画之过渡属性 transition 改变用户体验
CSS3 规范出现之前，要实现一个动画效果那必须借助 JavaScript 的能力才够得着，所以当时的前端开发但凡听到动画交互，那眉头可就成了一个川字儿了~ transition 的出现，改变了实现动画难的困境，也让前端的交互不再生硬，所有的页面元素如同有了灵性一般。 trans
CSS 动画之过渡属性 transition 改变用户体验 图1
CSS 动画之过渡属性 transition 改变用户体验 图2
CSS 动画之过渡属性 transition 改变用户体验 图3
笔记哥 04/28/2025
神奇的 transform 改变元素形状，matrix3d 矩阵变换算法演示
CSS transform 属性中文翻译过来是 变换，始终觉得翻译差那么一点意思。它可以用来改变元素形状，比如旋转、缩放、移动、倾斜等，就是它可以把元素各种拿捏~ transform 特性是在不改变自身尺寸的情况下，对元素进行各种变形，元素自身的文档流位置还是会保留，语言有些空洞
神奇的 transform 改变元素形状，matrix3d 矩阵变换算法演示 图1
笔记哥 / 技术博文 / 900 次阅读 / 04/24/2025
神奇的 transform 改变元素形状，matrix3d 矩阵变换算法演示 图1
CSS float 浮动布局应用场景
CSS float 浮动属性最早用于文字环绕图片效果，就像传统报纸上的印刷排版一样。 CSS2 的规范推动了浮动用于其他元素，float 便被大范围应用于布局，当年常说的 div + css 布局，float 绝对占有一席之地，float 用于布局手段便颠覆了再之前的表格布局，如
CSS float 浮动布局应用场景 图1
CSS float 浮动布局应用场景 图2
CSS float 浮动布局应用场景 图3
笔记哥 04/23/2025
CSS position定位布局全解析
CSS 的定位属性 position 可以把元素从文档流中拧出来，让其显示在其他位置。 但凡元素定位属性加身，元素位置便不再受文档流控制，这时候什么 flex、grid 都不好使了，定位的元素已然跳出三界外，不在五行中，这时候元素的位置由自身的偏移属性决定（top、right、b
CSS position定位布局全解析 图1
CSS position定位布局全解析 图2
CSS position定位布局全解析 图3
笔记哥 04/22/2025
CSS flex 弹性盒子与 grid 网格布局区别及应用场景
弹性盒子又称为 Flexbox，然而我更喜欢 flex 的叫法。 flex 弹性盒子和 grid 网格布局作为前端开发中两把利器，它们的分界线没那么明显，虽然按照 MDN 的说法 flex 多用于一维布局(行/列)，grid 多用于二维布局(行列网格)，但实际开发中用多个一维布局
CSS flex 弹性盒子与 grid 网格布局区别及应用场景 图1
CSS flex 弹性盒子与 grid 网格布局区别及应用场景 图2
CSS flex 弹性盒子与 grid 网格布局区别及应用场景 图3
笔记哥 04/21/2025
细说 CSS grid 网格布局子元素相关属性
学习本文之前，建议先学习上一篇了解父元素的相关属性。 前文对 grid 网格布局中父元素容器相关的 CSS 属性做了详细介绍，本篇将继续学习子元素相关的 CSS 属性。 网格布局的一大波样式属性，父元素占据了大半江山，子元素嘛相对就少了一些~~ 本文中的中的示例基础代码： &lt
细说 CSS grid 网格布局子元素相关属性 图1
细说 CSS grid 网格布局子元素相关属性 图2
细说 CSS grid 网格布局子元素相关属性 图3
笔记哥 04/18/2025
多图细说 CSS grid 网格布局父元素容器相关属性
grid 网格布局与 flex 弹性盒子布局一样，都需要控制 容器 跟 子元素 的样式才能做出想要的效果，部分场景只控制 容器 样式也行。 grid 样式属性 一大堆 属性 来袭~~ 与网格相关的 CSS 属性有一大堆，毕竟要同时控制行和列（行、列也被称为 网格轨道 grid t
多图细说 CSS grid 网格布局父元素容器相关属性 图1
多图细说 CSS grid 网格布局父元素容器相关属性 图2
多图细说 CSS grid 网格布局父元素容器相关属性 图3
笔记哥 04/17/2025
CSS Flex弹性盒子布局全解析
flex 作为现代布局方案中最常用的手段，有必要拉出来细说。 flex 相关的 CSS 属性 容器（父元素）相关的 CSS 属性 以下的 CSS 属性，在 flex 布局中需喂给父元素，设置 flex 布局中的盒子相关样式。 display 启用 flex 布局 flex-dir
CSS Flex弹性盒子布局全解析 图1
CSS Flex弹性盒子布局全解析 图2
CSS Flex弹性盒子布局全解析 图3
笔记哥 04/16/2025
Web前端入门：CSS常见布局的多种实现方式详解
Web 网页中，所有元素都是盒模型构成的，一个大盒子套一个或者多个小盒子，再用更大的盒子把大盒子给圈起来，这就构成了基本的 HTML 结构，再利用 CSS 把盒子装修得好看一些，最后把它放在正确位置，就是我们所看到的网页。 布局的作用就是要把元素摆放在合适的位置，让网页看起来不显
Web前端入门：CSS常见布局的多种实现方式详解 图1
Web前端入门：CSS常见布局的多种实现方式详解 图2
Web前端入门：CSS常见布局的多种实现方式详解 图3
笔记哥 04/15/2025
Web前端入门：CSS元素外观属性（边框、阴影、轮廓、透明度）
background 作为元素外观里的重点功臣介绍完毕，本文再一览其他常用的外观属性。 本文示例中，盒子基础样式： .box { font-size: 20px; margin: 20px; padding: 20px; width: 250px; heigh
Web前端入门：CSS元素外观属性（边框、阴影、轮廓、透明度） 图1
Web前端入门：CSS元素外观属性（边框、阴影、轮廓、透明度） 图2
Web前端入门：CSS元素外观属性（边框、阴影、轮廓、透明度） 图3
笔记哥 04/14/2025
CSS background 元素背景图用法全解
background 可设置背景色、渐变、背景图等，本文主要讲解背景图片的用法。 背景顾名思义就是背后的景色，始终居于元素背后，元素永远站在背景的身前。 本文示例中所使用的图片： background 背景 background 此属性是一个简写，其包含的内容有点多： backg
CSS background 元素背景图用法全解 图1
CSS background 元素背景图用法全解 图2
CSS background 元素背景图用法全解 图3
笔记哥 04/10/2025