这是一份简洁实用的 CSS 开发速成手册

好的，这是一份简洁实用的 CSS 开发速成手册，涵盖核心概念和常用技巧：

一、基础概念

选择器
- 作用：指定哪些 HTML 元素应用样式。
- 常见类型：
  - 元素选择器：p { ... }(选择所有<p>元素)
  - 类选择器：.classname { ... }(选择所有class="classname"的元素)
  - ID 选择器：#idname { ... }(选择id="idname"的元素)
  - 后代选择器：div p { ... }(选择所有在<div>内部的<p>元素)
  - 子元素选择器：div > p { ... }(选择所有作为<div>直接子元素的<p>元素)
  - 相邻兄弟选择器：h1 + p { ... }(选择紧跟在<h1>后面的第一个<p>元素)
  - 通用兄弟选择器：h1 ~ p { ... }(选择所有在<h1>后面且同级的<p>元素)
  - 属性选择器：[type="text"] { ... },[href^="https"] { ... }
  - 伪类：:hover,:focus,:nth-child(n),:first-child,:last-child(基于元素状态或位置)
  - 伪元素：::before,::after,::first-line,::first-letter(创建虚拟元素或选择部分内容)
盒模型
- 每个元素都被视为一个矩形盒子。
- 组成部分（由内到外）：
  - 内容(content)
  - 内边距(padding) - 内容与边框之间的空间
  - 边框(border)
  - 外边距(margin) - 盒子与其他盒子之间的空间
- box-sizing属性：
  - content-box(默认)：元素宽高 = 内容宽高
  - border-box：元素宽高 = 内容 + 内边距 + 边框 (更常用)

二、常用属性速查

文本
- color：文本颜色 (#ff0000,rgb(255,0,0),red)
- font-family：字体 ('Arial', sans-serif)
- font-size：字号 (16px,1em,100%)
- font-weight：粗细 (normal,bold,700)
- text-align：水平对齐 (left,center,right,justify)
- line-height：行高 (1.5,24px)
- text-decoration：装饰 (none,underline,line-through)
背景
- background-color：背景色
- background-image：背景图 (url('image.jpg'))
- background-repeat：平铺 (repeat,no-repeat,repeat-x,repeat-y)
- background-position：位置 (center,top left,50% 50%)
- background-size：尺寸 (cover,contain,100px 200px)
尺寸与边距
- width/height：宽高 (100px,50%,auto)
- padding：内边距 (10px,10px 20px,10px 20px 15px 5px) (上右下左)
- margin：外边距 (同上)
- border：边框 (1px solid #ccc) (可拆分为border-width,border-style,border-color)
显示与定位
- display：
  - block：块级元素 (独占一行，可设宽高)
  - inline：行内元素 (不独占一行，不可设宽高)
  - inline-block：行内块 (不独占一行，可设宽高)
  - none：隐藏
  - flex：弹性布局容器
  - grid：网格布局容器
- position：
  - static(默认)：正常流
  - relative：相对自身原位置偏移 (top,right,bottom,left)
  - absolute：相对于最近的非static祖先元素定位
  - fixed：相对于视口定位
  - sticky：在滚动到特定位置前为relative，之后为fixed
- top,right,bottom,left：配合position定位
- z-index：控制层叠顺序 (数值越大越靠前)

三、布局核心

Flexbox (弹性布局)

容器属性：

.container { display: flex; flex-direction: row | column; /* 主轴方向 */ justify-content: flex-start | center | flex-end | space-between | space-around; /* 主轴对齐 */ align-items: stretch | flex-start | center | flex-end | baseline; /* 交叉轴对齐 */ flex-wrap: nowrap | wrap; /* 换行 */ align-content: /* 多行时的交叉轴对齐 */ }

项目属性：

.item { flex-grow: 0; /* 放大比例 */ flex-shrink: 1; /* 缩小比例 */ flex-basis: auto; /* 初始尺寸 */ flex: 0 1 auto; /* 简写 (grow shrink basis) */ align-self: auto; /* 覆盖容器的 align-items */ order: 0; /* 项目排列顺序 */ }

CSS Grid (网格布局)

容器属性：

.container { display: grid; grid-template-columns: 100px 1fr 2fr; /* 定义列 */ grid-template-rows: auto 200px; /* 定义行 */ grid-gap: 10px; /* 行列间距 (grid-column-gap, grid-row-gap) */ justify-items: start | center | end | stretch; /* 单元格内容水平对齐 */ align-items: start | center | end | stretch; /* 单元格内容垂直对齐 */ justify-content: /* 整个网格在容器内的水平对齐 */ align-content: /* 整个网格在容器内的垂直对齐 */ }

项目属性：

.item { grid-column: 1 / 3; /* 跨越第1列到第3列 */ grid-row: 1; /* 占据第1行 */ grid-area: header; /* 指定区域名 */ justify-self: /* 覆盖容器的 justify-items */ align-self: /* 覆盖容器的 align-items */ }

四、响应式设计

媒体查询(@media)

根据设备特性（如屏幕宽度）应用不同样式。

示例：

/* 默认样式 (移动优先) */ body { font-size: 14px; } /* 屏幕宽度 ≥ 768px */ @media (min-width: 768px) { body { font-size: 16px; } .container { width: 750px; } } /* 屏幕宽度 ≥ 992px */ @media (min-width: 992px) { .container { width: 970px; } }

五、实用技巧

CSS 变量 (Custom Properties)：

:root { --main-color: #3498db; --padding: 10px; } .element { color: var(--main-color); padding: var(--padding); }

重置样式：使用reset.css或normalize.css消除浏览器默认样式差异。
单位：
- px：像素
- %：相对于父元素
- em：相对于当前元素的字体大小
- rem：相对于根元素 (<html>) 的字体大小
- vw/vh：视口宽度/高度的 1%
- vmin/vmax：视口较小/较大尺寸的 1%
调试：浏览器开发者工具 (F12或右键检查) 是调试 CSS 的利器。