CSS 入门与常用属性详解
目录
1. CSS 引入方式（三种）
2. 优先级与级联
Specificity（选择器优先级）计分规则：
3. 选择器（基础与复合）
3.1 基础选择器
3.2 复合选择器
4. 常用样式属性
4.1 字体相关
4.2 文本相关
4.3 背景相关
4.4 盒子模型
4.5 布局（display、flex、grid、定位）
4.5.1 display 属性
4.5.2 Flexbox 布局
4.5.3 Grid 布局（进阶）
4.5.4 定位（position）
4.6 其他常用属性
5. 常见不明概念详解
5.1 盒子模型（Box Model）
5.1.1 盒子构成
5.1.2 box-sizing属性
5.2 行内 / 块级 / 行内块 元素本质
5.3 z-index 和堆叠上下文（stacking context）
5.4 常见单位说明
6. 常见错误与易踩坑点
1. CSS 引入方式（三种）
| 引入方式 | 写法示例 | 写在页面的位置 | 作用范围 | 常用场景 |
|---|---|---|---|---|
| 行内样式 | <p style="color:red">文本</p> | 标签内部 style 属性 | 仅对当前标签生效 | 快速调试、临时覆盖（不推荐长期使用） |
| 内嵌样式 | <style>p { color: red; }</style> | <head> 中 | 当前页面 | 小型页面、演示或单个页面样式 |
| 外链样式 | <link rel="stylesheet" href="style.css"> | <head> 中 | 引入该 CSS 的所有页面 | 项目开发、组件共享（推荐） |
优先级简述：
-
相同选择器：行内样式 > 内嵌样式 > 外联样式（后引入的覆盖前面）
-
不同选择器：优先级 = 行内样式 > id > class > 标签 > 通用选择器(*)
2. 优先级与级联
Specificity（选择器优先级）计分规则：
| 选择器类型 | 分值 |
|---|---|
| 内联样式（style=） | 1000 |
| ID 选择器（#id） | 100 |
| Class、属性选择器、伪类（.class、[type="text"]、:hover） | 10 |
| 元素/类型选择器（div, p）和伪元素（::before） | 1 |
通配符 * | 0 |
示例：
div { color: black; } /* specificity: 0-0-1 */
.box { color: blue; } /* specificity: 0-1-0 */
#header { color: red; } /* specificity: 1-0-0 */
- 当多个规则作用于同一元素时，优先级高的规则生效。
- 相同优先级时，后定义的规则覆盖前定义的。
3. 选择器（基础与复合）
3.1 基础选择器
- 标签选择器：
div { } - class 选择器：
.btn { } - ID 选择器：
#main { } - 通配符选择器：
* { }
3.2 复合选择器
| 选择器类型 | 语法示例 | 说明 |
|---|---|---|
| 后代选择器 | nav a {} | 选中 nav 内所有 a 元素 |
| 子选择器 | ul > li {} | 选中 ul 的直接子元素 li |
| 相邻兄弟选择器 | h1 + p {} | 选中紧跟在 h1 后面的第一个 p |
| 通用兄弟选择器 | h1 ~ p {} | 选中 h1 后面的所有同级 p |
| 属性选择器 | input[type="text"] {} | 选中属性为指定值的元素 |
| 伪类 | :hover, :first-child | 选中元素的特定状态 |
| 伪元素 | ::before, ::after | 创建元素的虚拟子部分 |
伪类 vs 伪元素：
- 伪类（如
:hover）：针对元素的状态。 - 伪元素（如
::before）：创建元素的虚拟子部分，不是 DOM 中真实元素，但能添加样式和内容。
4. 常用样式属性
4.1 字体相关
body {font-family: "Microsoft YaHei", Arial, sans-serif;font-size: 16px; /* 基本字体大小 */font-weight: 400; /* 400 normal, 700 bold */font-style: normal; /* normal / italic */color: #333333;
}
- 推荐字体后备方案，最后用通用字体族
sans-serif或serif。 - 单位：
px：绝对像素em：相对父元素字体大小rem：相对根元素（html）字体大小，更稳定，推荐使用。
4.2 文本相关
p {line-height: 1.6; /* 行高 */text-indent: 2em; /* 首行缩进 */text-align: justify; /* 两端对齐 */
}
a {text-decoration: none; /* 去掉下划线 */
}
ul {list-style: none; /* 去掉默认列表符号 */padding: 0;margin: 0;
}
4.3 背景相关
.header {background: url('bg.jpg') no-repeat center/cover;background-color: #f5f5f5;
}
background-size: cover;保证背景图覆盖整个容器，可能会裁剪图片。contain保持图片完整显示，但可能会留空白。
4.4 盒子模型
- 盒子模型结构：内容(content) → 内边距(padding) → 边框(border) → 外边距(margin)
- 核心属性：
width、height、padding、border、margin、box-sizing
/* 默认：content-box，宽度只包含内容，不含 padding 和 border */
box-sizing: content-box;/* 推荐：border-box，宽度包含 padding 和 border，更易布局 */
box-sizing: border-box;/* 推荐全局设置，减少计算误差 */
* {box-sizing: border-box;
}
4.5 布局（display、flex、grid、定位）
4.5.1 display 属性
block：块级元素，占满一行（如div,p）inline：行内元素，不独占一行（如a,span）inline-block：行内块元素，可设置宽高none：隐藏元素，不占空间
4.5.2 Flexbox 布局
<div class="container"><div class="item">A</div><div class="item">B</div><div class="item">C</div>
</div>
.container {display: flex;flex-direction: row; /* 主轴方向 */justify-content: space-between; /* 主轴对齐方式 */align-items: center; /* 交叉轴对齐方式 */
}
.item {flex: 1; /* 子元素可伸展占满剩余空间 */
}
- 主轴（main axis）：由
flex-direction决定方向。 - 交叉轴（cross axis）：垂直于主轴方向。
常用属性：
| 属性 | 说明 |
|---|---|
flex-direction | row |
justify-content | flex-start |
align-items | flex-start |
flex (子元素) | 控制伸缩，常用 flex: 1; 表示等分剩余空间 |
order (子元素) | 改变元素显示顺序 |
4.5.3 Grid 布局（进阶）
-
适合二维布局（行和列），初学者建议先掌握 Flex，后续深入学习 Grid。
4.5.4 定位（position）
父相子绝，如果要对子元素定位，一定要先确定父元素的位置，使用relative相对定位父元素的位置，再对需要定位的子元素使用absolute定位，就可以使用top，left等来移动子元素的位置了，此时的子元素是脱离文档流的。
常见误解：absolute 定位不是相对于 body，而是相对于最近的非 static 定位祖先。
| 定位类型 | 说明 |
|---|---|
| static | 默认，元素按文档流排列，不受 top/right/bottom/left 影响 |
| relative | 相对定位，元素仍占据原位置，但可用 top/left 等调整视觉位置 |
| absolute | 绝对定位，脱离文档流，相对最近的已定位祖先定位（非 static 的祖先） |
| fixed | 固定定位，相对于视口固定，滚动时不移动 |
| sticky | 粘性定位，滚动到指定阈值时表现为 fixed，之前表现为 static，常用于吸顶导航 |
示例：
.header {position: sticky;top: 0;background: #fff;
}
4.6 其他常用属性
overflow:hidden|scroll|auto，控制内容溢出行为z-index: 层级控制，需配合定位使用transition: 过渡动画transform: 位移、缩放、旋转等变换
5. 常见不明概念详解
5.1 盒子模型（Box Model）
5.1.1 盒子构成
网页元素被视为一个盒子，如图所示盒子可以由以下部分组成包含：
- 内容区（content）：内容区是盒子内部存放实际内容的区域，比如文字、图片等。
- 内边距（padding）:内边距是内容区与盒子边框之间的空白区域，用于控制内容与边框的距离。
- 边框（border）：边框位于内边距和外边距之间，包围着内容和内边距，可以设置宽度、样式和颜色。
- 外边距（margin）：外边距是盒子与其他外部元素之间的距离，用于控制盒子与父元素或相邻元素的间隔。
理解顺序和大小计算有助于布局。推荐使用 box-sizing: border-box;，这样 width 包含内容、内边距和边框，更直观。
5.1.2 box-sizing属性
1. 什么是 box-sizing？
box-sizing 是 CSS 中用来控制元素宽高（width 和 height）计算方式的属性。它决定了设置的宽高是否包含内边距（padding）和边框（border）。
2. 两种常见取值及区别
| 取值 | 计算方式说明 | 计算示意 |
|---|---|---|
content-box | 默认值。width 和 height 只包含内容区大小，不包括内边距和边框。实际元素占用宽度 = 内容宽度 + 内边距 + 边框。 | 设定 width: 200px; padding: 10px; border: 5px;，元素实际宽度 = 200 + 102 + 52 = 230px。 |
border-box | width 和 height 包含内容区、内边距和边框。即设置的宽高是元素实际占用的总宽高。 | 设定 width: 200px; padding: 10px; border: 5px;，内容区宽度自动缩小为 200 - 102 - 52 = 160px。 |
3. 为什么要使用 border-box
- 更易于布局计算：设置元素宽高时，无需再额外计算内边距和边框，避免尺寸超出预期。
- 减少布局错误：避免因内边距和边框增加元素尺寸导致布局错乱。
- 现代项目推荐：多数现代 CSS 框架和项目都会在全局设置
* { box-sizing: border-box; }，统一盒模型计算方式。
5.2 行内 / 块级 / 行内块 元素本质
| 类型 | 特点 | 例子 |
|---|---|---|
| 块级元素 | 独占一行，宽度默认撑满父容器 | div, p |
| 行内元素 | 与其他元素在同一行显示，不能设置宽高（图片除外） | a, span |
| 行内块元素 | 介于两者，可在一行显示且能设置宽高 | img, button |
5.3 z-index 和堆叠上下文（stacking context）
z-index控制元素前后显示顺序，但只有在元素有定位（position非static）或满足特定条件时生效。- 堆叠上下文是浏览器创建的独立层级环境，内部元素
z-index只在该上下文内比较，不影响外部。 - 产生新堆叠上下文的条件包括：
- 元素有
position且z-index不为auto opacity小于 1- CSS 变换（
transform） filter、mix-blend-mode等
- 元素有
5.4 常见单位说明
| 单位 | 说明 | 推荐用法 |
|---|---|---|
| px | 绝对像素 | 精确控制，适合边框、图像尺寸 |
| em | 相对于父元素字体大小（复合） | 用于字体大小、间距，需注意继承影响 |
| rem | 相对于根元素（html）字体大小 | 更稳定，推荐用于响应式字体和间距 |
| vw/vh | 相对于视口宽度/高度（1vw=视口宽度1%） | 适合全屏布局和响应式设计 |
6. 常见错误与易踩坑点
- 忘记设置
box-sizing: border-box;，导致内边距和边框增加元素实际大小，布局错乱。 - 使用
float布局后忘记清除浮动，推荐用现代布局flex或grid替代。 - 过度使用
position: absolute;导致响应式和流式布局丢失。 z-index失效通常因为元素没有定位或被包含在新的堆叠上下文中。- 使用
target="_blank"打开新窗口时，忘记加rel="noopener noreferrer"，存在安全风险（防止新窗口通过window.opener操控原窗口）。 - 过度使用
!important，导致样式难以维护和调试。