二.前端web开发:零基础吃透 CSS 核心知识

系列文章目录

提示：这里是系列文章的专栏

并不喜欢吃鱼的C++专栏

提示：以下是文章目录哦!

文章目录

系列文章目录

文章目录

前言

[一、CSS 基础概念与引入方式](#一、CSS 基础概念与引入方式)

[1.1 什么是 CSS](#1.1 什么是 CSS)

易错点补充

[1.2 CSS 三种引入方式（优缺点 + 代码）](#1.2 CSS 三种引入方式（优缺点 + 代码）)

[二、CSS 全类型选择器（权重 + 代码 + 优先级）](#二、CSS 全类型选择器（权重 + 代码 + 优先级）)

[2.1 基础选择器](#2.1 基础选择器)

2.1.1全局选择器*：匹配所有元素，一般初始化清除内外边距

[margin 和 padding 分别是什么？](#margin 和 padding 分别是什么？)

1）padding（内边距）

2）margin（外边距）

[2.1.2 元素（标签）选择器：直接写标签名，选中页面所有同标签](#2.1.2 元素（标签）选择器：直接写标签名，选中页面所有同标签)

[2.1.3 类选择器 .类名：灵活复用，一个标签可多类（空格分隔）](#2.1.3 类选择器 .类名：灵活复用，一个标签可多类（空格分隔）)

2.1.4. ID 选择器 #id名：页面唯一，只能用一次

[2.2 合并选择器（逗号分隔，提取公共样式）](#2.2 合并选择器（逗号分隔，提取公共样式）)

[2.3 选择器优先级（从高到低）](#2.3 选择器优先级（从高到低）)

[三、四大基础样式属性（字体 / 背景 / 文本 / 表格）](#三、四大基础样式属性（字体 / 背景 / 文本 / 表格）)

[3.1 字体属性 font 系列](#3.1 字体属性 font 系列)

[3.2 背景属性 background 系列](#3.2 背景属性 background 系列)

[3.3 文本属性 text 系列](#3.3 文本属性 text 系列)

[3.4 表格属性 table系列](#3.4 表格属性 table系列)

四、关系选择器（父子、兄弟层级选择）

[4.1 后代选择器 E F（空格）](#4.1 后代选择器 E F（空格）)

[4.2 子代选择器 E>F（大于号）](#4.2 子代选择器 E>F（大于号）)

[4.3 相邻兄弟 E+F（加号）](#4.3 相邻兄弟 E+F（加号）)

[4.4 通用兄弟 E~F（波浪线）](#4.4 通用兄弟 E~F（波浪线）)

[五、CSS 盒子模型（页面布局核心）](#五、CSS 盒子模型（页面布局核心）)

[5.1 盒子四层结构（从内到外）](#5.1 盒子四层结构（从内到外）)

易错补充

[六、Flex 弹性盒布局（现代主流布局）](#六、Flex 弹性盒布局（现代主流布局）)

6.1定义

[6.2 基础概念](#6.2 基础概念)

[6.3 父容器常用属性](#6.3 父容器常用属性)

[6.4 子元素属性 flex：分配剩余空间](#6.4 子元素属性 flex：分配剩余空间)

七、文档流、浮动与清除浮动

[7.1 标准文档流](#7.1 标准文档流)

[7.2 浮动 float](#7.2 浮动 float)

[7.3 清除浮动（解决高度塌陷，三种方案）](#7.3 清除浮动（解决高度塌陷，三种方案）)

[八、定位 position 四种模式](#八、定位 position 四种模式)

[8.1 四种定位属性](#8.1 四种定位属性)

[8.2 z-index 层级](#8.2 z-index 层级)

[九、CSS3 新视觉特性（圆角、阴影）](#九、CSS3 新视觉特性（圆角、阴影）)

[9.1 圆角 border-radius](#9.1 圆角 border-radius)

[9.2 盒子阴影 box-shadow](#9.2 盒子阴影 box-shadow)

[十、CSS3 动画 animation](#十、CSS3 动画 animation)

[10.1 两步写动画](#10.1 两步写动画)

[十一、响应式媒体查询（适配手机 / 电脑）](#十一、响应式媒体查询（适配手机 / 电脑）)

[11.1 前置必须加视口 meta 标签（移动端适配基础）](#11.1 前置必须加视口 meta 标签（移动端适配基础）)

[11.2 媒体查询语法](#11.2 媒体查询语法)

[十二、性能优化方案（雪碧图 + 字体图标）](#十二、性能优化方案（雪碧图 + 字体图标）)

[12.1 CSS 雪碧图（精灵图）](#12.1 CSS 雪碧图（精灵图）)

[12.2 字体图标（阿里 iconfont）](#12.2 字体图标（阿里 iconfont）)

前言

提示：这里可以添加本文要记录的大概内容：

这份教程完全基于 CSS3 基础核心知识点整理，全程搭配极简可运行代码片段，不堆砌难懂专业术语，每个重难点附带易错点提醒。本文覆盖：CSS 基础语法 & 三种引入方式、全类型选择器、字体 / 背景 / 文本 / 表格样式、关系选择器、盒子模型、Flex 弹性布局、文档流与浮动、定位、CSS3 圆角 / 阴影 / 动画、媒体查询、雪碧图 & 字体图标，是前端 CSS 入门最全学习路线，跟着敲一遍就能掌握网页美化核心技能

提示：以下是本篇文章正文内容

一、CSS 基础概念与引入方式

1.1 什么是 CSS

定义：层叠样式表，专门给 HTML 页面做美化，统一页面样式
文件后缀：.css
核心语法结构：选择器 + 一条 / 多条样式声明

示例:

html 复制代码

<!-- 语法标准结构 -->
<style>
/* h1是选择器，color、font-size是属性，blue、12px是值 */
h1 {
  color: blue;
  font-size: 12px;
}
</style>
<h1>测试标题</h1>

运行结果:

易错点补充

属性和值用冒号: 分隔，每条声明结尾用分号; ；很多新手会搞反，写成color=red，这是错误写法

1.2 CSS 三种引入方式（优缺点 + 代码）

行内（内联）样式：标签内写 style

html 复制代码

<p style="background: orange; font-size: 24px;">行内样式测试</p>

缺点：代码杂乱，多个页面无法复用，维护麻烦

内部样式：head 里<style>标签

html 复制代码

<head>
  <style>
    h1 { background: red; }
  </style>
</head>
<body>
  <h1>内部样式</h1>
</body>

适用：单页面独有样式，多页面复用不方便

外部样式（推荐）：单独.css文件，link 引入

html 复制代码

<!-- html页面 -->
<link rel="stylesheet" type="text/css" href="style.css">

css 复制代码

/* style.css 文件 */
h1 { background: pink; }

优点：全站共用一套样式，修改一次全部页面生效

二、CSS 全类型选择器（权重 + 代码 + 优先级）

2.1 基础选择器

2.1.1全局选择器`*`：匹配所有元素，一般初始化清除内外边距

css 复制代码

* {
  margin: 0;
  padding: 0;
}

margin 和 padding 分别是什么？

1）padding（内边距）

含义：盒子内容和盒子边框之间的距离，相当于快递盒里包裹商品的泡沫。
作用：撑开内容和边框，给文字 / 图片留出内部空白区域，背景色会铺满 padding 区域。
举个生活化例子：一个水杯（内容）放在纸盒里，水杯和纸盒内壁之间的泡沫厚度 = padding。
代码直观演示：

css 复制代码

.box{
  width:100px;
  height:100px;
  padding:20px; /* 上下左右内部空出20px距离 */
  background:orange;
  border:1px solid black;
}

运行结果:

2）margin（外边距）

含义：盒子边框和其他盒子 / 页面边缘之间的外部距离，相当于两个快递盒并排摆放时中间留出的空隙。
作用：控制多个盒子之间的间距，margin 区域是完全透明的，不会显示盒子背景色。
生活化例子：两个快递盒子并排摆放，中间隔开的缝隙 = margin。
代码直观演示：

css 复制代码

.box{
  width:100px;
  height:100px;
  padding:10px;
  margin:30px; /* 盒子四周和别的元素隔开30px空白 */
  background:orange;
  border:1px solid black;
}

运行结果:

权重：0（最低）

2.1.2 元素（标签）选择器：直接写标签名，选中页面所有同标签

css 复制代码

/* 所有p标签文字14px */
p { font-size:14px; }

css 复制代码

<p>测试段落1</p>
<p>测试段落2</p>

运行结果:

权重：1

2.1.3 类选择器 `.类名`：灵活复用，一个标签可多类（空格分隔）

css 复制代码

.one { width: 800px; }
.red-text { color: red; }

css 复制代码

<!-- 多个类用空格隔开，不能写多个class属性 -->
<h3 class="one red-text">多类名测试</h3>

运行结果:

权重：10

易错：类名不能以数字开头；<h3 class="a" class="b"> 这种写法错误

2.1.4. ID 选择器 `#id名`：页面唯一，只能用一次

css 复制代码

#title { border:3px dashed green; }

css 复制代码

<h2 id="title">唯一标题</h2>

权重：100

易错：同一个页面不能出现相同 id

2.2 合并选择器（逗号分隔，提取公共样式）

css 复制代码

/* 同时给.header、.footer设置高度 */
.header, .footer{
  height:300px;
}

2.3 选择器优先级（从高到低）

行内样式 (1000) > ID 选择器 (100) > 类选择器 (10) > 元素选择器 (1)>全局选择器(0)

css 复制代码

<p id="p1" class="p-class" style="color:orange">文字颜色测试</p>

css 复制代码

#p1 { color: green; }
.p-class { color: blue; }
p { color: red; }

运行结果:

三、四大基础样式属性（字体 / 背景 / 文本 / 表格）

3.1 字体属性 font 系列

1.color：文字颜色（4 种写法）

css 复制代码

div {
  color:red; /* 英文单词 */
  color:#ff0000; /* 十六进制 */
  color:rgb(255,0,0); /* rgb纯色 */
  color:rgba(255,0,0,.5); /* rgba带透明度 */
}

2.font-size：字号；chrome 浏览器最小支持 12px，小于 12px 不生效

3.font-weight：文字粗细；400=normal，700=bold

css 复制代码

p { font-weight: 900; } /* 最粗 */
div { font-weight: lighter; } /* 细体 */

运行结果:

4.font-style：斜体 italic / 默认正常 normal

5.font-family：字体，多字体逗号分隔，含空格字体加引号

3.2 背景属性 background 系列

| 属性 | 作用 | 示例代码 |
| background-color | 背景色 | .box{background-color: palevioletred;} |
| background-image | 背景图 | background-image: url("img.jpg") |
| background-repeat | 平铺方式 | no-repeat 不平铺 /repeat-x 水平平铺 |
| background-position | 图片位置 | center 居中 /left top 左上角 |

background-size	图片尺寸	cover 铺满盒子、contain 完整显示图片

完整示例：

css 复制代码

.box{
  width: 600px;
  height: 600px;
  background-color: #fcc;
  background-image: url("img1.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

易错：默认背景图会 x、y 双方向平铺，很多小白忘记写no-repeat

3.3 文本属性 text 系列

text-align：水平对齐 left/center/right
text-decoration：文本修饰 underline 下划线 /line-through 删除线
text-transform：大小写 capitalize 首字母大写 /uppercase 全大写
text-indent：首行缩进 text-indent:50px;

3.4 表格属性 table系列

核心属性：

border-collapse: collapse; 合并表格边框（必用，否则双线）
padding：单元格内边距
vertical-align：单元格文字垂直对齐完整代码示例：

css 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格vertical-align演示</title>
    <style>
        table, td { 
            border: 1px solid black; 
        }
        table { 
            border-collapse: collapse; 
            width: 100%; 
        }
        td { 
            height: 50px; 
            padding: 15px; 
            text-align: center;
            /* 开启垂直居中 */
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
        </tr>
    </table>
</body>
</html>

运行结果:

四、关系选择器（父子、兄弟层级选择）

4.1 后代选择器 E F（空格）

选中 E 里面所有层级的 F 元素

css 复制代码

ul li{ color:green; }

css 复制代码

<ul>
  <li>会被选中</li>
</ul>

4.2 子代选择器 E>F（大于号）

只选中 E直接子元素(就是离的最近的)，深层子元素不生效

css 复制代码

div>a{ color:red }

css 复制代码

<div>
  <a href="#">直接子a（变红）</a>
  <p><a href="#">孙子a，不会变红</a></p>
</div>

4.3 相邻兄弟 E+F（加号）

只选中紧贴 E 后面第一个兄弟 F，向下选择

css 复制代码

h1+p{ color:red; }

css 复制代码

<h1>标题</h1>
<p>第一个p（变红）</p>
<p>第二个p（无效果）</p>

4.4 通用兄弟 E~F（波浪线）

选中 E 后面所有同级兄弟 F

css 复制代码

h1~p{ color:red; }

css 复制代码

<h1>标题</h1>
<p>变红</p>
<p>变红</p>

五、CSS 盒子模型（页面布局核心）

5.1 盒子四层结构（从内到外）

content 内容 → padding 内边距 → border 边框 → margin 外边距通俗类比：快递盒

content：快递里面的商品
padding：商品泡沫
border：快递纸盒
margin：两个快递之间的空隙

代码示例:

css 复制代码

div{
  width: 100px;
  height: 100px;
  padding: 10px; /* 内容和边框距离 */
  border: 2px solid red; /* 边框 */
  margin: 10px; /* 盒子外部间距 */
  background: green;
}

易错补充

盒子实际宽度 = width + 左右 padding + 左右 border；很多小白以为盒子大小就是 width，布局时会出现宽度溢出问题。

六、Flex 弹性盒布局（现代主流布局）

6.1定义

弹性盒子是 CSS3 的一种新的布局模式 ,CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时,确保元素拥有恰当的行为的布局方式 ,引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容,器中的子元素进行排列、对齐和分配空白空间

6.2 基础概念

CSS3 弹性盒内容
弹性盒子由弹性容器(Flex container) 和弹性子元素(Flex item)组成,弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器,弹性容器内包含了一个或多个弹性子元素
温馨提示
弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局

完整基础代码：

css 复制代码

<div class="flex-box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

css 复制代码

.flex-box {
  display: flex; /* 开启弹性盒 */
  width: 400px;
  height: 250px;
  background: lightgrey;
}
.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: cornflowerblue;
}

运行结果:

6.3 父容器常用属性

flex-direction：排列方向 row 横向、column 纵向、row-reverse 反向横向
justify-content：主轴对齐（水平） center 居中 /flex-start 左对齐 /flex-end 右对齐
align-items：侧轴对齐（垂直） center 垂直居中

6.4 子元素属性 flex：分配剩余空间

css 复制代码

.item1 { flex:1; }
.item2 { flex:2; }
.item3 { flex:1; }

剩余空间按 1:2:1 分配宽度

高频实用技巧：盒子上下左右居中

css 复制代码

.flex-box {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

七、文档流、浮动与清除浮动

7.1 标准文档流

块元素自上而下排，行内元素从左到右
自带问题：空白折叠、行内元素底边对齐、无法并排顶部对齐
脱离文档流三种方式：浮动 float、绝对定位 absolute、固定定位 fixed；相对定位不脱离

7.2 浮动 float

属性值：left 左浮动 /right 右浮动，无上下浮动
浮动效果：元素浮到上层，父盒子高度塌陷（核心副作用）
容器宽度不足时，浮动元素自动换行，不会隐藏

css 复制代码

.box{
  width: 100px;
  height: 100px;
  background: yellow;
  float: left;
}

所有元素向左浮动
当所有元素同时浮动的时候，会变成水平摆放，向左或者向右

当容器不足时
当容器不足以横向摆放内容时候，会在下一行摆放

7.3 清除浮动（解决高度塌陷，三种方案）

浮动副作用
当元素设置 float 浮动后，该元素就会脱离文档流并向左 / 向右浮动

1.浮动元素会造成父元素高度塌陷
什么叫做高度塌陷,父盒子内部所有子元素都设置了 float 浮动， 子元素脱离标准文档流 ，父盒子识别不到内部子元素的高度，父盒子高度直接变成 0，这种现象就叫 高度塌陷（浮动塌陷） 。如上图中,未加入三个黄色方格时,父元素的容器长这样:

加入后:

正常不浮动时:

正常不浮动时，子元素会把父盒子 "撑起来"；子元素全部浮动飘走后，父盒子里面空了，高度归零，布局直接错乱
2.后续元素会受到影响

方案 1：给父盒子固定高度（简单，适配固定高度布局）
如果父元素高度塌陷，可以给父元素设置高度，撑开元素本身大小
原先:

css 复制代码

.container {
            border: 1px solid red;
        }

设置后:

css 复制代码

.container{
    height: 300px;
    width: 350px;
    border: 1px solid red;
}

结果:

方案 2：父盒子添加 overflow:hidden;

如果有父级塌陷，并且同级元素也收到了影响，可以使用 overflow 清除浮动 ,这种情况下，父布局不能设置高度
父级标签的样式里面加 : overflow:hidden; clear: both ;

css 复制代码

.container{
    width: 350px;
    border: 1px solid red;
    overflow: hidden;
    clear: both;
}

方案 3：伪类清除（推荐通用写法，无副作用）

如果有父级塌陷，并且同级元素也收到了影响，还可以使用伪对象方式处理为父标签添加伪类 after ,设置空的内容，并且使用 clear:both , 这种情况下，父布局不能设置高度

css 复制代码

.container::after {
  content: "";
  display: block;
  clear: both;
}

八、定位 position 四种模式

8.1 四种定位属性

1.relative 相对定位：不脱离文档流，相对于自身原本位置偏移

css 复制代码

.box{
  position: relative;
  left: 100px; /* 向右偏移100px */
}

2.absolute 绝对定位：脱离文档流，找最近带定位的父元素；无则相对于页面

css 复制代码

/* 父容器 */
.container { position: relative; }
/* 子盒子 */
.box { position:absolute; left:50px; top:0; }

3.fixed 固定定位：脱离文档流，始终相对于浏览器窗口（导航栏常用）

4.static 默认定位，无偏移效果

8.2 z-index 层级

仅对定位元素生效，数值越大越靠上层
z - index
属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

css 复制代码

.box1 { position:absolute; z-index: 2; }
.box2 { position:absolute; z-index: 1; }

九、CSS3 新视觉特性（圆角、阴影）

9.1 圆角 border-radius

单值：四个角统一；50% 直接把正方形变圆形

css 复制代码

/* 圆形 */
.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: green;
}
/* 四个角不同 */
.box { border-radius: 15px 50px 30px 5px; }

9.2 盒子阴影 box-shadow

语法：box-shadow: 水平偏移垂直偏移模糊度颜色;

css 复制代码

/* 水平0、垂直0、模糊10px、黑色半透明阴影 */
.box { box-shadow: 0 0 10px rgba(0,0,0,0.5); }

十、CSS3 动画 animation

10.1 两步写动画

@keyframes 定义动画变化过程
animation 在元素上调用动画完整呼吸变色示例：

name：动画名称，开发人员自己命名；
percent ：为百分比值，可以添加多个百分比值；

css 复制代码

/* 1.定义动画 */
@keyframes changeColor {
  0% { background: red; }
  50% { background: green; }
  100% { background: blue; }
}
/* 2.调用动画 */
.animate-box {
  width:300px;
  height:300px;
  animation: changeColor 5s linear infinite;
}

十一、响应式媒体查询（适配手机 / 电脑）

11.1 前置必须加视口 meta 标签（移动端适配基础）

使用设备的宽度作为视图宽度并禁止初始的缩放。在 <head> 标签里加入这个meta 标签

css 复制代码

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

11.2 媒体查询语法

css 复制代码

@media screen and (max-width: 768px) {
 /* 设备小于768px加载样式 */
    body{
        background-color: red;
   }
}
@media screen and (max-width: 992px) and
(min-width: 768px) {
     /* 设备小于768px但小于992px加载样式 */
     body{
     background-color: pink;
     }
}
@media screen and (min-width: 992px) {
 /* 设备大于992px加载样式 */
    body{
   background-color: green;
   }
}

十二、性能优化方案（雪碧图 + 字体图标）

12.1 CSS 雪碧图（精灵图）

CSS Sprite 也叫 CSS 精灵图、 CSS 雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,把多张小图标合并一张大图，减少网络请求原理： background-position 裁剪显示对应图标

css 复制代码

<i class="icon1"></i>
<i class="icon2"></i>
.icon1 {
    display: block;
    background-image: url(1.png);
    background-position: -20px 0;
    width: 45px;
    height: 70px;
}
.icon2 {
    display: block;
    background-image: url(1.png);
    background-position: -93px -84px;
    width: 45px;
    height: 70px;
}

12.2 字体图标（阿里 iconfont）

优点：放大不失真、可改颜色大小、请求少使用步骤：

1.html 引入图标 css 文件

css 复制代码

<link rel="stylesheet" href="./iconfont.css">

2.页面调用图标，css 控制样式

css 复制代码

<span class="iconfont icon-add-circle"></span>

css 复制代码

.iconfont { font-size: 35px; color: red; }

学习建议：

先吃透选择器权重、盒子模型、浮动清除三大核心
Flex 布局优先掌握，现在企业开发主流
动画、媒体查询多动手调试数值，直观感受变化
写页面优先使用外部样式 + 字体图标，提升代码整洁度和页面性能