1
第 3 章 CSS
本章将前端开发中最常用、最实用的 CSS 布局功能进行详细讲解。CSS 可以说是前端开发的重中之重，相对
来说 HTML 元素可以快速掌握，而 CSS 的布局经验需要花时间积累。
【学习目标】
熟练使用 CSS 的几种方式。
熟练使用 CSS 选择器。
熟练使用 CSS 常用属性。
熟悉 BOX 模型。
熟练掌握 position、float、flex 布局。
熟练掌握 overflow 属性。
熟练掌握 JavaScript 操作 CSS 样式。
了解 CSS 的 2D、3D 变换及动画。
3．1 常用 CSS
CSS 指层叠样式表(Cascading Style Sheets)。最核心的就是样式，样式定义了如何显示 HTML 元素，解决了内
容与表现分离的问题。使用外部样式表可以提高工作效率，外部样式表通常存储在 CSS 文件中。
3．1．1 CSS 基本语法及使用 CSS 的几种方式
使用 CSS 的方式。
CSS 内联样式。
CSS 内部样式。
CSS 外部样式。
熟悉如下几种选择器。
元素选择器，以“HTML 元素”的形式进行申明。
ID 选择器，以“#”+id 值的形式进行申明。
样式选择器，以“.”+class 值的形式进行申明。
【演练 3．1】熟悉 CSS 内联样式，样式声明在元素内部。
【演练 3．2】CSS 内部样式，元素选择器。
【演练 3．3】ID 选择器。
【演练 3．4】样式选择器。
【演练 3．5】编写样式文件，学习使用外部样式。
3．1．2 多列布局
使用多列布局（CSS Multi Column Layout Module）能方便实现类似报纸、杂志那种多列排版的方式。如果指
定列数，则按指定列数布局。如果未指定列数，那么浏览器将会动态的根据容器的宽度进行分配。
