Lumi_李-优快云博客

原创踩遍布局所有弯路，我整理这份Flex全套实战笔记

六种常用参数：flex-start靠左、flex-end靠右、center居中、space-between两端贴边、space-around侧边留白、space-evenly间距完全均分。本文循序渐进，从基础display盒子模型入手，逐层拆解Flex默认规则、主轴排布、交叉轴多行对齐、元素伸缩三大核心属性。5. flex-grow默认0不自动扩容，flex-shrink默认1允许压缩。3. flex-shrink：容器空间不够时，分摊压缩尺寸，默认数值1允许压缩。

2026-06-29 05:55:02 239

原创为什么你的悬浮标签乱跑？父相子绝+固定定位底层原理全拆解

本文通过三个实战案例详解CSS定位布局难题：1）综合案例演示relative+absolute+fixed组合实现卡片角标和返回顶部按钮；2）绝对定位案例展示脱离文档流特性及层级关系；3）固定定位案例演示滚动页面元素固定效果。核心知识点：相对定位提供参照（子绝父相）、绝对定位脱离文档流并向上寻找定位父级、固定定位始终参照视口。文末总结万能公式：卡片角标用"relative+absolute"，悬浮组件用fixed，并附带完整可运行代码供实践练习。

2026-06-29 05:25:47 203

原创震惊！盒子模型三大定位竟能这样玩？90%前端都忽略了！小白带你探索！

本文介绍了CSS中三种核心定位方式：1）静态定位作为默认布局基础；2）相对定位（relative）用于微调元素位置，同时为子元素提供定位参照；3）绝对定位（absolute）实现精准控制，脱离文档流但需relative父容器限制。重点解析了各定位的特性差异：relative保持原位但影响子元素，absolute需relative父级参照，fixed则直接固定于视窗。掌握这三种定位方式可轻松实现悬浮元素、固定导航等常见网页效果。

2026-05-24 22:06:38 235

原创小白带你揭秘“盒子模型”前端开发者必知的布局基石

本文详细介绍了CSS盒子模型的概念与应用。盒子模型将HTML元素视为矩形盒子，由内容区（Content）、内边距（Padding）、边框（Border）和外边距（Margin）四部分组成，通过width/height、padding、border和margin属性控制各区域尺寸。文章通过代码示例演示了如何设置不同样式（如加粗文本、下划线文本）和图片容器的边框、圆角等效果，并强调盒子模型在页面布局、元素定位和视觉层次构建中的核心作用，最后提供了完整的实操代码供读者练习。

2026-05-24 21:41:56 35

原创小白一篇文章让你彻底掌握CSS关系选择器，从此告别低效代码！

CSS四大后代选择器详解：1）后代选择器（空格）匹配所有后代元素；2）子选择器（>）仅选择直接子元素；3）相邻兄弟选择器（+）选择紧邻的下一个兄弟元素；4）通用兄弟选择器（~）匹配后续所有同级元素。这些选择器通过不同符号连接元素，实现精准的层级控制，能有效提升CSS代码的灵活性和可维护性，是前端开发必备的核心技能。

2026-05-06 09:40:58 26

原创你的CSS还停留在石器时代？2026最新技巧来了震惊！CSS还能这样玩？小白直呼太神奇

本文介绍了CSS的三种引入方式：行内样式（直接在HTML元素的style属性中编写）、内部样式（在<head>中使用<style>标签定义）和外部样式（通过<link>引用外部CSS文件）。同时讲解了三种基本选择器：标签选择器（直接使用标签名）、类选择器（.类名）和ID选择器（#ID名），并说明了它们的优先级规则：行内样式 > ID选择器 > 类选择器 > 标签选择器。对于相同优先级的样式，遵循"后来居上"原则；不同优先级时，高优先级

2026-04-29 10:17:18 192

原创 HTML FORM表单零基础入门详细教程，新手可进操作简单！！（附课堂实验源码+踩坑指南）

本文是面向初学者的HTML表单入门教程，通过学生信息登记案例讲解表单基础知识。主要内容包括：表单的作用是收集用户信息提交给服务器；所有输入框必须设置name属性；区分submit、reset、button三种按钮类型；单选/多选框的name设置规范；GET与POST方法的区别；文件上传必须添加enctype属性。文章还总结了常见错误，如使用中文name导致乱码、单选功能失效、忘记添加name属性等问题，并提供了改进后的完整代码示例。最后强调代码规范，建议使用英文name和placeholder提示文字。

2026-04-29 02:00:00 77

原创 [特殊字符]前端小白成长日记：HTML列表+表格初体验有干货！！！

这篇文章记录了学习HTML列表和表格的实践过程。作者在列表练习中解决了标签嵌套错误（如将<li>误写为<l1>）和使用type="A"实现字母序号的问题，最终完成了清晰的商城支付向导。在表格练习中，重点总结了合并单元格的三大坑：数据填入顺序错误、混淆colspan/rowspan属性、未删除被合并的<td>标签。通过反复调试，最终实现了包含合并单元格功能的完整数据表格。文章结尾提到下一步计划学习CSS美化页面，展现了持续学习的态度。全文以实践心得为主，

2026-04-14 00:31:41 52

原创 HTML我的入门试验记录：我的第一个网页

本文记录了HTML基础学习的技术分享，主要包含实验目的、环境和代码。实验目标为掌握HTML文档结构和核心标签（如<html>、<head>、<body>），以及学习使用标题、段落等基础排版标签。开发环境使用VSCode配合LiveServer插件，浏览器为Edge。文章以简洁方式呈现了HTML入门学习的技术要点和实践过程。

2026-03-23 23:26:24 46 1

ww007__的博客