CSS 层叠性1. 概念层叠性(Cascading) 是 CSS 的核心特性之一,指多个样式规则应用于同一个元素时,浏览器如何决定最终呈现的样式效果。层叠性包含三个层次:样式来源的层叠 - 不同来源样式的优先级选择器的层叠 - 不同选择器的权重优先级声明顺序的层叠 - 相同优先级时,后面的覆盖前面的2. 样式来源的优先级样式按来源从高到低优先级排序:!important声明 ↓ 内联...
2026年02月23日
CSS 层叠性1. 概念层叠性(Cascading) 是 CSS 的核心特性之一,指多个样式规则应用于同一个元素时,浏览器如何决定最终呈现的样式效果。层叠性包含三个层次:样式来源的层叠 - 不同来源样式的优先级选择器的层叠 - 不同选择器的权重优先级声明顺序的层叠 - 相同优先级时,后面的覆盖前面的2. 样式来源的优先级样式按来源从高到低优先级排序:!important声明 ↓ 内联...
2026年02月23日
什么是 CSS 继承概述CSS 继承是指子元素自动继承父元素的某些样式属性。继承是 CSS 的三大特性之一(继承、层叠性、优先级)。继承的工作原理当一个元素设置样式时,如果没有明确指定,子元素会自动继承父元素的某些属性值。 .parent { font-size: 16px; color: #333; line-height: 1.6; }<d...
2026年02月23日
定位实战应用一、绝对定位实现垂直水平居中方法1: margin 负值法<style> * { margin: 0; padding: 0; } .parent { width: 300px; height: 300px; border: 1px solid #000; margin: 50px auto; ...
2026年02月23日
层叠上下文详解一、什么是"层叠上下文"1.1 基本概念层叠上下文(stacking context),是 HTML 中一个三维的概念。在 CSS2.1 规范中有明确强调,每个 CSS 盒模型都是处在一个三维空间里面他们分别处在平面的 X 轴、Y 轴以及表示层叠的 Z 轴1.2 形象理解默认情况下,HTML 元素在页面是沿 X 轴和 Y 轴平铺,所以我们察觉不到它们在 Z 轴上的层叠关系。一旦...
2026年02月23日
z-index 层叠顺序一、z-index 概述定位的元素脱离了正常文档流,他相当于漂浮在文档上面。那如果有很多个元素都用了定位,那如何确定这些元素的层叠顺序呢?z-index 就是用来指定定位元素的堆叠顺序。二、z-index 的特性在同一层叠上下文中 z-index 值的特性:✅ z-index 的默认值是 auto✅ z-index 值可以是正数,也可以是负数✅ z-index 值越大...
2026年02月23日