前端基础：CSS、HTML 知识点梳理与精要

作为前端开发的基础，CSS 和 HTML 对于构建美观、交互友好的网页至关重要。掌握这些核心知识点，有助于前端开发人员编写出更加健壮、可维护的代码，提升用户体验。

选择器的权重和优先级

选择器是 CSS 中用来匹配 HTML 元素的规则。选择器的权重和优先级决定了当多个选择器匹配同一个元素时，哪个选择器的样式将被应用。权重和优先级的计算规则如下：

• 元素选择器的权重为 1。
• 类选择器和 ID 选择器的权重为 10。
• 通配符选择器的权重为 0。
• 继承选择器的权重为 0。

当多个选择器匹配同一个元素时，权重较高的选择器的样式将被应用。如果权重相同，则优先级较高的选择器的样式将被应用。优先级的计算规则如下：

• 行内样式的优先级最高。
• ID 选择器的优先级高于类选择器和通配符选择器。
• 类选择器的优先级高于通配符选择器。

盒模型

盒模型是 CSS 中用来元素大小和布局的模型。盒模型将元素分为四部分：内容区、内边距、边框和外边距。内容区是元素的内容部分，内边距是内容区与边框之间的区域，边框是元素的边框，外边距是边框与其他元素之间的区域。

盒子的总宽度等于内容区的宽度加上内边距、边框和外边距的宽度。盒子的总高度等于内容区的高度加上内边距、边框和外边距的高度。

盒子大小计算

盒子的宽度和高度可以通过 CSS 的 width 和 height 属性来指定。如果未指定宽度和高度，则浏览器的默认值将被应用。浏览器的默认宽度和高度通常是根据元素的内容来计算的。

盒子的宽度和高度也可以通过 max-width 和 max-height 属性来限制。如果盒子的实际宽度或高度大于最大宽度或高度，则盒子的宽度或高度将被限制为最大宽度或高度。

margin 的重叠计算

当两个元素的 margin 重叠时，重叠部分的 margin 将被折叠。折叠后的 margin 等于较大的 margin 减去较小的 margin。

例如，如果两个元素的 margin 分别为 10px 和 5px，则重叠部分的 margin 将等于 10px - 5px = 5px。

浮动

浮动是 CSS 中用来控制元素在文档流中的位置的属性。浮动元素将脱离文档流，并沿着其父元素的左边缘或右边缘排列。

浮动元素可以被其他元素环绕。浮动元素周围的元素将自动调整其位置，以适应浮动元素。

浮动布局

浮动布局是利用浮动元素来实现网页布局的一种技术。浮动布局可以创建出灵活、响应式的布局，非常适合用于构建复杂的网页布局。

清理浮动

当浮动元素结束后，需要使用 clear 属性来清理浮动。清理浮动可以防止浮动元素影响后面的元素的布局。

clear 属性可以取以下值：

• left：清除浮动元素的左边。
• right：清除浮动元素的右边。
• both：清除浮动元素的左右两边。

定位

定位是 CSS 中用来控制元素在文档流中的位置的属性。定位元素将脱离文档流，并按照指定的定位规则进行定位。

文档流概念

文档流是指元素在网页中的排列顺序。文档流是从左到右、从上到下的。

定位分类

定位分为以下四种类型：

• static：元素不会脱离文档流，并且按照文档流的顺序进行排列。
• relative：元素会脱离文档流，但不会改变其在文档流中的位置。
• absolute：元素会脱离文档流，并且相对于其父元素进行定位。
• fixed：元素会脱离文档流，并且相对于视口进行定位。

fixed 定位特点

fixed 定位的元素始终相对于视口进行定位。即使滚动页面，fixed 定位的元素也不会移动。

fixed 定位的元素可以用来创建固定在屏幕上的元素，例如导航栏和侧边栏。

绝对定位

绝对定位的元素会脱离文档流，并且相对于其父元素进行定位。绝对定位的元素可以被其他元素环绕。绝对定位的元素周围的元素将自动调整其位置，以适应绝对定位的元素。

绝对定位的元素可以用来创建弹出式窗口和模态窗口。