学习纲要：CSS 布局
2017-03-01 本文已影响140人
前端GoGoGo7
学习条件
掌握了 CSS 的选择器、属性和值。
学习目标
- 了解 display 属性的可选值有哪些，分别代表什么意思。知道行内元素和块级元素的区别。
- 会使用 Flex，inline-block 进行常用页面的布局。
- 了解用 Float 来布局。知道如何清除浮动。
- 知道相对定位（position：relative），绝对定位和固定定位的区别，以及什么时用。知道 z-index 的用途。
- 知道如何让文字水平居中。
- 知道如何让单行和多行文字垂直居中。
学习资源
- 学习 CSS 布局
- Flex 布局
- Flex 布局教程：语法篇 阮一峰
- Flex 布局教程：实例篇 阮一峰
- Flex 布局 写法示例
- inline-block
- 十步图解CSS的position
- 元素的垂直居中的方法
- 元素的水平居中的方法
习题
1 用尽可能多的方法实现如下功能
- 多个元素在一行
- 多个元素水平居中对齐
- 多个元素水平两端对齐
- 多行多个元素水平两端对齐
- 多个元素在一行，某个元素占据剩余部分
- 多个元素水平垂直居中对齐
上面说的元素，都是可以设置宽高的。
2 用尽可能多的方法实现如下功能
- 元素内的行内元素的水平居中
- 单个宽度固定的块级元素的水平居中
- 单个宽度不固定的块级元素的水平居中
- 单行文本的垂直居中
- 高度不固定的元素的垂直居中
