当前位置：首页 > news >正文

【前端】span和div都设置了text-align，为什么对span不起作用

news 2025/8/2 21:07:30

text-align它必须用在可以包含内容的块级元素上。
它影响的是子内容，而不是自己。在这里插入图片描述

我走的很慢，但是我想我不会退缩

2025-07-30这样的页面我花费了半个小时来实现
在这里插入图片描述

水平居中
margin 左右auto
text-align

position: 子绝父相
relative
absolute

空间的重复利用

在前端领域有一个重要的的内容，那就是对空间的重复利用，比如说用户的头像，当鼠标悬浮上去的时候，变成了更换头像的操作
在这里插入图片描述

在这里插入图片描述

空间的重复利用还有一个组件：tabs
在这里插入图片描述

在这里插入图片描述

https://chat.qwen.ai/s/deploy/5fc116dd-abe7-460c-8a58-a66425ceffcc

1、要逻辑清晰
2、要耐心
3、要处理复杂度

子绝父相

为什么“父相”很重要？
根据 CSS 规范：

position: absolute 的元素，会相对于最近的已定位祖先元素（即 position 为 relative、absolute、fixed 或 sticky 的祖先）进行定位。
如果没有这样的祖先，则会一直向上查找，直到或。
所以，“父相”就是人为地创建一个定位上下文（containing block），防止子元素“飞走”。

层级关系

z-index来决定
如果两个元素处在同一个位置，且没有指定z-index会怎么样呢？

在这里插入图片描述

     <div className="relative border border-gray-300 rounded-lg"><div className="absolute top-0 left-0 w-24 h-24 border border-gray-300 rounded-lg" onClick={() => {alert('222222')}}>222222</div><div className="w-24 h-24 border border-gray-300 rounded-lg" onClick={() => {alert('111111')}}>111111</div></div>