深圳市住房和建设局网站住房购物网站图标
CSS（Cascading Style Sheets，层叠样式表）是用来描述HTML文档外观和布局的语言。以下是对CSS的常见了解范围：
1. CSS 基础
-
选择器：如通用选择器 (
*)、类型选择器、类选择器 (.class)、ID选择器 (#id)、后代选择器、伪类（:hover、:nth-child()）等。 -
属性与值：如
color、background-color、font-size、margin、padding等。 -
盒模型：包括
content、padding、border、margin。 -
层叠规则：如样式优先级、继承、重要性（
!important）。
2. 布局
-
浮动 (float)：用于创建简单布局。
-
Flexbox：用于一维布局，属性包括
display: flex、justify-content、align-items等。 -
Grid：用于二维布局，属性包括
grid-template-rows、grid-template-columns等。 -
定位 (Positioning)：如
static、relative、absolute、fixed和sticky。
3. 响应式设计
-
媒体查询：
@media用于根据设备尺寸和特性调整样式。 -
弹性单位：如百分比 (
%)、em、rem、vh、vw等。 -
Flexbox 和 Grid 的自适应能力。
-
CSS 框架：如 Bootstrap、Tailwind CSS，常用来快速实现响应式布局。
4. 高级特性
-
动画与过渡：如
transition、transform、keyframes。 -
CSS 变量：
--main-color: #333;和var(--main-color)。 -
伪元素：如
::before和::after。 -
阴影：
box-shadow和text-shadow。 -
滤镜：
filter属性可以实现模糊、对比度调整等效果。
5. 现代 CSS 技术
-
CSS-in-JS：如 styled-components、Emotion。
-
Tailwind CSS 和 Atomic CSS：快速开发样式。
-
CSS Houdini：用于扩展 CSS 的功能。
-
Clamp 函数：
clamp()用于设置响应式值。
6. 浏览器兼容性
-
熟悉不同浏览器的兼容性问题，使用工具（如 Can I Use）查询。
-
使用
prefix（如-webkit-）处理旧版浏览器的兼容性。
7. 性能优化
-
减少冗余样式。
-
优化渲染性能，避免使用高开销的选择器。
-
使用现代 CSS 特性代替 JS 动画，提升性能。
你对这些内容中哪部分更感兴趣，或者有想深入了解的内容吗？