1. CSS 有哪些基本选择器？它们的权重是如何表示的？
这是一个关于 CSS 基础且极其重要的问题，因为它直接关系到我们如何精准地控制页面元素的样式，以及在样式冲突时浏览器如何决定哪个样式生效。理解 CSS 选择器及其权重（或称为“优先级”或“特殊性”），是编写高效、可维护 CSS 代码的关键。
CSS 的权重，也称为特殊性或优先级，是浏览器用来决定当多个 CSS 规则应用于同一个元素时，哪个规则的样式最终会生效的机制。它的核心原则是：“越具体的规则，优先级越高”。
权重通常被抽象地表示为四个数字的组合，例如 0.0.0.0，这四个数字从左到右代表不同的权重层级，并且是不可进位的，即 0.0.0.10 永远小于 0.0.1.0。
这四个等级的表示方式如下：
第一个等级 (千位 -
a级别)：内联样式 (Inline Styles)表示：
1.0.0.0说明： 直接写在 HTML 元素的
style属性中的样式。由于它们紧密地绑定在元素本身，所以具有非常高的优先级。示例： `<p style="color: blue;">特殊或临时的需求。
第二个等级 (百位 -
b级别)：ID 选择器表示：
0.1.0.0(每个 ID 选择器贡献 100 分)说明： 具有最高选择器级别的优先级。一个页面中，ID 是唯一的，因此通过 ID 选择器定位到的元素通常是非常精确的。
示例：
#my-unique-element { font-size: 20px; }
第三个等级 (十位 -
c级别)：类选择器、属性选择器、伪类选择器表示：
0.0.1.0(每个这类选择器贡献 10 分)说明： 这三种选择器在权重上是相同的。
类选择器：
.my-class { ... }属性选择器：
[data-type="button"] { ... }伪类选择器：
:hover { ... },:nth-child(2) { ... }
第四个等级 (个位 -
d级别)：元素选择器、伪元素选择器表示：
0.0.0.1(每个这类选择器贡献 1 分)说明： 这是最低级别的选择器权重，通常用于设置元素的默认样式。
元素选择器：
p { ... },div { ... }伪元素选择器：
::before { ... },::first-letter { ... }
权重计算的组合规则：
当我们将多个选择器组合使用时，它们的权重会累加。例如：
#header .nav a:hover：ID 选择器
#header：0.1.0.0类选择器
.nav：0.0.1.0元素选择器
a：0.0.0.1伪类选择器
:hover：0.0.1.0总权重：
0.1.2.1(注意，是各个位数相加，而不是简单的数字累加，即 100 + 10 + 1 + 10 = 121 分，但表示为0.1.2.1)
特殊情况：!important 关键字
!important关键字： 这是一个非常强大的声明，它会覆盖任何常规的权重计算结果。一旦某个样式声明后带有!important，它的优先级就会变得非常高。!important并非选择器，而是针对单个 CSS 声明设置的。它的优先级是最高的，甚至高于内联样式。
注意： 尽管
!important具有最高优先级，但它不推荐滥用。因为它会破坏 CSS 的层叠性，使得调试和样式覆盖变得非常困难，降低代码的可维护性。在大型项目中，应尽量避免使用!important，除非在极少数情况下（如覆盖第三方库样式、或某些特殊且不希望被其他样式影响的固定样式）作为最后的手段。如果多个
!important声明发生冲突，那么仍然会回溯到标准的权重规则来决定哪个生效。例如，ID 选择器中的!important会优先于类选择器中的!important。
当权重相同时：
如果两个或多个规则的权重完全相同，那么后定义的规则将覆盖先定义的规则。这被称为“源顺序”或“层叠规则”。即，在 CSS 文件中或在 HTML 中，哪个规则在后面，哪个就生效。
总结：
掌握 CSS 选择器及其权重机制，对于前端开发者来说至关重要。它能帮助我们：
精确控制样式： 确保我们想要应用给特定元素的样式能够正确生效。
避免样式冲突： 预测并解决多个规则之间的冲突，减少不必要的调试时间。
编写可维护代码： 通过合理利用选择器和权重，编写出结构清晰、易于理解和修改的 CSS 代码。
优化性能： 过于复杂的选择器链可能会稍微影响浏览器渲染性能，理解权重可以帮助我们选择更高效的匹配方式。
因此，在编写 CSS 时，我们应该有意识地去思考每个选择器的权重，尽量使用最小特异性的选择器来满足需求，避免过度使用 ID 选择器或 !important。
2. CSS 的引入方式有哪些？link 和 @import 的区别是什么？
理解 CSS 的引入方式是前端开发的基础，这直接影响到页面的加载性能、样式管理和开发效率。同时，掌握 link 和 @import 这两种外部引入方式的差异，是前端优化和解决兼容性问题的关键。
首先，CSS 主要有三种引入方式，每种方式都有其特定的使用场景和优缺点：
行内式 (Inline Styles)：
定义： 将 CSS 样式直接写在 HTML 元素的
style属性中。示例：
<p style="color: blue; font-size: 16px;">这是一段蓝色文字。</p>特点：
优先级高： 它的权重最高，通常用于覆盖其他样式或处理特定元素的特殊需求。
局限性： 样式只对当前元素生效，无法复用；代码耦合度高，不符合结构与样式分离的原则；难以维护，不推荐在实际项目中大量使用。
适用场景： 通常用于动态生成样式（如 JavaScript 操作 DOM 改变样式）、快速调试或非常特定的、一次性的样式调整。
内嵌式 (Internal/Embedded Styles)：
定义： 将 CSS 样式写在 HTML 文档头部
<head>标签内的<style>元素中。示例：
<head> <style> h1 { color: green; } .container { width: 960px; margin: 0 auto; } </style> </head>特点：
作用范围： 样式只对当前 HTML 文档生效。
方便性： 适用于样式较少或仅对当前页面有效的场景，不需要额外创建 CSS 文件。
可维护性： 相较于行内式，更好地实现了结构与样式分离，但不如外链式便于管理。
加载： 页面加载时即解析
<style>标签内的样式。
外链式 (External Stylesheet)：
定义： 将 CSS 样式写在独立的
.css文件中，并通过 HTML 文档的<link>标签或 CSS 规则的@import语句引入。这是最推荐和常用的方式。示例 (使用
link标签)：<head> <link rel="stylesheet" href="styles.css"> </head>示例 (使用
@import规则)：/* 在另一个 CSS 文件中或 <style> 标签内 */ @import url("another-styles.css");或在 HTML 的
<style>标签内：<head> <style> @import url("styles.css"); </style> </head>特点：
最佳实践： 实现了结构、样式、行为的彻底分离，提高了代码的可读性、可维护性和复用性。
缓存： 独立的 CSS 文件可以被浏览器缓存，提高二次加载速度。
多页复用： 多个 HTML 页面可以引用同一个 CSS 文件。
现在，我们来详细对比外链式引入的两种主要方式：link 标签和 @import 规则的区别。尽管它们都能实现外部样式引入，但在功能、性能、兼容性和使用方式上存在显著差异。
link 和 @import 的区别：
加载资源的限制 (作用范围)：
link： 这是一个 HTML 标签，不仅仅用于加载 CSS。它可以加载多种类型的外部资源，并通过rel属性指定资源与文档的关系。例如：rel="stylesheet"用于加载 CSS 样式表。rel="icon"用于加载网站图标 (favicon)。rel="prefetch"或rel="preload"用于预加载资源。rel="alternate"用于指定文档的替代版本（如 RSS 源）。
因此，link的职责更广，是 HTML 头部用于建立文档与外部资源之间关系的标准方式。
@import： 这是一个 CSS 规则，它只能用于导入 CSS 文件。它可以在<style>标签内部使用，也可以在一个 CSS 文件内部导入另一个 CSS 文件。它的核心功能是让一个 CSS 文件可以组合或拆分其他 CSS 文件。
加载方式 (加载时机与性能影响)：
link： 当浏览器解析到<link>标签时，它会立即发起对 CSS 文件的请求。这意味着 CSS 文件会与 HTML 文件同时并行下载，并且通常会阻塞页面的渲染，直到 CSS 文件下载并解析完毕。这样设计是为了确保页面在加载时就能应用样式，避免出现“无样式内容闪烁”(FOUC - Flash Of Unstyled Content)。因此，link引入的 CSS 是同步加载的。@import：@import规则的加载行为有所不同。它会在 HTML 文档完全载入并解析之后才开始下载被导入的 CSS 文件。这意味着被@import导入的 CSS 文件是异步加载的。这可能导致一个问题：在 CSS 文件加载完成之前，页面可能会以无样式或不完整的样式显示，造成 FOUC。另外，如果链式@import（一个 CSS 文件导入另一个，再导入另一个），则会增加请求的瀑布流，可能影响性能。
兼容性：
link： 作为 HTML 标签，link在所有支持 HTML 的浏览器中都完全兼容，没有版本限制问题。它从 HTML 早期版本就存在。@import：@import规则是在 CSS 2.1 规范中引入的。因此，它不被一些非常老旧的浏览器（如 IE 5 及更早版本）支持。虽然现在主流浏览器都支持@import，但在考虑极端兼容性时，这仍是一个需要注意的点。
可操作性 (使用 JavaScript 改变样式)：
link：<link>是一个 DOM 元素。这意味着它可以通过 JavaScript 的 DOM API 进行操作。你可以通过document.createElement('link')创建新的<link>元素，或者通过document.querySelector('link')获取已有的<link>元素，然后修改其href属性来动态改变引入的 CSS 文件，甚至直接移除<link>元素来取消样式。这为动态主题切换、按需加载样式等高级功能提供了可能。@import：@import是一个 CSS 规则，它不是 DOM 元素。因此，无法直接通过 JavaScript 操作 DOM 的方式来控制或修改@import引入的样式表。虽然你可以通过 JavaScript 修改包含@import规则的<style>标签的textContent，但这种方式复杂且不推荐，因为其本质是在修改 CSS 文本而不是 DOM 元素本身。
总结与最佳实践：
综合以上分析，link 标签是引入外部 CSS 样式表的首选和推荐方式，因为它具有更好的性能表现（并行加载、避免 FOUC）、更广泛的兼容性，并且易于通过 JavaScript 进行控制。
而 @import 规则在现代 Web 开发中，通常只在以下特定场景下考虑使用：
当一个 CSS 文件需要组织和拆分成多个模块时，可以在主 CSS 文件中使用
@import导入其他 CSS 文件，但这也会增加 HTTP 请求，在 HTTP/1.x 环境下可能导致性能问题。在 HTTP/2 及以后，多请求的开销有所降低。一些特定的 CSS 框架或预处理器在编译后可能会生成包含
@import的 CSS。
总而言之，理解这两种引入方式的本质差异，并根据项目的具体需求和目标（性能、兼容性、可维护性）做出明智的选择，是每个前端开发者必备的知识。
3. 浮动元素引起的问题和解决方法是什么？
float 属性是 CSS 早期用于网页布局的重要工具，尤其在实现图文混排和多列布局时非常常见。然而，浮动机制并非没有副作用，它常常会引起一些布局上的“怪癖”，如果不加以处理，就会导致页面结构混乱。理解这些问题并掌握其解决方法，是前端开发中非常关键的一环。
首先，我们来梳理一下浮动元素常见的问题：
父元素高度塌陷 (Parent Collapse)：
问题表现： 这是最常见也是最令人头疼的问题。当父元素中的所有子元素都设置了浮动（无论是左浮动
float: left还是右浮动float: right），这些浮动子元素就会脱离正常的文档流。结果是，父元素失去了对其浮动子元素的高度感知，它的高度将无法被浮动子元素撑开，仿佛子元素不存在一样。这会导致父元素的背景、边框无法包裹住浮动内容，甚至会影响到父元素后面的兄弟元素的布局，使它们“上移”到浮动元素所占据的空间。形象比喻： 就像一个水杯，里面的水（浮动子元素）因为某种原因“漂浮”起来，水杯的壁（父元素）就无法感知到水的实际高度，依然保持着空杯子的高度。
兄弟元素布局混乱 (Sibling Element Overlap/Wrapping)：
问题表现： 当一个非浮动元素紧跟在一个或多个浮动元素之后时，由于浮动元素脱离了文档流，非浮动元素会尝试占据浮动元素原来在文档流中的位置。然而，非浮动元素的内容会环绕浮动元素进行排列（类似文字环绕图片的效果），但其边框和背景会从浮动元素下方开始。这会使得页面布局看起来像是被“遮盖”或“串行”了，导致视觉上的混乱。
形象比喻： 想象一排整齐站立的人（正常文档流元素），如果其中一个人（浮动元素）突然跳到了半空中，后面的人（非浮动兄弟元素）就会向前一步，但他们的“身体”（内容）会为了避开跳起来的人而扭曲，而他们的“脚印”（边框背景）却仍然在原地。
浮动元素的连续性问题 (Float Chain Interruption)：
问题表现： 当你希望多个元素并排显示，并将它们都设置为浮动时，通常会很顺利。但如果在一个浮动元素之后，突然出现一个非浮动元素，然后后面又是一个浮动元素，那么第三个浮动元素可能不会按预期与第一个浮动元素并排。它可能会因为中间的非浮动元素而“掉队”或“换行”，导致布局错乱。简单来说，如果你在一个容器内开始使用浮动，最好保持这种“浮动状态”的连续性，直到你明确地清除浮动。
接下来，我们探讨解决浮动引起的问题的方法，这些方法通常被称为“清除浮动 (Clearfix)”：
清除浮动的核心思想是让父元素重新“感知”到浮动子元素的高度，或者阻止元素被浮动元素影响。
为父元素设置固定高度 (Fixed Height on Parent)：
方法： 直接给父元素一个明确的
height值。优点： 简单粗暴，直接解决父元素高度塌陷问题。
缺点： 缺乏弹性，当子元素内容增加导致高度超出时，会发生内容溢出，不适用于内容动态变化的场景。不推荐作为通用解决方案。
为父元素设置
overflow: hidden(BFC 原理)：方法： 给浮动元素的父元素设置
overflow: hidden、overflow: auto或overflow: scroll。原理： 这种方法利用了 CSS 中 块级格式化上下文 (Block Formatting Context, BFC) 的特性。当一个元素创建了 BFC 时，它会包含其内部的所有浮动子元素。也就是说，BFC 会将浮动元素纳入其盒模型计算高度的范围。
优点： 简单、有效，代码量少。
缺点： 如果父元素确实需要内容溢出可见（例如显示下拉菜单），或者父元素有滚动条时，这种方法就不适用。它可能会裁剪掉溢出的内容，或者强制出现滚动条。
使用
clear属性清除浮动：
clear属性用于指定元素哪一边不允许有浮动元素。它会使得设置了clear属性的元素，其顶部边缘被推到所有指定浮动元素的下方。clear: both(清除左右两侧浮动)：方法： 在浮动元素之后，紧跟着添加一个空的块级元素（如
<div>），并给这个空元素设置clear: both;样式。优点： 兼容性好，所有浏览器都支持。
缺点： 增加了 HTML 结构中无语义的空元素，导致 HTML 代码不够简洁和语义化。
提醒： 虽然
clear: left和clear: right分别只清除左浮动或右浮动，但在实际工作中，为了通用性，clear: both是最常用且推荐的方式，因为它能同时清除左右两侧的浮动影响。
伪元素清除浮动 (The Modern Clearfix / Micro Clearfix)：
方法： 这是目前最推荐和常用的清除浮动方法。它利用 CSS 的伪元素 (
::before和::after) 在父元素的内部“虚拟”地添加一个清除元素，从而避免了在 HTML 中添加额外的空标签。原理： 通常是给父元素添加一个特定的类名（如
clearfix），然后通过 CSS 定义该类的::after伪元素：.clearfix::after { content: ""; /* 伪元素必须有内容才能显示 */ display: block; /* 将其设置为块级元素 */ clear: both; /* 清除两侧浮动 */ /* 可选：隐藏伪元素自身 */ height: 0; visibility: hidden; } /* 兼容 IE 6/7 的 Hack，因为它们不支持 ::after */ .clearfix { *zoom: 1; /* Trigger hasLayout for IE 6/7 */ }优点：
语义化： 不需要添加额外的 HTML 标签，保持了 HTML 结构的整洁和语义化。
可复用性： 可以作为一个通用类名应用于任何需要清除浮动的父元素。
广泛应用： 这种模式已经被 Bootstrap 等主流 CSS 框架采纳，成为行业的默认规范。
提醒： 伪元素虽然没有直接写在 HTML 文档中，但它在渲染时确实创建了一个盒子，参与了布局。所以“少创建元素”的说法是指在 HTML 文档中少写了标签，而不是真的在渲染时减少了元素数量。但从维护和语义化的角度看，它是更好的选择。
父元素也浮动：
方法： 让父元素也设置为浮动。
优点： 可以解决父元素高度塌陷问题。
缺点： 父元素浮动后，其本身也脱离了文档流，可能会影响到它兄弟元素的布局，导致更复杂的问题，需要继续清除其父元素的浮动，形成“浮动传染”。因此不推荐作为通用解决方案。
总结与最佳实践：
在现代 Web 开发中，由于 Flexbox (弹性盒子) 和 CSS Grid (网格布局) 等更强大、更灵活的布局方式的出现，float 已经不再是构建复杂布局的首选工具。然而，理解浮动及其清除机制仍然非常重要，因为：
许多遗留项目或第三方组件仍然在使用浮动。
在某些特定场景下，浮动依然是实现特定效果（如文字环绕图片）的有效方式。
理解浮动有助于深入理解 CSS 的文档流和盒模型。
在清除浮动方面，伪元素清除浮动 (clearfix 方案) 是目前最推荐、最优雅且最广泛应用的解决方案。它兼顾了语义化、可维护性和兼容性，是前端开发者必备的技能之一。而 overflow: hidden 也是一个不错的选择，但需要注意其副作用。其他方法则应根据具体场景权衡利弊后谨慎使用。