CSS 起步文档

CSS 入门

什么是 CSS

CSS（层叠样式表，Cascading Style Sheets）用于描述 HTML 或 XML 文档的样式。通过选择器和声明组成的规则控制网页元素的呈现。

CSS 语法结构

选择器 {
  属性名: 属性值;
}

CSS 引入方式

方式	写法示例	使用场景
行内样式	<div style="color: red;">	单个元素临时样式
内部样式表	<style> div { color: red; } </style>	单页面内样式
外部样式表	<link rel="stylesheet" href="style.css">	多页面复用，推荐

CSS 注释

/* 这是注释 */

基础选择器

选择器	作用	特点	使用频率	示例
标签选择器	选中所有同名标签	无法差异化	较高	div {}
类选择器	选中指定 class	灵活，可多类名	最高	.nav {}
id 选择器	选中唯一 id	唯一性，配合 JS	较少	#logo {}
通配符选择器	选中所有元素	权重最低，影响范围大	特殊场景	* {}

类选择器示例：

<div class="box red">内容</div>

一个标签可以有多个类名，用空格分隔：class="box red"（公共样式 + 独立样式）。

通配符常用于清除内外边距：

* {
  margin: 0;
  padding: 0;
}

字体与文本属性

字体属性

body {
  font-family: "Microsoft YaHei", Arial, sans-serif;  /* 字体系列 */
  font-size: 16px;                                     /* 字体大小 */
  font-weight: 700;                                    /* 粗细 100~900 */
  font-style: italic;                                  /* 斜体 */
}

复合属性（顺序固定）：

div {
  font: italic 700 16px/1.5 "Microsoft YaHei";
}

必须同时保留 font-size 和 font-family，否则无效。

文本属性

p {
  color: #ff0000;           /* 颜色（十六进制最常用） */
  text-align: center;       /* 水平对齐：left/center/right */
  text-decoration: none;    /* 下划线、删除线等，a 标签常用 none */
  text-indent: 2em;         /* 首行缩进，em 相对当前文字大小 */
  line-height: 26px;        /* 行高，单行文字垂直居中可设 line-height = 容器 height */
}

复合选择器与伪类

选择器	示例	说明
后代选择器	ul li {}	空格，选中所有后代
子选择器	div > p {}	>，只选直接子元素
并集选择器	div, .nav {}	逗号，同时选中多个
链接伪类	a:hover {}	LVHA 顺序：:link :visited :hover :active
:focus 伪类	input:focus {}	获得焦点的元素

常用链接写法：

a {
  color: #333;
  text-decoration: none;
}
a:hover {
  color: #c81623;
}

元素显示模式

类型	特点	常见标签
块级元素	独占一行，可设宽高，宽默认100%	div, p, h1~h6, ul
行内元素	一行多个，不能设宽高，宽高由内容撑开	span, a, em, strong
行内块元素	一行多个，可设宽高，有间隙	img, input, td

显示模式转换：

display: block;        /* 转块级 */
display: inline;       /* 转行内 */
display: inline-block; /* 转行内块 */

注意：行内元素的上下 margin 无效，上下 padding 视觉上有效但不会增加元素实际占据的高度（仍由 line-height 决定）。尽量只给行内元素设置左右内外边距。

背景属性

div {
  background-color: #f0f0f0;
  background-image: url(images/bg.jpg);
  background-repeat: no-repeat;   /* 不平铺，可选 repeat-x/repeat-y */
  background-position: center top; /* 方位词或像素，如 10px 20px */
  background-attachment: fixed;    /* 背景固定 */
}

复合写法（推荐顺序：color image repeat attachment position）：

background: #fff url(bg.png) no-repeat fixed center;

背景半透明（CSS3，内容不透明）：

background: rgba(0, 0, 0, 0.3);  /* 最后一个数 0~1，可写 .3 */

CSS 三大特性

0. 层叠性：相同选择器设置相同样式，后写的覆盖先写的（就近原则）。

1. 继承性：子元素继承父元素的某些样式（color、font-size、line-height 等）。

   • line-height 无单位写法（如 1.5）子元素会按自己的 font-size 重新计算；带单位（如 1.5em）则会先计算父元素行高再继承，容易产生意外，推荐无单位写法。

2. 优先级：

选择器	权重（四位数）
继承或 *	0,0,0,0
标签选择器 / 伪元素	0,0,0,1
类选择器 / 伪类 / 属性选择器	0,0,1,0
id 选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!important	无穷大

• 权重叠加不进位，如 0,0,1,1。
• 复合选择器权重相加。

盒子模型

组成

content（内容） + padding（内边距） + border（边框） + margin（外边距）

边框 border

border: 1px solid red;
border-top: 2px dashed blue;
border-collapse: collapse;  /* 表格细线边框 */

内边距 padding

值的个数	含义
padding: 5px	上下左右均为 5px
padding: 5px 10px	上下 5px，左右 10px
padding: 5px 10px 20px	上 5px，左右 10px，下 20px
padding: 5px 10px 20px 30px	上右下左（顺时针）

如果盒子已有宽高，padding/border 会撑大盒子。解决方案：

0. 手动减去撑大的尺寸。
1. 使用 box-sizing: border-box;（推荐）。

外边距 margin

语法同 padding。

块级盒子水平居中：margin: 0 auto;（需设置宽度）。

外边距合并（常见坑点）

• 相邻块元素垂直外边距合并：两个块上下排列，margin-bottom 和 margin-top 会合并，取较大值。
• 嵌套块元素垂直外边距塌陷：父元素有上外边距，子元素也有上外边距，父元素会塌陷较大值。

解决方法（任选一种）：

• 给父元素加 border 或 padding。
• 给父元素加 overflow: hidden。
• 给父元素加 display: flow-root（现代方法，不产生副作用）。
• 使用 flex 或 grid 布局（推荐）。

清除内外边距（通配符初始化）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;  /* 可选，全局切换盒子模型 */
}

圆角边框与阴影

圆角 border-radius

div {
  border-radius: 10px;           /* 四个角一致 */
  border-radius: 10px 20px 30px 40px; /* 左上 右上 右下 左下 */
  border-radius: 50%;            /* 圆形（宽高相等）或椭圆（宽高不等） */
}

盒子阴影 box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

示例：

div:hover {
  box-shadow: 10px 10px 10px -4px rgba(0,0,0,0.3);
}

• 阴影不占空间，不影响布局。

文字阴影 text-shadow

text-shadow: 2px 2px 2px gray;

浮动与清除浮动

浮动基本用法

传统布局方法，新项目推荐使用 Flex 或 Grid。

float: left;  /* 或 right, none */

• 浮动元素脱离标准流，不再占位。
• 多个浮动元素在一行排列（父容器宽度不够则换行）。
• 任何元素浮动后都会具有行内块特性（可设宽高，一行多个）。

布局准则

• 纵向排列用标准流，横向排列用浮动。

清除浮动（解决父元素高度塌陷）

原因：子元素浮动后，父元素高度为 0，影响后续布局。

方法1：额外标签法

在浮动子元素末尾添加空块级标签：<div style="clear: both;"></div>（不推荐，增加冗余标签）。

方法2：父级添加 overflow: hidden

.father {
  overflow: hidden;
}

方法3：伪元素清除浮动（推荐）

.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

方法4：双伪元素（现代）

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}

现代更简单的方式：父元素设置 display: flow-root;（无副作用，兼容性良好）。

定位

定位模式 + 边偏移

position 值	说明	是否脱标
static	默认，无偏移	否
relative	相对自身原位置移动	否（占位）
absolute	相对最近有定位的父级	是
fixed	相对浏览器窗口	是
sticky	滚动到阈值后固定	混合

边偏移：top, bottom, left, right（像素或百分比）。

子绝父相

子元素 absolute，父元素 relative（父占位，子自由移动）。

绝对定位盒子居中

.box {
  position: absolute;
  left: 50%;
  margin-left: -自身宽度的一半px;
}

堆叠顺序 z-index

• 仅定位元素（position 不为 static）有效。
• 数值越大越靠上，默认 auto（0）。

元素的隐藏与显示

方法	是否占位	适用场景
display: none;	不占位	常用，搭配 JS 做特效
visibility: hidden;	占位	需要保留空间时
overflow: hidden;	不占位	隐藏溢出部分，也可做清除浮动
opacity: 0;	占位	透明，仍可响应事件（配合 pointer-events）

精灵图与字体图标

精灵图（Sprites）

将多个小图标合成一张图，通过 background-position 移动显示。

步骤：

0. 测量小图标大小和偏移（通常负值）。
1. 设置背景图、不重复、定位。

.icon {
  width: 20px;
  height: 20px;
  background-image: url(sprites.png);
  background-repeat: no-repeat;
  background-position: -40px -20px;
}

字体图标（iconfont）

本质是字体，可像文字一样改变颜色、大小。

通用引入模板：

@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.woff2') format('woff2'),
       url('fonts/icomoon.woff') format('woff'),
       url('fonts/icomoon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
.icon {
  font-family: 'icomoon';
  font-size: 16px;
}

推荐使用

iconfont.cn：www.iconfont.cn/

icomoon.io：icomoon.io/

界面样式与实用技巧

鼠标样式 cursor

cursor: pointer;     /* 小手 */
cursor: move;        /* 移动十字 */
cursor: not-allowed; /* 禁止 */

去掉表单轮廓线

input, textarea {
  outline: none;
}
textarea {
  resize: none;      /* 禁止拖拽改变大小 */
}

图片与文字垂直对齐 vertical-align

• 默认 baseline（基线对齐），导致图片底部有空隙。
• 解决方法：给图片设置 vertical-align: middle / top / bottom，或 display: block。

img {
  vertical-align: middle;
}

单行文本溢出省略

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行文本溢出省略（WebKit）

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

CSS 画三角形

.triangle {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: red;
}

CSS3 新增选择器

属性选择器

选择符	说明	权重
E[att]	有 att 属性的 E	0,0,1,0
E[att="val"]	att 属性值等于 val	同上
E[att^="val"]	att 属性值以 val 开头	同上
E[att$="val"]	att 属性值以 val 结尾	同上
E[att*="val"]	att 属性值包含 val	同上

结构伪类选择器

选择符	说明	示例
E:first-child	父元素中第一个孩子且为 E	li:first-child
E:last-child	父元素中最后一个孩子且为 E
E:nth-child(n)	父元素中第 n 个孩子且为 E（n 可为数字、odd、even、公式）
E:first-of-type	父元素中第一个该类型的 E
E:nth-of-type(n)	父元素中第 n 个该类型的 E

区别：nth-child 先找第 n 个孩子，再检查是否匹配 E；nth-of-type 先过滤出所有 E，再取第 n 个。 例如：div span:nth-child(1)，如果第一个子元素不是 <span>，则选不中。

示例：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

li:nth-child(2) { color: red; }   /* 选中第二个 li */
li:nth-of-type(2) { color: blue; } /* 同样选中第二个 li，但如果中间有其他类型，结果可能不同 */

伪元素选择器

选择符	说明	权重
::before	在元素内容最前面插入内容	0,0,0,1
::after	在元素内容最后面插入内容	同上

div::before {
  content: "前缀";
  display: inline-block;  /* 默认是行内元素，可改块级 */
}

必须设置 content 属性，否则伪元素不生效。

CSS3 盒子模型与其他特性

box-sizing

box-sizing: content-box;  /* 默认，宽高只包含 content */
box-sizing: border-box;   /* 宽高包含 padding 和 border（推荐） */

滤镜 filter

img {
  filter: blur(5px);   /* 模糊，单位 px */
}

calc() 函数

width: calc(100% - 80px);  /* 运算符两侧必须有空格 */

CSS3 过渡与动画

过渡 transition

div {
  width: 100px;
  transition: all 0.5s ease 0s;  /* 属性 时长 运动曲线 延迟 */
}
div:hover {
  width: 200px;
}

运动曲线：ease（默认）、linear、ease-in、ease-out、steps()（逐帧）。

动画 animation

@keyframes move {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
div {
  animation: move 2s linear infinite alternate;
}

常用属性：

属性	描述
animation-name	关键帧名称
animation-duration	持续时间
animation-timing-function	速度曲线（含 steps()）
animation-iteration-count	播放次数（infinite 无限）
animation-direction	是否反向（alternate）
animation-fill-mode	结束状态（forwards 保持）
animation-play-state	暂停（paused）

性能优化：对动画属性使用 will-change: transform; 可提升流畅度。

---

CSS3 2D/3D 转换

2D 转换 transform

transform: translate(50px, 50px);   /* 位移，百分比相对自身 */
transform: rotate(45deg);           /* 旋转，正值顺时针 */
transform: scale(1.5);              /* 缩放，1 为原大小 */
transform-origin: left top;         /* 变换中心点 */

3D 转换

.father {
  perspective: 500px;               /* 透视，给父元素 */
  transform-style: preserve-3d;     /* 子元素开启 3D 空间 */
}
.child {
  transform: translateZ(100px) rotateY(45deg);
}

• 左手准则：拇指指向轴正向，四指弯曲方向即为旋转正方向。

移动端 Web 开发基础

视口 viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

属性	说明
width	布局视口宽度，常用 device-width
initial-scale	初始缩放比，通常 1.0
maximum-scale	最大缩放比
user-scalable	是否允许用户缩放（yes/no，但部分浏览器已忽略，建议用 maximum-scale 限制）

二倍图与响应式图像

• 物理像素比：1 CSS 像素在不同屏幕上对应不同物理像素。
• 解决高清屏模糊：准备 @2x 图，CSS 尺寸缩小一半。

/* 背景图方式 */
background-image: url(icon@2x.png);
background-size: 20px 20px;

/* 或使用 image-set */
background-image: -webkit-image-set(url(icon.png) 1x, url(icon@2x.png) 2x);

/* 或使用 img 的 srcset */
<img src="icon.png" srcset="icon@2x.png 2x" alt="">

移动端 CSS 初始化

推荐使用

normalize.css：necolas.github.io/normalize.c…

常见重置样式：

/* 去除移动端点击高亮 */
-webkit-tap-highlight-color: transparent;
/* 移除默认外观（如按钮圆角） */
-webkit-appearance: none;
/* 禁止长按菜单 */
img, a {
  -webkit-touch-callout: none;
}

现代布局：Flex 与 Grid

Flex 布局（一维布局）

.container {
  display: flex;           /* 或 inline-flex */
  flex-direction: row;     /* 主轴方向：row | column */
  justify-content: center; /* 主轴对齐：flex-start | center | space-between | space-around */
  align-items: center;     /* 交叉轴对齐：stretch | center | flex-start | flex-end */
  flex-wrap: wrap;         /* 换行 */
}
.item {
  flex: 1;                 /* 子项占据剩余空间比例 */
  order: 2;                /* 排序，数值越小越靠前 */
}

推荐：使用 Flex 替代浮动做一维布局（水平或垂直排列）。

Grid 布局（二维布局）

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 三列等分 */
  grid-template-rows: auto 200px;
  gap: 20px;                            /* 行列间距 */
}
.item {
  grid-column: span 2;   /* 跨越两列 */
}

适用场景：复杂网格布局，如卡片墙、相册、仪表盘。

响应式设计与媒体查询

基本语法

@media (min-width: 768px) and (max-width: 1024px) {
  body {
    font-size: 14px;
  }
}

常用断点（参考）

• 手机：max-width: 767px
• 平板：768px - 1024px
• 桌面：min-width: 1025px

结合 rem 的适配方案

0. 媒体查询 + rem：动态改变根元素 font-size。
1. flexible.js（阿里）：将屏幕分为 10 等份，1rem = 屏幕宽度/10。

<script src="https://cdn.jsdelivr.net/npm/flexible.js"></script>

vw / vh 适配

• 1vw = 视口宽度的 1%，1vh = 视口高度的 1%。
• 与百分比的区别：百分比相对父容器，vw/vh 相对视口。

.box {
  width: 50vw;   /* 屏幕宽度一半 */
  height: 30vh;  /* 屏幕高度 30% */
}

CSS 自定义属性（变量）

定义与使用

:root {
  --primary-color: #3498db;
  --spacing: 1rem;
}
button {
  background-color: var(--primary-color);
  padding: var(--spacing);
}

动态修改（JS）

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

优势：主题切换、代码复用、易于维护。

---

性能与兼容性

浏览器私有前缀

前缀	浏览器
-webkit-	Chrome, Safari
-moz-	Firefox
-ms-	IE
-o-	Opera

使用建议：借助 Autoprefixer 工具自动添加，手写时只写标准属性。

性能提示

• 避免使用通配符 * 选择器（影响渲染性能）。
• 动画中使用 transform 和 opacity（不触发重排）。
• 对频繁动画元素使用 will-change: transform;。
• 减少 CSS 嵌套层级（选择器最长不超过 4 层）。

常见坑点与最佳实践

坑点	解决方案
外边距塌陷	父元素加 overflow: hidden 或 display: flow-root
图片底部空白间隙	vertical-align: middle 或 display: block
浮动父元素高度塌陷	使用 clearfix 或 display: flow-root
行内元素上下边距无效	改用 display: inline-block 或块级
nth-child 与预期不符	确认是否选错孩子类型，改用 nth-of-type
绝对定位盒子没有参照物	给父元素加 position: relative
过渡/动画未生效	检查属性是否可动画（如 display: none 不能过渡）
移动端点击高亮	设置 -webkit-tap-highlight-color: transparent
1px 边框在高清屏变粗	使用 transform: scale(0.5) 或 border-image