前端CSS开发问题：链接蓝线、.middle尺寸、vw单位计算疑问

问题1：链接区域异常蓝色线条解决方案 #

• 根本原因是HTML代码语法错误：read-more对应的<a>标签结束符写错为</a2>，浏览器会自动补全未闭合的<a>标签，将后续.links内所有链接元素都包含在这个<a>节点下，触发默认的a标签下划线样式，和padding无关。
• 修复方式：把</a2>修改为正确的</a>，如果还有残留轮廓线，可在CSS中补充a {outline: none}即可完全移除。

问题2：.middle类尺寸计算逻辑 #

• 块级元素未显式设置宽高时，默认宽度为父元素内容宽度的100%，高度由内部所有子元素的高度总和+间距自动撑开。
• 你遇到的大小不符合预期的核心原因是：父元素.background-blur是flex布局，设置了justify-content:center和align-items:center，flex布局的子项默认不会自动拉伸占满父容器，只会自适应内容尺寸。
• 如果需要让绿色背景占满全屏，给.middle添加width: 100%; height: 100%;即可。

问题3：vw单位计算规则说明 #

• vw是全局视口宽度单位，1vw固定等于当前浏览器整个可视窗口宽度的1%，完全和父元素尺寸无关。
• 你测试时遇到相同vw值元素显示大小不一致的问题，是因为你给元素添加了transform: scale()缩放、perspective透视属性，这些变换效果是在浏览器已经用vw计算完元素的实际像素尺寸后，再做的视觉层面变形，并不会修改元素的原始计算尺寸，属于视觉效果导致的大小差，不是vw的计算逻辑问题。
• 额外注意你代码里.logo的font-size: 5vw 2vh是非法写法，浏览器会直接忽略该属性使用默认字号，也会导致你观察到的尺寸异常。

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