学习纲要：CSS 布局

学习条件

掌握了 CSS 的选择器、属性和值。

学习目标

1. 了解 display 属性的可选值有哪些，分别代表什么意思。知道行内元素和块级元素的区别。
2. 会使用 Flex，inline-block 进行常用页面的布局。
3. 了解用 Float 来布局。知道如何清除浮动。
4. 知道相对定位（position：relative），绝对定位和固定定位的区别，以及什么时用。知道 z-index 的用途。
5. 知道如何让文字水平居中。
6. 知道如何让单行和多行文字垂直居中。

学习资源

• 学习 CSS 布局
• Flex 布局
  • Flex 布局教程：语法篇 阮一峰
  • Flex 布局教程：实例篇 阮一峰
  • Flex 布局 写法示例
• inline-block
  • 应不应该使用inline-block代替float
  • 如何解决inline-block元素的空白间距
  • inline-block 布局写法示例
• 十步图解CSS的position
• 元素的垂直居中的方法
• 元素的水平居中的方法

习题

1 用尽可能多的方法实现如下功能

• 多个元素在一行
• 多个元素水平居中对齐
• 多个元素水平两端对齐
• 多行多个元素水平两端对齐
• 多个元素在一行，某个元素占据剩余部分
• 多个元素水平垂直居中对齐

上面说的元素，都是可以设置宽高的。

2 用尽可能多的方法实现如下功能

• 元素内的行内元素的水平居中
• 单个宽度固定的块级元素的水平居中
• 单个宽度不固定的块级元素的水平居中
• 单行文本的垂直居中
• 高度不固定的元素的垂直居中