CSS

一、为什么需要响应式设计？1.1 一个页面，千种屏幕打开你的博客，分别在以下设备上查看： 设备 典型宽度 使用场景 手机（竖屏） 375px 地铁上刷文章 手机（横屏） 812px 看视频、看代码 平板 768px - 1024px 沙发上阅读 笔记本 1366px - 1440px 日常办公 台式显示器 1920px+ 多窗口并行 超宽屏 2560px+ 专业工作站 截至 2025 年，全球超过 55% 的 Web 流量来自移动设备。如果一个网站只在桌面端好看，等于放弃了超过一半的用户。 1.2 两种策略：自适应 vs 响应式在响应式设计成为主流之前，存在两种思路： 策略 做法 缺点 自适应（Adaptive） 为手机和桌面各写一套页面（如 m.example.com） 维护两套代码，成本翻倍 响应式（Responsive） 一套 HTML/CSS，根据屏幕尺寸自动调整布局 需要对 CSS 有更深入的理解 响应式设计是 Ethan Marcotte 在 2010...

一、从"痛苦的浮动"到"丝滑的弹性"1.1 回到那个用 float 布局的年代在 Flexbox 诞生之前，CSS 布局主要依赖 float 和 position。这些属性最初并非为复杂布局设计——float 的本意是让文字环绕图片。 但前端开发者硬是用它们做出了多栏布局、导航栏、卡片网格……代价是各种 hack 技巧： 123456789101112131415161718/* 旧时代的"圣杯布局"——每个前端都经历过 */.left { float: left; width: 200px;}.right { float: right; width: 200px;}.main { margin: 0 200px; /* 避开左右浮动元素 */}/* 还得写 clearfix 清除浮动…… */.clearfix::after { content: ""; display: table;...

一、CSS 是什么：网页的"视觉设计师"在系列第一篇文章中我们建立了这个类比： 技术 角色 HTML 结构骨架——定义"是什么" CSS 视觉表现——定义"长什么样" JavaScript 交互行为——定义"能做什么" CSS（Cascading Style Sheets，层叠样式表）的职责就是把浏览器默认的"素颜"HTML 变成你想要的任何视觉效果。 先看一个直观对比——同样一份 HTML，不加 CSS 和加了 CSS 的差异： 1234<!-- 没有 CSS：浏览器默认样式——黑白分明，毫无美感 --><h1>我的博客首页</h1><p>欢迎来到我的技术博客。</p><a href="#">阅读更多</a> 1234<!-- 有了 CSS：字体、颜色、间距、背景——焕然一新 --><h1...