这次在重构博客的时候，把Uno CSS的框架改成了Tailwind CSS，然后发现在组件的样式不对的。

一开始是图标和文本不在同一行上了。

原先还以为是自己重构后的组件样式有问题，把原先的样式拷贝过来后，依旧如此，后面把Tailwind CSS去除了才发现正常了。

Chatgpt一下说是提供了一套“预设的基础样式（preflight）”，基于Normalize.css 做了调整，以确保不同浏览器的默认样式更一致，同时移除一些不必要的默认样式。

所以针对他改动了

      
css
      
复制代码
    
display: block;
vertical-align: middle;
max-width: 100%;
height: auto;

把原先的inline改成block，新增了max-width，这也太坑了。

后面我手动把block改回inline，他们总算在一行上了。

但是我发现a标签撑不满div了！！！

我也是醉了，TailWind CSS为了确保不同浏览器的默认样式更一致，同时移除一些不必要的默认样式。“真是好心办坏事”（新手不懂哈）。

chatgpt解释为什么要加 max-width: 100%

1. 防止图片撑破父容器

   • 在原生浏览器行为下，<img> 默认按图片本身尺寸渲染。

   • 如果父容器宽度小于图片宽度，图片就会溢出容器。

   • max-width: 100% 可以让图片最大宽度不超过父容器宽度，从而保证布局不会被撑坏。

2. 响应式布局友好

   • 在不同屏幕或父容器宽度变化时，图片会自动缩放。

   • 避免在小屏幕上图片撑出边界。

3. 配合 Tailwind 样式体系

   • Tailwind 的大部分布局类都是基于 flex / grid / container width。

   • 如果图片超出容器，flex 布局可能失效或者造成滚动条。

   • max-width: 100% 可以保证图片在 flex/grid 中可控。

但是在这边确实就是影响效果了。哎，只能说每一次重构都是坑啊。吸取教训，再此记录一下，折腾2个小时。