CSS知识点梳理（一）

CSS 是层叠样式表（Cascading Style Sheets）的缩写，它是一种用于描述 HTML 或 XML（包括如 SVG、MathML 等派生语言）文档呈现的语言。CSS 可以用来控制文档的布局、颜色、字体等外观属性。

CSS 的主要特点包括：

• 分离内容与表现：CSS 可以将样式信息与 HTML 内容分离开来，使得页面设计人员和开发人员可以独立工作，提高工作效率。
• 丰富的样式与布局：CSS 提供了丰富的样式和布局选项，例如盒模型、弹性盒布局、网格布局等，可以轻松实现各种复杂的页面布局。
• 跨浏览器兼容性：CSS 是一种标准化的样式语言，不同的浏览器都有较好的兼容性，可以保证页面在不同设备上的显示效果一致。
• 易于维护：CSS 样式可以集中管理，方便修改和维护，可以提高网站的可维护性。
• 提高网站性能：使用 CSS 可以减少 HTML 标签的数量，降低页面大小，从而提高网站的性能。

CSS 是一种用来表现 HTML 文档样式的语言，样式定义如何显示 HTML 元素。以下是一些关于 CSS 的知识点梳理：

CSS 基础知识：

• CSS 是一种样式表语言，用于描述 HTML 或 XML（包括如 SVG、MathML 等派生语言）文档的呈现。
• CSS 可以让文档内容与表现分离，提高页面浏览速度，更符合 W3C 标准。
• CSS 是一种非记事性语言，意味着它不会“做任何事情”。它仅提供一种方式来描述网页元素应如何在视觉上呈现。

CSS 选择器：

• 选择器是用于选择想要添加样式的元素的模式。
• 最基本的选择器是类型选择器，它基于元素的名称来选择元素。例如，p 选择所有

  元素。

• 其他常见选择器包括类选择器、ID 选择器、属性选择器、伪类选择器和伪元素选择器等。

CSS 布局模型：

• CSS 布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
• 常见的 CSS 布局模型包括弹性盒布局模型、CSS3 过渡和变换、弹性布局（Flexbox）、网格布局（Grid）等。

CSS 动画和过渡：

• CSS 提供了一些动画和过渡效果，例如 transition 和 animation 属性，可以实现元素的平滑变化和动态效果。

CSS 媒体查询：

• 媒体查询是用于根据用户的设备特性（如屏幕宽度）来应用不同的样式规则的一种方法。

CSS 响应式设计：

• 响应式设计是一种网页设计方法，它能够根据不同的设备屏幕大小和分辨率来调整网页的布局和样式，以提供更好的用户体验。

CSS 与 JavaScript 的交互：

• CSS 和 JavaScript 可以相互配合使用，实现更丰富的交互效果。例如，通过 JavaScript 可以动态地改变元素的样式，或者监听元素的点击事件等。

CSS 的版本和兼容性：

• CSS 有多个版本，包括 CSS2 和 CSS3。CSS3 引入了一些新的特性和属性，例如圆角（border-radius）、阴影（box-shadow）等。
• 在使用 CSS 时，需要考虑不同浏览器之间的兼容性问题，以确保样式在各种设备上正确显示。