使用Flexbox布局时去除FontAwesome图标周围空白及蓝色背景的问题求助

Hey there! Let's figure out how to get rid of that blue background around your FontAwesome icon when using Flexbox. Looking at your code, I can spot a couple of issues causing this:

1. 全局通配符选择器给所有元素应用了背景色 #

你的*选择器设置了background-color: #55efc4;，这会作用于页面上的每一个元素——包括你的#usericon标签，因为你没有给它明确设置背景色。要解决这个问题：

• 给#usericon规则添加和父元素一致的背景色（这里父元素.userid是白色）：

#usericon{
  position: relative;
  align-self:auto;
  padding: 0px;
  background-color: white; /* 也可以用 transparent 让它继承父元素背景 */
}

或者，如果你不想让通配符选择器给所有元素都加背景色，可以把*规则里的background-color: #55efc4;删掉，只给需要的元素（比如body或者特定容器）设置这个背景。

2. 浏览器默认的焦点轮廓（如果蓝色是点击图标后出现的） #

有些浏览器会在元素获得焦点时（比如点击图标聚焦输入框）添加蓝色轮廓。如果这就是你看到的蓝色，可以这样调整：

• 去掉默认轮廓，但要添加自定义的焦点样式保证可访问性（不要完全去掉轮廓——这对键盘导航很重要）：

#usericon{
  /* 保留你已有的样式 */
  outline: none; /* 移除默认蓝色焦点轮廓 */
}

#usericon:focus {
  outline: 2px solid #00b894; /* 添加和主题色一致的自定义焦点样式 */
}

额外提示：解决继承困惑 #

你提到无法让子元素继承父元素的属性，问题出在通配符选择器覆盖了继承规则。如果你想让子元素继承父元素的背景色，可以把子元素的背景设置为inherit：

#usericon{
  background-color: inherit; /* 继承父元素 .userid 的白色背景 */
}

这样以后如果修改父元素的背景色，图标背景会自动匹配，不用修改多个规则。

另外提个小细节：你的.title规则里写了justify-content和align-items，但这些Flex属性只有在元素设置了display: flex时才生效——现在它是块级元素，所以这些属性不会起作用哦！

备注：内容来源于stack exchange，提问作者Nian