Skip to main content

CSS核心基础与现代样式技术

CSS（层叠样式表）是控制网页外观与布局的核心技术，从简单的样式装饰发展为强大的布局系统和动画引擎。现代CSS不仅提供了丰富的视觉效果，还支持复杂的响应式布局和交互动画。

核心价值

CSS = 样式控制 + 布局系统 + 动画效果 + 响应式设计

  • 🎨 样式控制：颜色、字体、装饰等视觉效果
  • 📐 布局系统：Flexbox、Grid、定位等布局方案
  • ✨ 动画效果：过渡、关键帧动画、变换
  • 📱 响应式设计：适配不同设备和屏幕尺寸
  • 🔧 现代特性：CSS变量、容器查询、逻辑属性
  • ⚡ 性能优化：硬件加速、重绘重排优化

1. CSS基础概念与语法​

1.1 CSS工作原理​

CSS通过选择器匹配HTML元素，并应用相应的样式规则。理解CSS的工作原理对于编写高效的样式代码至关重要。

1.2 CSS语法结构​

CSS规则由选择器和声明块组成，遵循严格的语法规范：

CSS基础语法结构
css
1/* 选择器 { 属性: 值; } */
2h1 {
3  color: blue;
4  font-size: 24px;
5  font-weight: bold;
6}
7
8/* 多个选择器 */
9h1, h2, h3 {
10  font-family: 'Arial', sans-serif;
11  margin-bottom: 1rem;
12}
13
14/* 嵌套选择器 */
15.container .header h1 {
16  color: #333;
17  text-align: center;
18}

CSS引入方式​

CSS可以通过三种方式添加到HTML中：

  1. 内联样式：直接在HTML元素上使用style属性

    html
    1<p style="color: red; font-size: 18px;">这是一段带有内联样式的文本</p>

  2. 内部样式表：在HTML文档的<head>部分使用<style>标签

    html
    1<head>
    2  <style>
    3    p {
    4      color: red;
    5      font-size: 18px;
    6    }
    7  </style>
    8</head>

  3. 外部样式表：创建单独的CSS文件，然后在HTML中引用（推荐方法）

    html
    1<head>
    2  <link rel="stylesheet" href="styles.css">
    3</head>

CSS层叠与优先级​

当多个样式规则应用于同一元素时，CSS遵循特定的优先级规则来确定哪个样式生效：

  1. 重要性：!important > 正常声明
  2. 特异性：内联样式 > ID选择器 > 类/属性/伪类选择器 > 元素/伪元素选择器
  3. 源代码顺序：后定义的样式优先级更高

例如：

css
1p { color: red; }                         /* 特异性: 0,0,0,1 */
2.text { color: blue; }                    /* 特异性: 0,0,1,0 */
3#unique { color: green; }                 /* 特异性: 0,1,0,0 */
4p.text#unique { color: yellow; }          /* 特异性: 0,1,1,1 */
5p { color: purple !important; }           /* !important 规则覆盖所有 */

选择器​

CSS选择器允许您精确定位要样式化的HTML元素。

基本选择器​

css
1/* 元素选择器 */
2p { color: blue; }
3
4/* 类选择器 */
5.highlight { background-color: yellow; }
6
7/* ID选择器 */
8#header { font-size: 24px; }
9
10/* 通用选择器 */
11* { margin: 0; padding: 0; }
12
13/* 属性选择器 */
14[type="text"] { border: 1px solid gray; }

组合选择器​

css
1/* 后代选择器 */
2nav a { color: blue; }
3
4/* 子元素选择器 */
5nav > a { font-weight: bold; }
6
7/* 相邻兄弟选择器 */
8h1 + p { margin-top: 0; }
9
10/* 通用兄弟选择器 */
11h1 ~ p { color: gray; }
12
13/* 组合选择器 */
14div, span, p { line-height: 1.5; }

伪类和伪元素​

伪类用于定义元素的特殊状态：

css
1/* 链接状态伪类 */
2a:link { color: blue; }
3a:visited { color: purple; }
4a:hover { text-decoration: underline; }
5a:active { color: red; }
6
7/* 结构伪类 */
8li:first-child { font-weight: bold; }
9li:last-child { border-bottom: none; }
10li:nth-child(odd) { background-color: #f2f2f2; }
11li:nth-child(3n+1) { color: red; }

伪元素用于创建不在DOM中的元素：

css
1/* 在元素内容之前/之后插入 */
2.box::before {
3  content: "❄";
4  margin-right: 8px;
5}
6
7.box::after {
8  content: "";
9  display: block;
10  clear: both;
11}
12
13/* 选择首字母/首行 */
14p::first-letter { font-size: 2em; }
15p::first-line { font-weight: bold; }
16
17/* 文本选择样式 */
18p::selection { background: yellow; color: black; }

盒模型​

CSS盒模型是网页布局的基础，每个HTML元素都被视为一个矩形盒子。

盒模型组成​

标准盒模型由以下部分组成，从内到外依次是：

  1. 内容区域（Content）：显示元素内容的区域
  2. 内边距（Padding）：内容与边框之间的空间
  3. 边框（Border）：围绕内容和内边距的边界
  4. 外边距（Margin）：元素与其他元素之间的空间
css
1div {
2  /* 内容区域 */
3  width: 300px;
4  height: 200px;
5  
6  /* 内边距 */
7  padding: 20px;
8  /* 或单独设置 */
9  padding-top: 10px;
10  padding-right: 15px;
11  padding-bottom: 10px;
12  padding-left: 15px;
13  
14  /* 边框 */
15  border: 1px solid black;
16  /* 或单独设置 */
17  border-width: 1px;
18  border-style: solid;
19  border-color: black;
20  
21  /* 外边距 */
22  margin: 30px;
23  /* 或单独设置 */
24  margin-top: 20px;
25  margin-right: 15px;
26  margin-bottom: 20px;
27  margin-left: 15px;
28}

标准盒模型与IE盒模型​

  1. 标准盒模型（content-box）：width和height只应用于内容区域

    css
    1.box {
    2  box-sizing: content-box; /* 默认值 */
    3  width: 100px;
    4  padding: 10px;
    5  border: 5px solid black;
    6  /* 实际宽度 = 100px + 10px*2 + 5px*2 = 130px */
    7}

  2. IE盒模型（border-box）：width和height包含内容、内边距和边框

    css
    1.box {
    2  box-sizing: border-box;
    3  width: 100px;
    4  padding: 10px;
    5  border: 5px solid black;
    6  /* 实际宽度 = 100px（内容区域会被压缩） */
    7}

外边距折叠​

当两个垂直外边距相遇时，它们会合并为一个外边距，高度等于较大的那个外边距值，这称为外边距折叠：

css
1.box1 { margin-bottom: 20px; }
2.box2 { margin-top: 30px; }
3/* 两个盒子之间的实际间距是30px，而不是50px */

防止外边距折叠的方法：

  • 使用padding代替margin
  • 使用border或padding将元素隔开
  • 使用BFC（块级格式化上下文）

布局​

CSS提供了多种方式来控制网页布局。

流式布局​

流式布局是CSS的默认布局方式，元素按照文档流依次排列。

css
1p {
2  /* 块级元素默认占满整行 */
3  display: block;
4}
5
6span {
7  /* 内联元素在一行内排列 */
8  display: inline;
9}
10
11img {
12  /* 既有块级特性又有内联特性 */
13  display: inline-block;
14}

定位​

CSS定位允许您从正常文档流中移动元素：

css
1/* 相对定位 - 相对于元素原本位置 */
2.relative {
3  position: relative;
4  top: 20px;
5  left: 30px;
6}
7
8/* 绝对定位 - 相对于最近的已定位祖先元素 */
9.absolute {
10  position: absolute;
11  top: 50px;
12  right: 10px;
13}
14
15/* 固定定位 - 相对于视口 */
16.fixed {
17  position: fixed;
18  bottom: 20px;
19  right: 20px;
20}
21
22/* 粘性定位 - 根据滚动位置在相对和固定之间切换 */
23.sticky {
24  position: sticky;
25  top: 0;
26}

Flexbox布局​

Flexbox是一维布局模型，专为布局而设计：

css
1/* 父容器 */
2.container {
3  display: flex;
4  flex-direction: row; /* 或column */
5  justify-content: space-between; /* 主轴对齐方式 */
6  align-items: center; /* 交叉轴对齐方式 */
7  flex-wrap: wrap; /* 换行处理 */
8  gap: 10px; /* 项目间距 */
9}
10
11/* 子项 */
12.item {
13  flex: 1; /* 占用剩余空间的比例 */
14  /* 或单独设置 */
15  flex-grow: 1;
16  flex-shrink: 1;
17  flex-basis: auto;
18  
19  align-self: flex-start; /* 单独设置交叉轴对齐 */
20  order: 2; /* 改变排列顺序 */
21}

Grid布局​

Grid是一个强大的二维布局系统，用于创建复杂的网格设计：

css
1/* 父容器 */
2.grid-container {
3  display: grid;
4  grid-template-columns: repeat(3, 1fr); /* 3列，宽度相等 */
5  grid-template-rows: 100px 200px auto; /* 3行，指定高度 */
6  gap: 20px; /* 网格间距 */
7  
8  /* 命名网格区域 */
9  grid-template-areas:
10    "header header header"
11    "sidebar content content"
12    "footer footer footer";
13}
14
15/* 子项 */
16.header { grid-area: header; }
17.sidebar { grid-area: sidebar; }
18.content { grid-area: content; }
19.footer { grid-area: footer; }
20
21/* 使用网格线放置项目 */
22.item {
23  grid-column: 1 / 3; /* 从第1条列线到第3条列线 */
24  grid-row: 2 / 4; /* 从第2条行线到第4条行线 */
25}

响应式设计​

响应式设计使网站能够适应不同设备和屏幕尺寸。

媒体查询​

媒体查询允许您根据设备特性（如屏幕尺寸）应用不同的样式：

css
1/* 基础样式 - 适用于所有设备 */
2body {
3  font-size: 16px;
4}
5
6/* 平板电脑样式 */
7@media screen and (max-width: 1024px) {
8  body {
9    font-size: 14px;
10  }
11  
12  .container {
13    width: 90%;
14  }
15}
16
17/* 手机样式 */
18@media screen and (max-width: 480px) {
19  body {
20    font-size: 12px;
21  }
22  
23  .container {
24    width: 100%;
25  }
26  
27  .sidebar {
28    display: none;
29  }
30}
31
32/* 打印样式 */
33@media print {
34  .no-print {
35    display: none;
36  }
37  
38  body {
39    font-size: 12pt;
40    color: black;
41  }
42}

视口单位​

响应式设计中的关键单位：

css
1.hero {
2  /* 视口宽度的100% */
3  width: 100vw;
4  
5  /* 视口高度的50% */
6  height: 50vh;
7}
8
9.text {
10  /* 1vmin = 1vw 或 1vh（取较小值） */
11  font-size: 5vmin;
12  
13  /* 1vmax = 1vw 或 1vh（取较大值） */
14  margin: 2vmax;
15}

响应式图像​

css
1img {
2  /* 图像最大为容器宽度的100% */
3  max-width: 100%;
4  height: auto;
5}

响应式排版​

css
1html {
2  /* 基础字体大小 */
3  font-size: 16px;
4}
5
6h1 {
7  /* 使用rem单位（相对于根元素html的字体大小） */
8  font-size: 2.5rem;
9}
10
11p {
12  /* 使用em单位（相对于父元素的字体大小） */
13  font-size: 1em;
14  line-height: 1.5;
15  margin-bottom: 1.2em;
16}

动画与过渡​

CSS提供了强大的方式来创建动画和平滑过渡。

过渡​

过渡允许CSS属性值平滑地变化：

css
1.button {
2  background-color: blue;
3  color: white;
4  padding: 10px 20px;
5  border-radius: 4px;
6  
7  /* 过渡设置 */
8  transition-property: background-color, transform;
9  transition-duration: 0.3s;
10  transition-timing-function: ease-in-out;
11  transition-delay: 0s;
12  
13  /* 简写形式 */
14  /* transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out; */
15}
16
17.button:hover {
18  background-color: darkblue;
19  transform: scale(1.05);
20}

动画​

使用@keyframes规则创建更复杂的动画序列：

css
1/* 定义动画 */
2@keyframes bounce {
3  0% {
4    transform: translateY(0);
5  }
6  50% {
7    transform: translateY(-20px);
8  }
9  100% {
10    transform: translateY(0);
11  }
12}
13
14/* 应用动画 */
15.ball {
16  width: 50px;
17  height: 50px;
18  background-color: red;
19  border-radius: 50%;
20  
21  /* 动画设置 */
22  animation-name: bounce;
23  animation-duration: 1s;
24  animation-timing-function: ease-in-out;
25  animation-delay: 0s;
26  animation-iteration-count: infinite;
27  animation-direction: normal;
28  animation-fill-mode: forwards;
29  animation-play-state: running;
30  
31  /* 简写形式 */
32  /* animation: bounce 1s ease-in-out infinite; */
33}

变换​

使用transform属性对元素进行2D或3D转换：

css
1.element {
2  /* 2D变换 */
3  transform: translate(50px, 20px);  /* 平移 */
4  transform: rotate(45deg);          /* 旋转 */
5  transform: scale(1.5);             /* 缩放 */
6  transform: skew(10deg, 5deg);      /* 倾斜 */
7  
8  /* 组合变换（从右到左应用） */
9  transform: translate(50px, 20px) rotate(45deg) scale(1.5);
10  
11  /* 3D变换 */
12  transform: rotateX(45deg);         /* 沿X轴旋转 */
13  transform: rotateY(45deg);         /* 沿Y轴旋转 */
14  transform: rotateZ(45deg);         /* 沿Z轴旋转 */
15  transform: perspective(500px) rotateY(45deg); /* 添加透视效果 */
16}

CSS预处理器​

CSS预处理器是扩展CSS功能的工具，如Sass、Less和Stylus。它们添加了变量、嵌套规则、混合、函数等功能。

Sass示例​

scss
1// 变量
2$primary-color: #4a6cf7;
3$secondary-color: #33d687;
4$font-stack: 'Inter', sans-serif;
5
6// 混合宏
7@mixin flex-center {
8  display: flex;
9  justify-content: center;
10  align-items: center;
11}
12
13@mixin responsive($breakpoint) {
14  @if $breakpoint == tablet {
15    @media (max-width: 768px) { @content; }
16  } @else if $breakpoint == mobile {
17    @media (max-width: 480px) { @content; }
18  }
19}
20
21// 嵌套规则
22.card {
23  background: white;
24  border-radius: 8px;
25  padding: 20px;
26  
27  &:hover {
28    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
29  }
30  
31  .card-title {
32    color: $primary-color;
33    font-family: $font-stack;
34    
35    // 使用混合宏
36    @include flex-center;
37  }
38  
39  // 响应式设计
40  @include responsive(mobile) {
41    padding: 10px;
42  }
43}
44
45// 继承
46.button {
47  padding: 10px 20px;
48  border: none;
49  border-radius: 4px;
50}
51
52.primary-button {
53  @extend .button;
54  background-color: $primary-color;
55  color: white;
56}
57
58.secondary-button {
59  @extend .button;
60  background-color: $secondary-color;
61  color: white;
62}

面试题​

1. 请解释CSS中的盒模型及box-sizing属性的作用。​

答案：
CSS盒模型描述了元素占用的空间组成，从内到外包括：内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。

box-sizing属性决定了width和height如何应用于元素：

  • content-box（标准盒模型）：width/height只包含内容区域
  • border-box（IE盒模型）：width/height包含内容区域、内边距和边框

在响应式设计中，border-box通常更容易使用，因为元素的总宽度不会因为添加内边距或边框而改变。

2. CSS选择器的优先级是如何计算的？​

答案：
CSS选择器优先级按以下规则计算（从高到低）：

  1. 内联样式：1000分
  2. ID选择器：100分
  3. 类选择器、属性选择器和伪类：10分
  4. 元素选择器和伪元素：1分

组合多个选择器时，将各部分的分数相加得到总优先级。如果优先级相同，则后定义的样式会覆盖先定义的样式。!important规则会覆盖所有其他样式，但应谨慎使用。

3. 请解释Flexbox和Grid布局的区别及适用场景。​

答案：
Flexbox（弹性盒子）：

  • 一维布局系统，主要处理行或列
  • 内容优先，根据内容大小分配空间
  • 适用场景：导航菜单、卡片布局、居中元素、简单的一维排列

Grid（网格）：

  • 二维布局系统，同时处理行和列
  • 布局优先，创建预定义的网格结构
  • 适用场景：整体页面布局、复杂的二维布局、不规则布局

选择使用哪种布局取决于需求：如果需要在单一方向（行或列）上布局元素，使用Flexbox；如果需要同时在行和列上创建布局，使用Grid。实际项目中，两者经常结合使用。

4. 什么是CSS变量（自定义属性），它们有什么优势？​

答案：
CSS变量（自定义属性）是用户定义的实体，可以在整个文档中重复使用：

css
1:root {
2  --primary-color: #4a6cf7;
3  --secondary-color: #33d687;
4}
5
6.button {
7  background-color: var(--primary-color);
8}

优势：

  • 减少重复代码，便于维护
  • 可通过JavaScript动态修改
  • 支持级联和继承
  • 可在媒体查询中重新定义，增强响应式设计
  • 原生支持，不需要预处理器

5. 如何实现CSS的垂直和水平居中？​

答案：
实现元素的垂直和水平居中有多种方法：

Flexbox方法（最现代的方法）：

css
1.parent {
2  display: flex;
3  justify-content: center; /* 水平居中 */
4  align-items: center;     /* 垂直居中 */
5  height: 300px;
6}

Grid方法：

css
1.parent {
2  display: grid;
3  place-items: center;     /* 垂直和水平居中 */
4  height: 300px;
5}

使用定位和变换：

css
1.parent {
2  position: relative;
3  height: 300px;
4}
5.child {
6  position: absolute;
7  top: 50%;
8  left: 50%;
9  transform: translate(-50%, -50%);
10}

使用margin: auto和绝对定位：

css
1.parent {
2  position: relative;
3  height: 300px;
4}
5.child {
6  position: absolute;
7  top: 0;
8  bottom: 0;
9  left: 0;
10  right: 0;
11  margin: auto;
12  height: 100px; /* 必须设置高度和宽度 */
13  width: 100px;
14}

参与讨论