笔走游龙-CSDN博客

原创盒模型与BFC｜CSS布局底层渲染原理

<think>我们只需要根据内容生成摘要，≤150字。内容主要讲盒模型与BFC，解决布局问题。概括要点。</think>盒模型与BFC是CSS布局核心。盒模型决定元素尺寸计算，BFC提供独立渲染区域。常见布局问题如margin塌陷、浮动高度塌陷、元素遮挡，均源于理解不足。掌握box-sizing、BFC触发条件及三大能力（包裹浮动、阻止塌陷、避免覆盖），可系统排查问题，减少盲目调试。

2026-09-07 18:25:38 616

结合工程实战，梳理高频易错点，规避样式BUG：优先使用子代选择器替代后代选择器，防止样式全局渗透污染结构伪类计数需区分节点类型，根据业务场景选择 nth-child / nth-of-type伪类单冒号、伪元素双冒号，严格区分语法，伪元素必填 content 属性样式冲突不盲目加权重，通过优化选择器层级精准解决问题巧用 :not() 否定伪类，精简冗余样式代码，提升代码优雅度高阶选择器的核心价值，不在于实现炫酷样式，而在于解耦结构与样式、精简DOM冗余、统一页面渲染规则。

2026-09-06 10:57:35 169

原创 CSS 核心体系解析｜网页视觉渲染与布局底层逻辑

CSS（Cascading Style Sheets）层叠样式表层叠、继承、优先级，这三个特性是 CSS 运行的底层核心。结构与样式分离将网页结构（HTML）与视觉表现（样式）完全解耦，让页面维护、迭代、复用更加高效，这也是现代前端工程化的基础。层叠性：多个样式同时作用于同一元素，自动叠加生效继承性：文本类样式自动向下继承子元素，简化代码冗余优先级：冲突样式按照权重规则择优生效，避免样式混乱真正的 CSS 开发，不是“调样式”，而是掌控渲染规则、把控布局结构、优化视觉体验、兼顾兼容性与性能。

2026-09-05 09:24:41 631

原创 JavaScript 对象零基础详解｜属性、方法、遍历、增删改查

对象是一组键值对（key: value）的集合，用来描述一个具体事物。属性：事物的特征（名词：名字、年龄、性别）方法：事物的行为（动词：说话、跑步）数组是一堆数据，对象是一个完整的人/物品/数据模型。适合批量生成多个结构相同的对象。} // 实例化多个对象 let s1 = new Student("张三", 19);let s2 = new Student("李四", 21);对象以键值对存储数据，描述一个完整事物包含：属性（特征）、方法（行为）字面量{}是开发首选创建方式. 静态取值。

2026-09-01 21:43:12 200

原创 JavaScript 作用域与预解析详解｜变量提升、就近原则、暂时性死区

作用域：变量的合法访问范围变量在哪能⽤、在哪不能⽤，由作⽤域决定。JS 一共有三种作用域：全局作用域函数作用域块级作用域（ES6 新增）作用域控制变量访问范围：全局、函数、块级let/const 有块级作用域，var 没有变量查找遵循就近原则var 存在变量提升，容易出 buglet/const 存在暂时性死区，更严谨、安全函数声明提升、函数表达式不提升作用域和预解析是 JS 逻辑底层基石，学懂它，你就能看懂 90% 的 JS 诡异报错！

2026-08-31 08:19:08 199

原创 JavaScript 函数零基础详解｜定义、调用、参数、返回值、作用域

一组有序的数据集合，可以一次性存储多个数据。特点：可以存放任意类型数据：数字、字符串、布尔、对象数据有序排列，每个数据都有自己的下标（索引）数组长度可以动态变化数组是存放批量数据的容器通过下标取值，通过length获取长度搭配for循环实现批量遍历数据掌控数组增删数组是前端数据渲染、接口数据处理的核心基础，必须熟练掌握！

2026-08-28 19:07:47 160

原创 JavaScript 数组零基础详解｜创建、取值、遍历、常用方法大全

一组有序的数据集合，可以一次性存储多个数据。特点：可以存放任意类型数据：数字、字符串、布尔、对象数据有序排列，每个数据都有自己的下标（索引）数组长度可以动态变化数组是存放批量数据的容器通过下标取值，通过length获取长度搭配for循环实现批量遍历数据掌控数组增删数组是前端数据渲染、接口数据处理的核心基础，必须熟练掌握！

2026-08-27 20:51:49 183

原创 JavaScript 循环语句全解｜for、while、do-while 零基础精讲

让一段代码重复执行，满足条件就继续，不满足就停止。生活场景：跑圈：跑 1–10 圈，跑完停止打卡：重复输出 10 次“Hello”遍历商品：逐个读取所有商品数据for 循环：已知循环次数，遍历数组、批量渲染（首选）while 循环：未知循环次数，满足条件才循环do-while：需要代码至少执行一次的场景分支 + 循环 = JS 基础逻辑天花板掌握判断和循环，你已经可以写出完整的业务逻辑代码，后续的数组遍历、算法、页面渲染全部基于这两个知识点！

2026-08-26 08:51:24 750

原创 JavaScript 分支语句详解｜if / else / 三元 / switch 零基础全覆盖

满足条件就执行，不满足就不执行 / 执行其他代码。生活逻辑：如果分数≥60 → 及格否则 → 不及格true（真） / false（假）if / else：区间判断、范围判断（最多、最常用）else if：多区间分级判断三元表达式：简单二选一简写switch：固定值精准匹配分支语句是 JS 逻辑思维的基石，所有的表单判断、权限判断、状态切换、交互效果底层全部都是 if / switch。掌握本篇，你已经具备写逻辑代码的基础能力！

2026-08-25 20:58:53 188

原创 JavaScript 运算符全套详解｜零基础入门必看

1.算术运算符：做数学计算2.赋值运算符：更新变量3.比较运算符：返回真假，用于判断4.逻辑运算符：多条件组合判断熟练掌握这四类运算符，就能搞定 JS 80% 的基础逻辑代码！

2026-08-22 19:48:51 604 1

原创前端基础精讲｜JavaScript三大核心组成全面解析

ECMAScript：写逻辑、写算法、写代码规则（语言本身）DOM：操作网页标签、改内容改样式（管页面）BOM：操作浏览器窗口、弹窗、跳转、定时器（管浏览器）

2026-08-21 20:53:37 263

原创 JavaScript 的三大组成部分

1. ECMAScript (ES) —— JS 核心语法。ES6+ 新语法（let、const、箭头函数等）全称：Document Object Model。全称：Browser Object Model。负责 JavaScript 的基础规则。用来操作网页上 HTML 标签元素。简单理解：JS 语言本身的语法。ECMAScript：语言核心。3. BOM 浏览器对象模型。2. DOM 文档对象模型。简单理解：JS 操控浏览器。简单理解：JS 操控网页。弹窗 alert ()BOM：管浏览器窗口。

2026-08-20 19:57:59 316

原创 JavaScript 变量声明关键字

3. const（常量，值不允许修改，推荐优先用）如果 const 存的是对象、数组，里面内容可以改。缺点：容易污染变量，出现意想不到的 bug。2. let（声明可变变量，推荐）需要后期改变值的时候，用 let。存在变量提升，可以先使用再声明。没有变量提升，必须先声明后使用。1. var（旧版，不推荐）块级作用域（{ }里面生效）2.可以重复声明同一个变量。尽量不要再使用 var。

2026-08-19 11:11:19 586

原创 CSS 进阶探秘｜实用属性与开发避坑手记（续）

熟练掌握阴影、圆角、变形、文字省略、居中、隐藏方式，就能写出专业级网页样式。文字居中：text-align + line-height。解决：父盒子加边框、内边距、overflow:hidden。绝对定位居中：top、left + transform。图片铺满盒子，自动裁剪多余部分（最常用海报、轮播图）必备三要素：固定宽度、禁止换行、超出隐藏、文字省略。任意元素居中：flex 居中（最简单）19. 常见 CSSBUG 与解决方案。整体透明：文字、背景、子元素全部透明。多行文字省略（移动端、卡片必备）

2026-08-13 21:02:06 147

原创 CSS 进阶探秘｜实用属性与开发避坑手记

inline‑block：行内块，可以并排摆放同时设置宽高，缺点默认存在间隙。text‑overflow 文字超出省略号，搭配固定宽度、禁止换行使用。opacity：透明度，0 透明～1 完全可见，连带内部文字一同透明。outline：外边框，不会挤占盒子大小，多用于输入框选中效果。translate (X,Y)：元素平移，不会影响周边盒子。border‑radius：圆角，50% 即可做成圆形。:nth‑of‑type () 指定同类标签筛选。box‑shadow：盒子阴影，制作卡片立体感。

2026-08-12 20:45:41 898

原创 CSS 高阶技能实操笔记

口诀：行内＞id＞类＞标签；使用绝对定位时，千万不要忘记父容器设置 relative。transition：属性 + 耗时，实现样式平滑切换。float:left /right，让元素横向并排。:nth‑child () 按照子元素序号挑选。伪元素忘记 content，样式不会显示。::before 在元素前面添加内容。伪元素必须写上 content 属性。父类使用伪元素清除浮动（工作最常用）2. 常用伪元素（生成新文字内容）::after 在元素后面添加内容。行内样式优先级太高，日常尽量少写。

2026-08-11 21:02:03 168

原创前端 CSS 进阶知识库

absolute 绝对定位，父辈容器必须设置 relative 相对定位。参数：left 向左浮动、right 向右浮动、none 关闭浮动。行内元素无法设置宽高，转为 inline‑block 即可。transition: 全部属性过渡耗时;垂直方向外边距 margin 会出现折叠现象。::before 在元素前方新增内容。末尾空标签添加 clear:both。::after 在元素后方新增内容。:visited 浏览过后的链接。:active 鼠标按压瞬间。:hover 鼠标悬浮状态。

2026-08-10 21:02:51 213

原创 CSS 选择器分类

通配符 < 标签 < class < id < 行内样式 <!float 浮动：用来横向排列盒子，浮动之后脱离文档流，需要清除浮动。外部样式：link 引入 css 文件，项目标准写法。类选择器：class，最常用，可多个标签共用。通配符选择器*：选中全部元素，用来初始化边距。容器属性：主轴方向、换行、主轴对齐、侧轴对齐。id 选择器：id 页面唯一，一般不给样式。子代选择器：父 > 子，只选直接一级孩子。并集选择器：逗号隔开，多个元素共用样式。后代选择器：父子，选中里面所有后代。

2026-08-07 21:34:15 440

原创 CSS 基础学习笔记

/行内‑块，并排，可以设置宽高。//行内，并排，不能设置宽高。background-image:url("图片地址");/*外边距，和别的盒子距离*/padding:10px;/*内边距，内容和边框距离*/display:none;

2026-08-06 21:34:34 150

原创 HTML 标签分类与属性

class：归类标签，搭配 CSS 使用，可以多个元素共用。<img src="图片地址" alt="图片说明">常用标签：div、h1~h6、p、ul、ol、hr。title：鼠标悬浮在元素上时，弹出提示文字。特点：多个标签在同一行显示，无法设置宽高。特点：独占一行，可以设置宽度和高度。特点：同一行摆放，同时支持设置宽高。常用标签：span、a、b、em。行内元素：并排摆放，不能设置宽高。格式：标签属性 ="属性值"行内块元素：并排摆放，支持宽高。常用标签：img、input。

2026-08-05 20:51:15 907

原创 CSS 学习博客：CSS 定位 position 属性

不脱离文档流✅ relative 当作父容器，配合 absolute 使用（最经典布局组合）✅ z-index 只对定位元素生效，控制层级上下✅ absolute、fixed 脱离标准文档流

2026-08-03 20:35:21 146

原创 CSS 布局进阶：Flex 弹性布局实操指南

Flex 布局（弹性布局）是 CSS 中最常用的布局方式之一，相比传统的浮动布局，它更简洁、灵活，能轻松实现元素的水平/垂直居中、均匀分布、自适应排列等需求。Flex 布局是前端布局的核心技能，掌握容器与项目的常用属性，就能快速实现大部分页面布局需求，相比传统浮动布局更易维护。：设置项目的放大比例，默认值为0（不放大），若设置为1，会自动占据容器剩余空间，多个项目设置不同值可按比例分配空间。：设置项目的缩小比例，默认值为1（空间不足时自动缩小），设置为0则不会缩小，适合固定尺寸的项目。

2026-08-02 02:09:12 145

原创 CSS 基础实操：从选择器到盒子模型

本次重点掌握了常用选择器的用法和优先级，以及盒子模型的核心组成，这是 CSS 布局的基础。注意：默认情况下，盒子的 width 和 height 仅指内容区大小，若想让宽高包含内边距和边框，可设置。选择器是 CSS 的核心，只有选对元素，才能精准应用样式。：元素的实际内容，通过 width 和 height 设置大小，是盒子的核心部分。：以点号开头，可重复使用，适合给多个元素设置相同样式，如。：盒子与其他元素之间的距离，用于控制元素间的间距，如。：盒子的边界，可设置宽度、样式和颜色，如。

2026-07-30 08:29:07 159

原创 CSS基础入门学习

CSS 全称层叠样式表（Cascading Style Sheets），是用于美化网页的样式语言。如果把 HTML 比作网页的“骨架”，那么 CSS 就是网页的“皮肤与妆容”，专门负责页面的颜色、字体、大小、边距、布局等视觉效果。HTML 负责搭建网页结构，CSS 负责美化页面，二者相辅相成。学习 CSS 的核心就是学会精准选择标签熟练使用样式属性。后续继续学习盒子模型、浮动和布局，就可以制作出完整、美观的网页页面。

2026-07-22 08:49:34 228

原创混合行内 + 内部 CSS，个人学习随笔

外部CSS文件3. 类选择器使用 . 开头，id选择器用 # 开头2. 中文网页必须设置utf-8编码，否则文字乱码练习盒子模型margin、padding</li><li>学习id选择器、通配符选择器</li><li>修改文字颜色、字号、行间距</li><li>设置页面背景颜色、块背景</li><li>写外部CSS文件分离样式

2026-07-20 19:53:38 154

原创内部 CSS：CSS 基础概念讲解

MDN CSS官方教程外部样式表：单独.css文件，link引入，多页面共用（推荐）</li><li>行内样式：直接给标签添加style属性，仅作用当前标签</li><li>内部样式表：head中写style标签，当前页面生效

2026-07-20 19:52:05 208

原创 HTML进阶：理解语义化标签与viewport移动端适配

除了布局适配，HTML还自带表单原生能力：checked复选框选中状态、input输入框、button按钮，搭配label关联表单控件，提升表单的操作体验。这段代码用来控制手机浏览器的视口宽度，让页面宽度自动等于设备屏幕宽度，禁止默认缩放，避免网页在移动端出现横向滚动条、页面被缩小的问题，是所有移动端网页的标配代码。在熟练掌握基础HTML标签之后，我们需要进阶学习HTML5带来的新特性，其中语义化标签和移动端viewport适配，是项目开发里必不可少的内容。

2026-07-17 20:48:10 159

原创【无标题】从0开始认识HTML：网页世界的骨架语言

我们日常看到的标题、段落、图片、链接、表单，都是由一个个HTML标签构成的。作为前端开发的第一道门槛，HTML是搭建所有网页的基础结构，不管是官网、小程序页面，还是后台管理系统，都离不开HTML搭建的骨架。很多初学者一开始会混淆HTML、CSS、JavaScript三者的作用，简单来说：HTML负责结构，CSS负责样式美化，JS负责交互逻辑。当你可以熟练写出完整的HTML结构后，就相当于搭好了房子的墙体框架，后续再用CSS填充颜色、边距、布局样式，用JS实现点击、弹窗、数据请求等交互效果。

2026-07-17 20:45:13 330

2603_96589662的博客