版本: 3.1.0 文档中心

视觉美学：CSS3 现代布局艺术

1. 认识 CSS：网页的“化妆师”

CSS（Cascading Style Sheets，层叠样式表） 是一门用于控制网页外观和布局的语言。如果说 HTML 是网页的骨架（定义了有哪些内容），那么 CSS 就是网页的皮肤和衣服（定义了这些内容长什么样、排在哪里）。

💡 核心概念：什么是“层叠”？ “层叠”意味着样式是可以叠加和覆盖的。当多个样式规则同时作用于同一个元素时，浏览器会根据优先级和先后顺序，决定最终应用哪一层样式。

2. CSS 的三种引入方式

要让 CSS 作用于 HTML，我们需要将它们结合起来。企业级开发中，我们有三种方式：

2.1 内联样式（行内样式）

直接在 HTML 标签的 style 属性中编写 CSS 键值对。

<div style="color: red; font-size: 16px;">这是红色的文字</div>

适用场景：极少使用。通常只在通过 JavaScript 动态计算并强行修改某一个元素的具体样式时使用。
缺点：结构与表现严重耦合，复用性为零，代码极其臃肿。

2.2 内部样式表

在 HTML 文档的 <head> 区域，通过 <style> 标签定义 CSS。

<head>
  <style>
    div {
      color: blue;
    }
  </style>
</head>

适用场景：单页面活动宣传页，或者教学演示用的 Demo。
缺点：样式只能在当前页面复用，无法跨页面共享。

2.3 外部样式表（🌟 行业绝对规范）

将 CSS 代码写在独立的 .css 文件中，然后在 HTML 的 <head> 中通过 <link> 标签引入。

demo.css 文件：

div {
  color: green;
}

index.html 文件：

<head>
  <link rel="stylesheet" href="css/demo.css">
</head>

📈 专业站长视角：为什么强烈推荐外部样式？

代码高内聚低耦合：HTML 专心管结构，CSS 专心管样式，极易维护。

极致的性能优化：浏览器会**缓存（Cache）**外部的 CSS 文件。当用户访问网站的第二个页面时，无需重新下载样式表，极大提升了网页加载速度并节省了服务器带宽！

3. 核心选择器：精准定位元素

选择器的作用是：告诉浏览器，你想给哪个（或哪些）HTML 标签“化妆”。

3.1 基础选择器

元素选择器：直接使用标签名（如 p { color: red; }）。
类选择器（Class，最常用）：以点 . 开头（如 .btn { padding: 10px; }）。推荐使用！
ID 选择器：以井号 # 开头（如 #header { height: 60px; }）。不推荐用于写样式，应留给 JS 使用。

3.2 复合选择器与伪类（🌟 进阶必会）

在实际企业项目中，页面结构通常很复杂，我们需要更精准的定位：

后代选择器（空格）：.nav a 选中 .nav 内部的所有 <a> 标签。
**子代选择器（>）**：.list > li仅选中.list的**直接子级**
` 标签。
伪类选择器（:）：用于定义元素的特殊状态。最经典的是 :hover，是前端设计师实现交互反馈的基石。

.button {
  background-color: blue;
}
/* 鼠标悬停时的状态 */
.button:hover {
  background-color: darkblue;
  cursor: pointer; /* 鼠标变成小手 */
}

4. 样式冲突与优先级（CSS 权重）

如果多个选择器同时选中了同一个元素，并且设置了冲突的属性，浏览器会按照权重规则来决定：

!important：最高特权，无视一切（不到万不得已不要用）。
内联样式：<div style="...">。
ID 选择器：#id。
类选择器 / 伪类 / 属性选择器：.class, :hover。
元素选择器：div, p。
通配符选择器：*。
继承样式：从父元素继承来的样式（优先级最低）。

就近原则：如果权重完全一样，后定义的代码会覆盖先定义的代码。

5. 前端排版基石：盒模型（Box Model）

这是 CSS 布局中最核心、最伟大的物理概念。网页上的每一个元素，在浏览器看来都是一个矩形的盒子。

一个盒子由内到外由四个部分组成：

Content（内容）：盒子的核心，受 width 和 height 控制。
Padding（内边距）：内容与边框之间的距离（像快递盒里塞的海绵）。
Border（边框）：盒子的边缘（像快递盒的纸板）。
Margin（外边距）：盒子与别的盒子之间的距离。

🔥 现代 CSS 必写代码：box-sizing: border-box; 默认情况下，给盒子加 padding 或 border 会向外撑大盒子原本设定的 width，导致排版错乱。现代开发中，必须在全局加入以下代码，让 width 包含内边距和边框，彻底告别尺寸计算噩梦：
* {
  box-sizing: border-box;
}

6. 网页布局的核心体系

脱离了基础的盒模型，现代网页的宏观排版主要依靠 Flexbox、Grid 和定位系统。它们解决的问题并不完全一样，越早区分清楚，后面写布局越不容易乱。

6.1 弹性布局：Flexbox

现代网页布局的首选方案（取代了容易出 Bug 的传统浮动 float 布局）。完美解决“水平垂直居中”等千古难题：

.container {
  display: flex;             /* 开启弹性布局 */
  justify-content: center;   /* 主轴（水平）居中 */
  align-items: center;       /* 交叉轴（垂直）居中 */
  gap: 20px;                 /* 内部子元素的间距（现代 CSS 推荐写法） */
}

Flex 更适合：

一维布局（主要处理一行或一列）
导航栏、按钮组、卡片横向排列
元素对齐、分布、居中

6.2 网格布局：Grid

如果说 Flex 更擅长处理“一条轴线上的排列”，那么 Grid 更适合处理“二维布局”。

例如后台管理面板、图文卡片墙、复杂页面分区，用 Grid 往往更自然。

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr;
  gap: 16px;
}

上面这段代码可以粗略理解为：

页面分成两列：左侧 240px 侧边栏，右侧剩余空间
页面分成两行：顶部 60px 头部，下方主体内容
每个区域之间间隔 16px

Grid 更适合：

二维布局
页面骨架搭建
卡片宫格排列
复杂区域分栏

6.3 定位：Positioning

用于将元素放置在屏幕的特定位置（如固定导航栏、悬浮弹窗）。

static：默认文档流。
relative（相对定位）：相对于自己原来的位置微调，不脱离文档流。
absolute（绝对定位）：脱离文档流，浮在其他元素上方。
fixed（固定定位）：相对于浏览器窗口定位（常用于滚动页面时永远固定在顶部的导航栏）。
sticky（粘性定位）：滚动到特定位置时自动“吸顶”。

👨‍🏫 行业金科玉律：“子绝父相” 如果你想用 absolute 把一个子元素固定在父元素内部（比如卡片右上角的“热门”标签），你必须给父元素设置 position: relative;，子元素设置 position: absolute;。否则子元素会飞到整个页面的角落！

6.4 BFC：为什么盒子不会老老实实排版

在很多布局问题里，你会遇到这些奇怪现象：

父元素高度塌陷
浮动元素把后面的内容“顶上来”
两个上下相邻的块级元素 margin 合并

这时就要接触 BFC（Block Formatting Context，块级格式化上下文）。

你可以先把它理解为：

一个相对独立的布局区域，内部元素怎么排版，尽量不要影响外部。

常见触发方式包括：

overflow: hidden;
display: flow-root;
position: absolute;
display: inline-block;

例如很多时候，我们会用下面这种写法清除浮动或阻止布局串扰：

.card-list {
  display: flow-root;
}

入门阶段不需要把 BFC 当成纯理论去硬背，但要知道：它常被用来解决“高度塌陷、浮动影响、边距重叠”等经典布局问题。

6.5 层叠上下文：为什么 `z-index` 有时不生效

很多初学者都会遇到这种情况：

.modal {
  position: absolute;
  z-index: 9999;
}

明明 z-index 很大，弹窗却还是没盖住别的元素。

原因通常不是 z-index 数字不够大，而是元素处在不同的 层叠上下文（Stacking Context） 中。

你可以先建立这个认知：

z-index 不是全页面统一比较
它往往只在当前层叠上下文里比较大小
某些属性会创建新的层叠上下文，例如定位元素配合 z-index、opacity 小于 1、transform 等

所以处理遮罩层、弹窗、固定导航时，不能只会机械地改数字，还要关注元素是不是被困在了新的层级环境里。

6.6 常见布局范式

实际开发中，很多布局并不是“从零设计”的，而是反复出现的经典模式。

1. 顶部导航 + 主内容区

顶部导航常用 flex
整体页面骨架常用 grid 或普通块布局

2. 左侧侧边栏 + 右侧内容区

简单场景可以用 flex
需要更精确控制时更适合 grid

3. 卡片列表 / 宫格布局

少量横向排列可以用 flex
固定列数、多行对齐通常优先用 grid

4. 弹窗 / 吸顶 / 悬浮按钮

常配合 position: fixed
局部角标常配合 relative + absolute

7. 视觉与美化属性

7.1 文本与字体 (Typography)

color: 字体颜色（支持 #HEX 十六进制、rgb(), rgba() 带有透明度）。
font-size: 字体大小。
line-height: 行高（极其重要，设置 1.5 能大幅提高段落的阅读体验）。

7.2 背景 (Background)

background-color: 背景颜色。
background-image: 背景图片（url('bg.jpg')）。
background-size: cover;: 无论容器多大，图片都会等比例缩放并完美铺满容器（设计师最爱）。

7.3 微交互：过渡动画 (Transition)

现代网页不能硬邦邦的，加一点过渡动画能极大提升网站的高级感：

.btn {
  background-color: blue;
  transition: background-color 0.3s ease; /* 颜色变化时，提供 0.3秒 的平滑过渡 */
}
.btn:hover {
  background-color: darkblue;
}

8. 响应式设计 (Responsive Design)

📱 专业站长视角： 现在的用户超过一半都在用手机上网。如果你的网页不能自动适配手机屏幕，搜索引擎（如 Google、百度）会直接降权甚至不予收录。

8.1 现代 CSS 尺寸单位

抛弃全篇死磕 px（绝对像素）的习惯：

%：相对于父容器宽度的百分比。
vw / vh：相对于浏览器视口的百分比（100vw = 屏幕总宽度，100vh = 屏幕总高度）。
rem：相对于根元素 <html> 的字体大小，是移动端适配的核心单位。

8.2 媒体查询 (Media Queries)

通过 @media 规则，我们可以为不同的屏幕尺寸编写专属的 CSS：

/* 默认样式（移动端优先设计） */
.card { width: 100%; }

/* 当屏幕宽度大于 768px（平板/PC端）时，才应用以下样式 */
@media (min-width: 768px) {
  .card { width: 50%; }
}

9. 进阶：站长必懂的“样式重置 (CSS Reset)”

不同的浏览器（Chrome, Safari, Edge）对 HTML 标签有不同的默认自带样式。比如 <body> 默认有 8px 的外边距，<ul> 默认有小圆点和内边距。

为了保证网页在所有浏览器中长得一模一样，专业的前端项目在引入自己的 CSS 之前，一定会先引入一份 CSS Reset（样式重置） 或 Normalize.css 文件。

极简版样式重置示例：

/* 1. 清除所有元素的默认内外边距，并统一为 border-box 盒模型 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 2. 去除列表默认的小圆点 */
ul, ol {
  list-style: none;
}

/* 3. 去除超链接的默认下划线，并继承父级颜色 */
a {
  text-decoration: none;
  color: inherit;
}