web实验二

我第一次在浏览器里按下F12，看到自己写的代码变成一排排红色报错时，后背有点发凉。那是web实验二，要求用纯CSS实现一个响应式卡片布局。我盯着屏幕，光标在编辑器里闪烁，像一只迷路的蚂蚁。

实验内容其实不复杂——做一个三栏的图文卡片，鼠标悬停时要有轻微上浮和阴影变化，窗口宽度小于768px时自动堆叠成单列。听起来挺简单，对吧？但真正动手才发现，问题全藏在细节里。

第一个坎是flex布局的换行。我写了display:flex，又加了flex-wrap:wrap，结果卡片之间总是留着一道莫名其妙的缝隙。我检查了margin、padding，甚至怀疑是浏览器默认样式在捣鬼。折腾了二十分钟，最后发现是父容器忘了设置box-sizing:border-box——一个基础到不能再基础的点，却让整个布局歪了脖子。

这种挫败感很真实。不像课本上那些整整齐齐的示例代码，实际写的时候，浏览器会把你每个粗心都放大成视觉灾难。后来我学乖了，每写一行就保存刷新一次，用最笨的方法观察变化。

悬停效果倒是顺利。我给卡片加了transition: all 0.3s ease，再配合transform: translateY(-6px)和box-shadow的加深。鼠标移上去的瞬间，卡片像被轻轻托了一下，那种微妙的动感让人上瘾。我反复把鼠标移开又移上去，看了不下二十遍——不是为了检查代码，纯粹觉得好玩。

真正让我卡住的是响应式部分。媒体查询写@media (max-width:768px)，里面的样式确实生效了，但图片却死活不跟着缩。我明明设了img { width:100% }，可图片还是固执地保持原始尺寸，把卡片撑得变形。后来在控制台里一层层翻元素样式，才发现是父级grid布局里，图片被隐式设置了min-width:auto，导致它拒绝缩小。

解决办法也简单——给图片加个min-width: 0就行。但这类问题不亲自踩一遍，永远记不住。我甚至有点庆幸自己遇到了这个坑，因为下次再写布局时，我会本能地检查那些“看不见的默认值”。

实验报告我写得很长，但最想记下来的不是代码，而是那种从烦躁到豁然开朗的过程。网页开发这门手艺，本质上就是和浏览器的各种“小脾气”打交道。你得学会听它的反馈，而不是只顾着敲键盘。

交完实验的那天晚上，我又打开那个页面，把窗口从宽拖到窄，看着卡片从三列慢慢挤成两列，最后变成一列。它们像水一样流动，没有断裂，没有溢出。那一刻我觉得，代码不只是逻辑，它有自己的呼吸节奏。

现在再回想实验二，印象最深的不是技术点，而是那种亲手把混乱整理成秩序的感觉。每个属性都有它的脾气，每段代码都在和浏览器对话。你会犯错，会抓狂，但只要不放弃，页面总会给你一个体面的回应。