CSS基础概念
- 选择器（Selectors） 选择器用于指定哪些HTML元素将应用样式。基本的选择器包括：
元素选择器：根据元素类型选择元素，如p表示所有
标签。 类选择器：使用点.后跟类名选择元素，如.highlight表示所有带有class="highlight"的元素。 ID选择器：使用井号#后跟ID名选择元素，如#header表示ID为header的元素。 示例代码：
p { color: navy; /* 设置所有段落文本颜色为海军蓝 */ }
.highlight { background-color: yellow; /* 为所有类名为highlight的元素设置背景色 */ }
#header { font-size: 24px; /* 设置ID为header的元素字体大小 */ } 2. 属性和值（Properties and Values） CSS规则由属性和值组成，属性定义样式特征，值定义属性的具体表现。
示例代码：
body { font-family: Arial, sans-serif; /* 设置默认字体 / line-height: 1.6; / 设置行高 */ } 盒模型（Box Model） CSS盒模型包括：
内容区域（Content）：元素的主要内容。 内边距（Padding）：内容与边框之间的空间。 边框（Border）：围绕内边距和内容的线。 外边距（Margin）：边框外的空间，用于分隔元素。 示例代码：
div { width: 300px; height: 100px; padding: 20px; border: 5px solid #000; margin: 10px; } 定位（Positioning） CSS提供了多种定位机制，包括：
静态定位（Static）：元素按照正常的文档流进行布局。 相对定位（Relative）：元素相对于其正常位置进行偏移。 绝对定位（Absolute）：元素相对于最近的已定位祖先元素进行偏移。 固定定位（Fixed）：元素相对于浏览器窗口进行偏移。 示例代码：
.relative { position: relative; top: 20px; left: 30px; }
.absolute { position: absolute; top: 50px; right: 15px; }
.fixed { position: fixed; bottom: 0; right: 0; } 布局（Layout） Flexbox 和 Grid 是现代CSS布局的两大支柱。
Flexbox 用于一维布局，可以轻松地对齐元素，并在不同屏幕尺寸下保持布局的灵活性。
示例代码：
.flex-container { display: flex; justify-content: space-around; /* 元素间隔均匀分布 / align-items: center; / 垂直居中 */ }
.flex-item { flex: 1; /* 弹性增长 */ } Grid 用于二维布局，允许开发者创建复杂的网格布局。
示例代码：
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); /* 创建三列等宽的网格 / grid-gap: 10px; / 网格间隙 */ } 选择器优先级（Cascading and Specificity） CSS的选择器优先级决定了样式的覆盖规则。优先级顺序为：
内联样式 ID选择器 类选择器、伪类选择器、属性选择器 元素类型选择器、伪元素选择器 如果有相同优先级的规则，则后来的样式会覆盖先前的样式。
响应式设计（Responsive Design） 响应式设计通过媒体查询实现，允许网页在不同设备上呈现最佳效果。
示例代码：
@media (max-width: 768px) { .container { flex-direction: column; /* 小屏幕上堆叠布局 */ } }
CSS是一个强大的工具，它允许开发者创建美观、响应式的网页。通过深入学习CSS的选择器、盒模型、定位、布局和响应式设计，开发者可以掌握构建现代网页所需的核心技能。本文提供了CSS的详细学习笔记，但学习是一个持续的过程，建议开发者通过实践和探索来加深对CSS的理解。
