CSS Flexbox布局中创建的info-box盒子不显示问题咨询

安全阿岳

2026-9-2

.info-box 盒子无法正常显示的排查与修复

首要问题：CSS边框属性语法错误

这是导致盒子看不见的核心原因，你当前写的边框规则：

border-color: 5px solid blue;

是完全无效的。border-color 这个属性只能接收颜色值，5px solid blue 是border简写属性的参数，你写错了属性名，导致整条边框声明被浏览器直接丢弃。
如果你的页面背景本身就是白色，.info-box设置了白色背景、又没有生效的边框，自然和页面背景融为一体，看起来像根本没渲染。
把这行修正为正确的简写写法即可：

.info-box {
    width: 70px;
    height: 70px;
    border-radius: 7px;
    margin: 10px;
    border: 5px solid blue; /* 替换原来错误的border-color行 */
    background-color: white;
}

其他排查项

如果修正语法后还是不显示，按以下顺序排查：

打开浏览器开发者工具（按F12唤起），用元素选择器选中页面上的.info-box节点，查看「计算样式」面板：
- 如果宽高显示为0，说明你写的宽高规则被其他优先级更高的CSS覆盖了
- 如果边框规则显示为无效值，说明还有其他语法错误或者选择器优先级问题
检查父元素样式：确认ul.service-info、li、.second-section这些父节点没有设置display: none、visibility: hidden、opacity:0这类隐藏属性，也没有设置过小尺寸加overflow: hidden把盒子裁掉。浏览器默认给ul加的左侧内边距、li的列表圆点如果干扰布局，可以手动清除：
```
ul.service-info {
    list-style: none;
    padding: 0;
    margin: 0;
}
```
检查显示属性：确保.info-box没有被设置为display: inline，行内元素不支持固定宽高，会导致盒子塌陷，保持默认的块级显示即可。