css

晓得迷路了

栗子前端技术周刊第 152 期 - Rspack 2.3、TypeScript 7.1 Beta、Bun 1.4.4...🌰栗子前端技术周刊第 152 期 (2026.10.26 - 2026.11.01)：浏览前端一周最新消息，学习国内外优秀文章，让我们保持对前端的好奇心。

CSS-box-sizing-使用指南摘要：box-sizing 是 CSS 里最"小"却最容易引发布局事故的属性之一。本文从盒模型讲起，用数据和代码对比 content-box 与 border-box 的差异，给出可直接复制的全局重置方案，并梳理 8 个实战踩坑点。读完你能回答：为什么我设了 width: 100% 还溢出？为什么全局重置要写 inherit？

前端架构师-老李

HTML与CSS基础第七课—HTML 中的a标签（跳转链接）四个 a，点开的结果各不一样。把下面存成 index.html，用浏览器打开。页面要能往下滚，第四个链接的效果才看得出来。

【每天一个CSS | Day41】开关三连：一套状态机，三种视觉翻译今天的组件，是表单里最小、最多变、也最容易被随便做的一件：开关。浏览器默认的<input type="checkbox">是一个带阴影的方框加一个对勾，放在任何设计过的界面里都很违和。所有产品都会重新做开关，但做出来的开关千篇一律：iOS 式胶囊、带文字的状态开关、带图标的多档开关。

变与不变806

css定位布局精讲定位核心作用：手动控制盒子在页面上的位置，脱离正常文档流，搭配 top / right / bottom / left 偏移属性

前端架构师-老李

HTML与CSS基础第五课—HTML的空格、换行、横线相关知识从代码中，我们可以看到，HTML针对空格、回车、换行，都有自己的一套处理方式。浏览器读正文时，会把源码里连续的空格、制表和回车收成一个普通空格。所以多按几下空格，页面上不会空出一截；多按几次回车，也不会多出一段。

CSS 布局：Flex 和 Grid 怎么选，附常见坑# CSS 布局：Flex 和 Grid 怎么选，附常见坑做前端布局时，最常纠结的问题不是“怎么写”，而是“该用 Flex 还是 Grid”。一句话先说结论：**一维布局用 Flex，二维布局用 Grid**。一维指只沿一个方向排：横着一排或竖着一列；二维指行和列都要同时控制，比如整体页面骨架、卡片墙。

本机状态监控页面html一个单文件、零依赖、零网络请求的本机状态监控页面。用纯 HTML（内联 CSS + JS）实现，双击即可在任意现代浏览器打开运行。定位是"浏览器可见指标"的实时看板，不伪造系统数据，对不支持的 API 做明确降级提示。

蓝莓味的口香糖

【VUE】【CSS】Vue移动端适配主流方案总结优先推荐：vw 方案（postcss-px-to-viewport），无 JS、现在新项目首选；老项目/兼容很低端机型选 rem + amfe-flexible；布局层面配合 flex / grid + 媒体查询，不要只靠单位缩放。

是立不是利

CSS 的 Flex 布局——为什么元素没有按我想的排列引言 Flex 布局是现代 CSS 最常用的布局方式，几乎每个页面都离不开它。但很多人用的时候是"试出来的"：改一个属性看看效果，不对再换一个。这种用法在简单场景能凑合，一旦布局复杂就容易失控。问题在于没理解 Flex 的几个核心概念。这篇文章只讲 Flex 布局，把它讲清楚。

java1234_小锋

【技术专题】CSS3 网页技术 - CSS3 盒模型大家好，我是Java1234_小锋老师，最近更新《一天学会 CSS3 视频教程(无废话版) 》专辑，感谢大家支持。

前端架构师-老李

HTML与CSS基础第四课—strong、em、b、i 各表示什么这四个标签都用在一句话里面，标出其中几个字。还用上一篇的文件外壳，body 换成下面这样，UTF-8 保存，刷新。Mac 用 Cmd + R，Windows 用 F5。

天地图实现收货地址定位本文介绍一个基于天地图API的收货地址选择页面，集成搜索、地图定位、自动逆地理编码功能。用户可通过输入地址搜索或拖动地图选择位置，系统自动识别省市区及详细地址。支持GPS定位与重新定位，表单填写后可保存收货信息，界面简洁，适配移动端，提升地址录入效率。

目前流行的前端 CSS 框架目前流行的前端 CSS 框架，‌Bootstrap 和 Tailwind CSS 是当前最主流的两大选择‌，前者偏组件化、生态成熟，后者偏原子化、定制自由。‌‌

是立不是利

CSS 的层叠与优先级——为什么我的样式不生效引言写 CSS 最让人抓狂的时刻，莫过于：明明写了样式，页面上却毫无变化。或者改了一个地方，另一个地方莫名其妙跟着变了。这背后是 CSS 的层叠和优先级机制在起作用。不理解它，你只能靠反复试错；理解了它，你就能准确预测哪条规则会赢。这篇文章只讲这一个问题。

前端架构师-老李

HTML与CSS基础第二课—初识HTML这里的「最简单」是指每一层只留必不可少的一行，但整份文件的结构是齐的。还用上一篇的 index.html，整份换成下面的内容。文件用 UTF-8 保存，Cursor 和 VS Code 右下角会标着 UTF-8。保存后刷新：Mac 用 Cmd + R，Windows 用 F5。

java1234_小锋

【技术专题】CSS3 网页技术 - CSS3 单位、颜色、字体与文本大家好，我是Java1234_小锋老师，最近更新《一天学会 CSS3 视频教程(无废话版) 》专辑，感谢大家支持。

拖拽交互体系拖拽交互是桌面端、移动端通用的核心交互模式，广泛应用于元素排序、布局调整、弹窗拖动、画布操作等业务场景。前端拖拽分为原生拖放 API 与自定义拖拽两套实现方案，分别适配不同的业务复杂度与交互需求；配合多端事件兼容、边界限制、磁吸吸附等扩展能力，可以构建出体验流畅、约束清晰的完整拖拽交互体系。

神膘护体小月半

flex 布局的 order 属性

java1234_小锋

【技术专题】CSS3 网页技术 - CSS3 优先级大家好，我是Java1234_小锋老师，最近更新《一天学会 CSS3 视频教程(无废话版) 》专辑，感谢大家支持。