前端基础知识深度解析：CSS选择器权重与层叠上下文

"阿里前端基础分享-元泉" 在前端开发中，理解并掌握CSS选择器的权重与优先规则、层叠上下文（Stacking Context）、hasLayout&BFC（块格式化上下文）以及Iframe问题等核心概念是至关重要的。下面我们将详细探讨这些关键知识点。 1. **CSS选择器的权重与优先规则** CSS选择器的权重分为四个等级： - 内联样式(style="")：权值为1000 - ID选择器(#content)：权值为100 - 类(.content)、伪类(:hover)和属性选择器([name=1])：权值为10 - 类型选择器(p)、伪元素选择器(:after)：权值为1 CSS优先规则遵循以下原则： - 权重高覆盖权重低的 - 相同权重等级的后来居上（即后定义的样式覆盖先定义的） - !important声明的样式优先级最高（但应尽量少用） - 继承的样式优先级最低 2. **层叠上下文（The Stacking Context）** - 层叠上下文是元素在Z轴方向上定位的参考框架，决定了元素的前后堆叠顺序。 - 每个元素都属于一个stacking context，可以是独立的，也可以是嵌套的。 - 能够建立新层叠上下文的元素包括： - 根元素(HTML) - position属性为absolute或relative，且z-index不为auto的元素（在IE6、7中，即使z-index为auto也会创建新的层叠上下文） - opacity值小于1的元素 3. **层叠级别（Stacking Levels）** - 在同一个stacking context中，每个元素有一个stack level，决定了它在Z轴上的顺序。 - stack level值大的元素显示在上，值小的在下；相同stack level遵循后来居上的原则。 - 不同stacking context之间，元素显示顺序由父级stacking context的stack level决定，与自身stack level无关。 4. **hasLayout&BFC（块格式化上下文）** - hasLayout是IE浏览器特有的概念，某些元素在满足特定条件时会触发hasLayout，从而影响布局。 - BFC（Block Formatting Context）是W3C规范中的概念，用于确定块级元素如何布局，防止内容溢出，创建独立的布局环境。 - 触发BFC的条件包括：根元素、float元素、绝对定位元素、display值为inline-block、table-cell、flex、grid的元素等。 5. **闭合浮动（Clearing Floats）** - 浮动元素会导致父元素高度塌陷，需要通过clear属性或clearfix方法来解决。 - clear属性可以设置在子元素上，如`clear:both`，阻止元素跟随浮动元素排列。 - clearfix方法是一种无损清除浮动的方法，通过添加额外的CSS类，避免在HTML中增加额外的标签。 6. **Iframe问题** - Iframe（内联框架）常用于加载外部网页或实现页面组件的隔离。 - 需要注意的问题包括：跨域限制、加载性能、SEO优化、样式隔离等。 - 通过设置iframe的属性，如`sandbox`、`srcdoc`，可以控制iframe的安全性和内容。 了解并熟练运用这些前端基础知识，能够帮助开发者构建更稳定、高效、易于维护的Web页面。