4、CSS3基础：选择器、盒模型、Flexbox布局、Grid布局、响应式设计入门

各位同学好，我是你们的老朋友。今天咱们来聊聊CSS3。说实话，CSS这东西，刚入门时觉得简单，不就是给HTML穿衣服嘛。但干久了你会发现，CSS的水深着呢。我做了这么多年RMC界面，踩过的坑有一半都跟CSS有关。今天这一章，我把最核心的几个知识点给你捋一遍。

4.1 选择器——你得知道怎么“找到”元素

选择器，说白了就是告诉浏览器：“嘿，我要给这个元素加样式”。CSS3里选择器的花样多了不少，但常用的就那么几种。

4.1.1 基础选择器

• 元素选择器：直接写标签名，比如 div { }，所有div都中招。
• 类选择器：点号开头，比如 .my-class { }，只命中class为my-class的元素。
• ID选择器：井号开头，比如 #my-id { }，一个页面里ID是唯一的。

4.1.2 组合选择器

有时候你需要更精确地定位。比如“父元素下的子元素”、“紧挨着的兄弟元素”等等。

/* 后代选择器：div里面的所有p */
div p { color: blue; }

/* 子选择器：div的直接子元素p */
div > p { color: red; }

/* 相邻兄弟选择器：紧跟在h2后面的第一个p */
h2 + p { font-weight: bold; }

/* 通用兄弟选择器：h2后面的所有p */
h2 ~ p { font-style: italic; }

你想想看，在RMC界面里，我们经常要控制某个仪表盘区域内的所有数字显示。用后代选择器就特别方便，一个父容器搞定所有子元素。

4.1.3 伪类与伪元素

伪类，比如 :hover、:focus，描述的是元素的特殊状态。伪元素，比如 ::before、::after，可以在元素内容前后插入东西。

4.2 盒模型——每个元素都是一个盒子

CSS里每个元素都可以看作一个盒子。这个盒子从内到外依次是：内容区（content）、内边距（padding）、边框（border）、外边距（margin）。

嗯，这里要注意一个经典问题：标准盒模型 vs IE盒模型。

• 标准盒模型：width 只包含内容区宽度，不包含padding和border。
• IE盒模型（也叫怪异盒模型）：width 包含内容区 + padding + border。

为什么会这样？说白了就是历史遗留问题。现在我们都用 box-sizing: border-box; 来统一成IE盒模型。我个人建议，所有项目一开始就全局设置：

* {
  box-sizing: border-box;
}

这样你设置一个宽度，就是最终显示出来的宽度，不用再算padding和border。我在做RMC界面时，经常要精确控制仪表盘的大小，用border-box省心多了。

4.3 Flexbox布局——一维布局的利器

Flexbox，全称Flexible Box，弹性盒子。它解决的是“在一行或一列里怎么排列元素”的问题。说白了，就是让子元素在父容器里自动伸缩、对齐、排序。

4.3.1 基本用法

.container {
  display: flex;
  justify-content: center;  /* 主轴对齐 */
  align-items: center;      /* 交叉轴对齐 */
  flex-wrap: wrap;          /* 是否换行 */
}

在RMC界面里，Flexbox用得特别多。比如一排仪表盘，每个仪表盘宽度不一样，但又要垂直居中。用Flexbox，一行代码搞定。

4.3.2 子项属性

.item {
  flex: 1;           /* 伸缩比例 */
  align-self: flex-end;  /* 单独对齐 */
  order: 2;          /* 排序，数值越小越靠前 */
}

你想想看，有时候某个仪表盘的数据特别重要，想让它排在最前面。用 order 属性，不用改HTML结构，直接调整显示顺序，多方便。

4.4 Grid布局——二维布局的王者

Grid布局，网格布局。它比Flexbox更强大，能同时控制行和列。Flexbox是一维的，Grid是二维的。如果你要做整个页面的布局，Grid是首选。

4.4.1 基本用法

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* 三列，比例1:2:1 */
  grid-template-rows: auto 200px;      /* 两行，第一行自适应，第二行固定200px */
  gap: 10px;                           /* 间距 */
}

在RMC界面里，Grid布局特别适合做仪表盘的大屏展示。比如一个4x4的网格，每个格子放一个监控图表。用Grid，几行代码就搭好了骨架。

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

4.4.2 网格区域

你可以给每个网格区域起个名字，然后让元素“住”进去。

.container {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

这样布局一目了然，改起来也方便。我在做RMC界面时，经常用这种方式来搭页面骨架。

4.5 响应式设计入门——一套代码，多屏适配

响应式设计，说白了就是让页面在不同屏幕上都好看。核心就三个东西：流式布局、弹性图片、媒体查询。

4.5.1 媒体查询

媒体查询可以针对不同的屏幕宽度，应用不同的样式。

/* 默认样式：大屏 */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/* 屏幕宽度小于768px时：变成单列 */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

嗯，这里要注意：媒体查询的断点怎么选？我一般用三个断点：

4.5.2 弹性图片

img {
  max-width: 100%;
  height: auto;
}

这样图片就不会超出容器，而且会按比例缩放。在RMC界面里，监控截图、设备图片都要这么处理。

4.6 本章知识体系

下面这张图，是我自己画的，把本章的核心知识点串起来了。你看一眼，心里就有数了。

好了，这一章的内容就到这儿。CSS3的基础就这些，但每一个点都值得你花时间去练。别光看，打开编辑器写几行代码，感受一下。下一章咱们聊点更实用的东西。

公众号:蓝海资料掘金营，微信deep3321