前端技术文章
-
- CSS容器内边距背景色覆盖解决方法
- background-clip属性决定背景的绘制范围，其默认值border-box使背景延伸至边框外沿，包含padding和content区域；若设置为padding-box则背景覆盖内边距及内容，而content-box仅在内容区显示背景，常因误设后两者导致背景未覆盖padding区域；通过将background-clip设为border-box，可确保背景色或背景图正确填充padding区域，避免“padding遮挡背景”的误解，尤其在使用渐变或图片背景时更需注意该属性的合理设置。
- 文章 · 前端 | 1个月前 | CSS 背景色 360浏览 收藏
-
- 要让多个 div 元素严格并排显示而不换行，可以使用以下几种方法：✅ 方法一：使用 display: inline-blockdiv { display: inline-block; width: 100px; /* 设置宽度 */ }注意：如果 div 的总宽度超过容器的宽度，它们会自动换行。可以通过设置 white-space: nowrap 来防止换行。✅ 方法二：使用 flexbo
- 当使用inline-block布局多个div时，因HTML中的换行符和空格被渲染为文本节点，导致元素间产生不可见间隙，进而使第三列被迫折行——这是常见布局失效主因，可通过移除空白、重置字体大小或改用Flexbox彻底解决。
- 文章 · 前端 | 1个月前 | 396浏览 收藏
-
-
CSS 实现卡片堆叠效果，使用 absolute 与 z-index 是常见方法。以下是一个简单实现思路：设置容器为相对定位（position: relative），以便内部绝对定位元素以它为参考点。给每个卡片设置绝对定位（position: absolute），并调整 top 和 left 值来控制位置。通过 z-index 控制卡片的层级顺序，数值越大越靠前。示例代码如下：
- 卡片堆叠不必须用position:absolute；本质由层叠上下文和z-index控制，position:relative等也能触发，但z-index对static无效，且父子层叠上下文会隔离z-index作用域。
- 文章 · 前端 | 1个月前 | 105浏览 收藏
- Lang属性与字符编码对页面渲染的影响
- lang属性必须写在<html>标签上才有效，写在<body>或子元素中无效；charset和lang缺一不可，且位置、格式、大小写均影响解析与渲染效果。
- 文章 · 前端 | 1个月前 | 479浏览 收藏
- HTML中使用WebSocket发送数据的方法详解
- WebSocket.send()可发送DOMString、ArrayBuffer、Blob或TypedArray；不可直接发送对象、undefined或null，须先JSON.stringify()序列化，且需确保ws.readyState为OPEN。
- 文章 · 前端 | 1个月前 | 167浏览 收藏
- 富文本编辑漏洞检测教程 XSS防范指南
- 富文本编辑器XSS漏洞检测需贯穿数据生命周期，核心是发现输入过滤、编码处理或上下文渲染中的缺陷。首先注入script标签、事件处理器、javascript:伪协议等Payload，观察是否被正确转义或执行；常见触发点包括onerror、onload等事件属性及SVG、data:URI等非常规标签。绕过机制常利用双重编码、大小写混淆、HTML注释分割、非标准语法或浏览器解析差异。除XSS外，还需防范HTML注入导致的钓鱼与页面破坏、文件上传漏洞引发的任意代码执行、SSRF导致内网探测、信息泄露及CSRF引起
- 文章 · 前端 | 1个月前 | html如何查漏洞 313浏览 收藏
-
CSS 实现卡片堆叠效果，使用 absolute 与 z-index 是常见方法。以下是一个简单实现思路：设置容器为相对定位（position: relative），以便内部绝对定位元素以它为参考点。给每个卡片设置绝对定位（position: absolute），并调整 top 和 left 值来控制位置。通过 z-index 控制卡片的层级顺序，数值越大越靠前。示例代码如下：