绝对定位

使用::before和::after伪元素可创建装饰性小图标，无需额外HTML标签。通过设置content、position、background、border和transform等属性，实现圆点、对勾、警告等视觉效果，常用于状态提示。关键步骤包括：父元素设position: relative，伪元…

text-align 能控制文本及行内元素对齐，通过设置 left、center、right 或 justify 实现内容对齐，适用于段落、标题及 inline-block 元素整体居中，常用于按钮组或图标对齐，在无 Flex 时代配合 display: inline-block 实现水平居中，但仅…

使用CSS实现页脚固定有三种方法：1. fixed定位使页脚始终在视口底部，但需避免遮挡内容；2. absolute定位配合父容器min-height实现粘性页脚，适合内容较少时保持页脚在页面底端；3. Flexbox布局通过flex:1让主体占剩余空间，推荐用于现代浏览器，结构清晰且自适应。 要让…

答案：使用 position: sticky 可实现广告元素在滚动时固定于视口特定位置的效果，需设置 bottom、top 等偏移量，结合父容器布局控制位置，适用于内容区域中阶段性固定的场景。 在CSS中，使用 position: sticky 可以轻松实现浮动广告效果，让广告元素在页面滚动时固定在…

使用Flexbox实现等高响应式列需设置父容器display: flex；子项自动等高，通过flex-wrap: wrap和min-width实现响应式换行，结合flex属性控制宽比，避免使用float或绝对定位。 在CSS中使用Flexbox实现等高响应式列非常简单，只需要合理设置容器的displ…

相对定位通过position: relative使元素相对于原位置偏移且保留原有空间，利用top、left等属性调整位置，常用于微调布局、作为绝对定位的包含块或配合z-index控制层级。 相对定位（relative positioning）在CSS中用于相对于元素原本的位置进行偏移，同时保留其在文…

Flex容器中absolute子元素脱离flex流但可精确定位，需设置relative提供定位上下文；2. Absolute元素自身可作flex容器，用于悬浮面板等场景；3. 注意absolute不参与flex布局、避免空间冲突并确保定位上下文存在，合理结合可提升布局灵活性。 在现代网页布局中，ab…

text-align作用于块级容器，控制其内部行内内容的水平对齐，包括文本、inline元素、inline-block元素和图片；例如父元素设置text-align:center时，子元素span和img会整体居中对齐；但该属性不适用于浮动、绝对定位或Flex/Grid布局中的子元素。 在CSS布局…

使用CSS transition结合transform和perspective可实现卡片翻转与堆叠动画。1. 卡片翻转通过rotateY、preserve-3d和backface-visibility实现3D翻转效果；2. 堆叠动画利用transition-delay与transform偏移创建扇形…

定位在卡片布局中至关重要，通过 position 属性精确控制元素位置。1. relative 为子元素提供定位基准，用于微调内部结构且不破坏文档流；2. absolute 使标签、图标等脱离文档流，精准定位在角落并叠加于内容之上，常配合 z-index 控制层级；3. fixed 将操作按钮固定于…