CSS 基础概念

CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。通过选择器和属性组合，将样式应用到 HTML 元素。

css 复制代码

/* 示例：修改段落文本颜色和字体 */
p {
  color: blue;
  font-family: Arial;
}

常用选择器

元素选择器 ：直接针对 HTML 标签（如 p、div）。
类选择器 ：通过 .classname 定义，可重复使用。
ID 选择器 ：通过 #idname 定义，具有唯一性。
伪类选择器 ：如 :hover、:active 定义交互状态。

css 复制代码

.button {
  background-color: #4CAF50;
}
#header {
  font-size: 24px;
}
a:hover {
  text-decoration: underline;
}

盒模型

每个 HTML 元素被视为一个盒子，包含 content、padding、border 和 margin。

标准盒模型 ：width 和 height 仅指内容区域。
替代盒模型 ：box-sizing: border-box 包含边框和内边距。

css 复制代码

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  box-sizing: border-box; /* 启用替代盒模型 */
}

布局技术

Flexbox：一维布局，适合动态排列项目。
Grid：二维布局，支持复杂网格结构。
浮动（Float）：传统布局方式，现多用于图文环绕。

css 复制代码

/* Flexbox 示例 */
.container {
  display: flex;
  justify-content: space-between;
}

/* Grid 示例 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

响应式设计

使用媒体查询（@media）适配不同设备屏幕尺寸。

css 复制代码

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

动画与过渡

通过 transition 和 @keyframes 实现动态效果。

css 复制代码

/* 过渡效果 */
.button {
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: red;
}

/* 关键帧动画 */
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
.slide-element {
  animation: slide 2s infinite;
}

预处理器（如 Sass）

扩展 CSS 功能，支持变量、嵌套和混合。

scss 复制代码

$primary-color: #333;
.button {
  background-color: $primary-color;
  &:hover {
    opacity: 0.8;
  }
}

性能优化

减少选择器复杂性。
使用 will-change 提示浏览器优化渲染。
压缩 CSS 文件以减少加载时间。

css 复制代码

.element {
  will-change: transform; /* 提前告知浏览器变化属性 */
}