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 动画,提升性能。
你对这些内容中哪部分更感兴趣,或者有想深入了解的内容吗?