css_前端博客-专业IT技术发表平台

推荐付费专栏 VIP文章

青衫码上行

【JavaWeb学习 | 第六篇】CSS（万字长文警告）你还在为CSS而苦恼吗？那就来阅读本篇全网最详细CSS知识点讲解文章！

阅读 8.0k

50赞

Sass (Scss) 与 Less 的区别与选择在前端开发中，CSS预处理器如Sass（Syntactically Awesome Stylesheets）和Less被广泛使用，它们通过引入变量、嵌套规则、混合、函数等特性，使CSS的开发过程更加高效和灵活。Sass最初是使用缩进语法（Indented Syntax），也被称为Sass语法，但随后Sass团队引入了SCSS（Sassy CSS），它使用类似于CSS的语法，但增加了Sass的特性。相比之下，Less的语法更接近CSS，学习曲线较Sass的缩进语法更为平缓。

阅读 1.0k

82赞

青衫码上行

【Java Web学习 | 第五篇】CSS(4) -盒子模型本文详细解析CSS盒子模型的三大核心要素：边框(border)、内边距(padding)和外边距(margin)，代码详细，图文并茂，非常适合新手学习

阅读 3.8k

41赞

程序员宝妈

2025年前端八股文整理持续更新中（css+js+vue）流动定位：保持在标准文档流中原有的位置，元素是按从左往右，从上往下的顺序摆放， left,top等属性无效相对定位：相对定位是指相对于盒子元素原有的位置进行偏移，不会脱离标准文档流，也不对其他元素产生任何影响。需设定垂直方向和水平向的偏移量，分别是left、top、right、bottom。绝对定位：绝对定位是以某一个点为基准进行偏移。绝对定位是以最近的一个已定位的父级元素为基准，如果父级元素没有定位或没有父级元素，则以浏览器窗口为基准；会脱离标准文档流，不影响同一级的盒子元素位置。

阅读 3.5k

28赞

智慧化智能化数字化方案

企业数字化——解读如何提升企业信息化管理能力【附全文阅读】本文系统阐述了提升企业信息化管理能力的路径，提出以需求整合、统一规划和分步实施为核心的建设思路。重点介绍了需求全生命周期管理、系统规划演进、IT项目管控等关键环节，强调通过标准化流程和平台工具（如Change、DOORS）实现全过程可视化闭环管理。同时引入HPPD理论框架，突出市场导向和跨团队协作，并涵盖企业架构的技术、应用等核心要素。为企业信息化建设提供了从需求管理到项目落地的系统性解决方案。

阅读 507

9赞

Java-Spring入门指南（二十四）SSM整合HTML：解决CSS/JS静态资源被过滤问题本文介绍了在SSM框架整合HTML时，解决CSS/JS静态资源被过滤问题的两种方案。当SpringMVC拦截所有请求时，静态资源（如CSS/JS）会返回404错误。方法一通过<mvc:default-servlet-handler>委托Tomcat默认Servlet处理静态请求，适合简单项目；方法二使用<mvc:resources>精准映射资源URL与实际目录，适合资源路径复杂的项目。文章详细说明了两种方案的配置步骤、原理及适用场景，并强调了与<mvc:annotation-d

阅读 2.2k

97赞

前端IT飞行员

可视化大屏适配方案：用 Tailwind CSS 直接写设计稿像素值最近在做一个数据可视化大屏项目，设计稿是 1920×1080 的。Tailwind CSS 没办法针对单个属性做 px 转 vh 或者 vw。比如设计稿上写的是，我需要手动算成这还不算完，如果要做响应式适配，不同分辨率又要重新算一遍，代码里一堆小数，根本不知道对应设计稿的哪个值。为了解决这个问题，我写了一个 Tailwind CSS 插件，可以自动将 px 转 vh、vw。用了一段时间，发现效果还不错，分享给大家。通过，我们可以快速的将 px 转 vw 或者 vh，大大提升了开发效率。

阅读 860

11赞

HBuilderX升级，Vue2 scss 预编译器默认已由 node-sass 更换为 dart-sass HBuilderX4.75版本将Vue2项目的scss预编译器从node-sass更换为dart-sass，导致旧语法不兼容。解决方案：1）在manifest.json中配置"sassImplementationName":"node-sass"继续使用node-sass；2）按文档修改为dart-sass支持的语法。官方文档提供了两种解决方法的详细说明。

阅读 1.3k

11赞

你项目里的 normalize.css 究竟是何方神圣？摘要：在重构管理后台项目时，发现不同浏览器对<body>的默认样式存在差异（Chrome默认margin:8px）。通过对比旧项目，发现其使用了normalize.css——一个由Nicolas Gallagher开发的流行CSS库，专门用于统一浏览器默认样式。该库通过保留合理默认值并修复浏览器差异（而非暴力清零），为项目提供了更稳定的样式基础，有效解决了跨浏览器兼容性问题。（字数：149）注：摘要聚焦核心问题与解决方案，省略了技术栈细节和图片引用，符合字数要求且保持信息完整。

阅读 897

22赞

深入解析 CSS `opacity` 和透明度本文详细介绍了CSS中实现透明度的两种主要方式：opacity属性和rgba()/hsla()颜色函数。opacity会影响整个元素及其子元素，适用于淡入淡出、悬停效果等场景；而rgba()/hsla()仅作用于指定颜色属性，不影响内容透明度，适合制作半透明背景或边框。文章还提及了transparent关键字、图片透明度和filter:opacity()等补充概念，帮助开发者根据需求选择合适的方法实现不同层级的透明效果，为网页设计提供更灵活的视觉表现力。

阅读 1.4k

16赞

material-components-web 与 CSS Modules 集成：避免样式冲突的最佳实践你是否曾在大型Web项目中遭遇样式冲突的噩梦？当多个团队协作开发或引入第三方组件库时，CSS类名污染导致的样式覆盖问题往往让开发者头疼不已。本文将详细介绍如何通过CSS Modules（CSS模块）与material-components-web（MCW）的无缝集成，彻底解决这一痛点，让你的UI组件样式管理变得井然有序。读完本文你将掌握：- CSS Modules的基本原理与配置方法- m...

阅读 1.1k

28赞

Fluent UI CSS-in-JS方案：makeStyles API的高级应用技巧在前端开发中，样式管理一直是困扰开发者的难题。你是否还在为CSS类名冲突、样式覆盖优先级混乱而头疼？是否在寻找一种既能保持样式封装性，又能灵活应对各种定制化需求的解决方案？本文将深入探讨Fluent UI中的CSS-in-JS方案——makeStyles API，带你掌握其高级应用技巧，轻松解决样式管理难题。读完本文，你将能够：- 理解makeStyles API的设计理念和工作原理- 掌握m

阅读 910

16赞

weixin_60474741

CSS position: sticky 详解：让元素 “粘” 在你想让它在的地方当元素未到达设定的 “粘性阈值” 时，它表现得像（相对定位），跟随文档流正常布局。当元素滚动到 “粘性阈值” 时，它会切换为类似（固定定位）的状态，“粘” 在视口的指定位置。当元素的父容器滚动出视口时，它会跟随父容器一起离开，不再保持固定。简单说，sticky元素就像 “有条件的固定”，只在父容器的范围内生效。是一个非常实用的 CSS 属性，它以简洁的方式解决了 “滚动时元素固定” 的需求，避免了用 JavaScript 监听滚动事件的复杂逻辑。兼具relative和fixed。

阅读 1.2k

11赞

小九今天不码代码

【前端高级特效】使用 CSS 实现毛玻璃模糊背景效果（含完整源码讲解）在现代网页设计中，“毛玻璃（Frosted Glass）”效果几乎是高端 UI 的标配。无论是登录弹窗、信息卡片、还是仪表盘背景，它都能带来优雅的层次感与视觉柔化效果。本篇文章将通过纯 CSS 实现毛玻璃模糊背景特效，无需任何 JavaScript，也不依赖额外库。技术点说明高斯模糊滤镜::before伪元素模糊背景的载体hsla半透明叠加玻璃质感增强防止模糊被裁切z-index层级控制确保文字清晰可见通过以上技巧，我们就能在纯 CSS 环境下实现炫酷的毛玻璃模糊背景特效。

阅读 1.3k

22赞

CSS animation 关键帧动画 CSS动画（Animation）是CSS3的强大功能，通过@keyframes定义关键帧实现元素样式过渡。核心属性包括animation-name、duration、timing-function等，可控制动画方向、循环次数和状态。建议使用transform和opacity提升性能，避免触发重排。典型应用场景包括加载动画、按钮反馈、菜单滑入、卡片入场和错误提示等，通过合理设置动画属性和延迟实现流畅效果。CSS动画语法简洁、性能优越，是现代Web开发增强用户体验的重要工具。

阅读 1.7k

3赞

Streamlit：CSS——从基础到实战美化应用 Streamlit与CSS结合打造美观数据应用：本文介绍如何通过CSS自定义Streamlit应用的样式，从基础概念到3种实现方法。1）使用st.markdown()嵌入CSS代码，可修改标题、按钮等组件样式；2）Streamlit 1.10+版本可用st.html()更简洁地添加CSS；3）复杂样式可引入外部CSS文件。文中提供完整代码示例，展示如何美化销售数据应用的标题、按钮和表格，包括品牌色设置、悬停效果和布局调整，帮助用户将功能型应用升级为美观实用的数据展示工具。

阅读 1.3k

24赞

【GitHub项目推荐--FlyonUI：语义化Tailwind CSS组件库】 FlyonUI 是由ThemeSelection开发的一个免费开源的Tailwind CSS组件库，专注于提供语义化的类名和交互式JavaScript组件。它结合了Tailwind CSS的灵活性、daisyUI的语义化类名和Preline的交互组件，为开发者提供了一套完整的UI解决方案。🔗 GitHub地址🚀 核心价值：语义化类名 · Tailwind CSS · 交互组件 · 开源免费项目背景：开发痛点：解决Tailwind CSS类名冗长和可维护性问题语义化需求。

阅读 849

29赞

蓝莓味的口香糖

【CSS】flex布局 Flex 布局摘要 Flexbox 是一种一维 CSS 布局模型，通过弹性容器和项目实现灵活的空间分配与对齐。核心特性包括：容器属性：控制排列方向（flex-direction）、换行（flex-wrap）、主轴对齐（justify-content）和交叉轴对齐（align-items）；项目属性：调整顺序（order）、伸缩比例（flex-grow/flex-shrink）及个体对齐（align-self）；简写：flex-flow（方向+换行）、flex（伸缩基准）。适用于响应式布局，简化传统难题

阅读 1.0k

12赞

树叶会结冰

BFC：CSS 世界里的隐形结界 BFC（块级格式化上下文）是CSS中的独立渲染区域，能解决布局中的常见问题。它通过创建边界感，防止外边距塌陷、清除浮动影响、阻止元素被覆盖。

阅读 998

18赞

作者推荐

黄菊华老师: 专注网站建设、软件开发、小程序开发和毕业设计辅导

关注

软件技术NINI: 五年资深网页设计与制作。鞭策自己让自己称为优秀的人，多像前辈讨教多学习，不堕落自己，不忘初心

关注

Rabbit码工: 分享个人Java学习知识点

关注

C+ 安口木: https://github.com/ytanck/ 生命不息，coding不止...

关注

宸小卿: 前端程序员

关注

@大迁世界: 我不是什么大牛，我其实想做的就是一个传播者。内容可能过于基础，但对于刚入门的人来说或许是一个窗口，一个解惑之窗。我要先坚持分享20年，大家来一起见证吧。

关注

01star️: 永远没有正确的选择，而是让选择变正确

关注

黄大新: 眼里不能只有利益，让热爱传递，知识无价，热爱也应无价，免费分享，力量微薄，点亮星光足以.

关注

哎呦你好: 持续输出前端基础知识，小伙伴关注我吧！

关注

酸奶弄鼠你: 也许是因上帝与人类都生来寂寞于是我们相遇了.

关注