为何5个20%宽度的HTML按钮无法同行显示？及CSS迁移问题

核心原因 #

1. 盒模型默认行为：浏览器默认使用content-box盒模型，此时你设置的width:20%仅计算按钮的内容区域宽度，如果按钮带有padding或border，这些都会额外占用空间，5个按钮的总宽度（内容+内边距+边框）会超过父容器的100%，导致第5个被挤到下一行。
2. inline-block空白间距：如果按钮用display:inline-block实现横向排列，HTML代码中按钮之间的换行、空格会被解析为空白字符，这些字符会占用额外宽度，叠加后总宽度超出父容器。

修复方案 #

• 切换盒模型：给按钮（或全局元素）设置box-sizing:border-box，让width属性包含内容、内边距和边框的总宽度，这样20%的宽度就是元素的实际占用宽度：

button {
  box-sizing: border-box;
  width: 20%;
}

• 消除空白间距：可以删除HTML中按钮之间的空格/换行，或者给按钮的父容器设置font-size:0，再给按钮单独设置font-size（比如16px），就能去掉空白字符的宽度。

常见失效原因 #

• 路径错误：<link>标签的href属性指向的路径不对，浏览器找不到style.css文件，比如文件在css子文件夹里，却写了href="style.css"。
• 标签位置错误：<link>放在了<body>底部，页面先渲染无样式的HTML，再加载CSS，可能导致布局错乱，甚至某些动态DOM无法应用样式。
• 选择器或代码遗漏：迁移时不小心修改了选择器，或者漏掉了部分CSS代码，导致样式不匹配。
• 浏览器缓存：旧的CSS文件被缓存，新修改的样式没加载。

解决方法与规范 #

• 校验路径：打开浏览器开发者工具（F12）的Network面板，刷新页面查看style.css的请求状态，404说明路径错误，调整href：
  • 同目录：href="style.css"
  • css子目录：href="./css/style.css"
• 规范<link>位置：把<link>放在<head>标签内，确保CSS在页面渲染前加载：

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

• 核对代码：对比原<style>标签内的代码，确保外部CSS文件里的选择器、属性完全一致，无遗漏。
• 清除缓存：按Ctrl+F5（Windows）或Cmd+Shift+R（Mac）强制刷新，清除浏览器缓存。
• 基础规则：外部CSS文件不需要<style>标签，语法和内嵌CSS完全一致；必须通过<link rel="stylesheet" href="路径">引入，优先使用相对路径。

内容的提问来源于stack exchange，提问作者WestPole