直接用 flex，别碰 float；grid 更适合明确区域划分的“头条+多列”结构；卡片留白用容器 gap 而非单卡 margin；导航悬停需兼容 :focus/:active 并用 js 实现移动端下拉。
新闻门户首页多栏布局用 float 还是 flex？
直接用 flex，别碰 float。现在所有主流浏览器都支持 display: flex，而 float 用于布局早已过时——它本就不是为多栏设计的，强行用会导致清除浮动、高度塌陷、响应式断裂等问题。
常见错误现象：float 布局下右侧栏突然掉到下一行、栏目间距错乱、移动端完全不响应。
-
flex可以天然控制主轴对齐、换行、顺序、伸缩比，比如让「热点新闻」栏占 40%，「国内」「国际」各占 30% - 用
flex-wrap: wrap+min-width控制小屏自动折行，比媒体查询写三套float规则更简洁 - 避免嵌套多层
float容器，那等于给自己埋调试雷
如何用 CSS Grid 实现新闻门户的“头条+多列”结构？
Grid 更适合新闻门户这种明确区域划分的布局，尤其当你要固定「Banner 区」「左侧主新闻」「右侧侧边栏（含广告/热搜）」「底部栏目导航」时，grid-template-areas 是最直观的写法。
示例片段：
header { grid-area: header; }
.main-news { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }
.container {
display: grid;
grid-template-areas:
"header header header"
"main main sidebar"
"footer footer footer";
grid-template-columns: 1fr 1fr 300px;
gap: 16px;
}
注意点：
-
grid-template-areas中每个单词必须用引号包裹，且每行单词数要和grid-template-columns列数一致 - 不要给
grid容器设width: 100%再加margin: 0 auto——直接用max-width: 1200px+margin: 0 auto更稳妥 - IE11 不支持
grid-template-areas，如需兼容，降级方案用flex或 JS 补丁，别硬塞 Grid
新闻卡片（news-card）的 margin 和 padding 怎么设才不踩坑？
新闻卡片之间留白靠 gap（在 flex/grid 容器上），而不是每个卡片自己设 margin。否则容易出现首尾多出空白、响应式错位、hover 时边框抖动等问题。
典型错误写法：.news-card { margin: 10px; } —— 这会让第一张卡顶部、最后一张卡底部多出 10px 空隙，破坏整体节奏。
- 正确做法：容器设
display: flex; flex-wrap: wrap; gap: 12px;，卡片内部只用padding控制文字与边框距离 -
gap在 IE 中无效，若必须兼容 IE，改用margin但配合:not(:first-child)选择器，例如.news-card:not(:first-child) { margin-top: 12px; } - 卡片内图片建议设
max-width: 100%; height: auto;，避免拉伸变形；标题用line-clamp: 2截断（注意 WebKit 兼容性）
导航栏（nav）悬停效果为什么在移动端失效？
因为 :hover 在触摸设备上没有鼠标悬停概念，很多新闻站首页导航用了 a:hover { background-color: #ccc; }，结果在 iPad 或安卓手机上点不动、没反馈。
解决思路不是去掉 hover，而是补上 :focus 和 :active：
-
a:hover, a:focus, a:active { background-color: #ccc; }—— 这样键盘 Tab 导航、触屏点击、鼠标悬停全覆盖 - 移动端还要加
touch-action: manipulation;到nav a，减少 300ms 点击延迟 - 别用
transition: all .3s，只过渡需要的属性，比如transition: background-color .2s, color .2s，否则动画卡顿明显
真正容易被忽略的是：新闻门户的导航往往包含下拉菜单，而纯 CSS 下拉在移动端根本不可用——必须用 JavaScript 监听 click 切换 show 类，否则用户点不开二级栏目。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
