CSS布局
v1&v2
常见布局（PC）
- 固定宽度布局
- 弹性（fluid）布局
- 响应式布局 —— 多终端（PC、Pad、Phone）
布局实例
v3
css学习方法(CRM大法)
- copy from mdn/CSS Tricks
- 到jsbin运行(Run in jsbin)
- 在开发者工具中调试(Modify in Chrome Developer ToolS)
学习心态
- CSS属性太多，我们无法一次记全，只能一个一个记住(即看一个记一个)。
- 每遇到一个陌生的CSS属性，就去记住它
- 如果真的要看所有属性，可以搜索MDN CSS
一些属性
- transparent:background-color的值，表示透明的
一些技巧
inline-block尽量不要用
只要用了浮动，那么一定要清除浮动
只要用了浮动，那么一定要清除浮动
v5
- normal flow(正常流，也叫文档流)，即块级元素从上到下排列，内联元素从左到右排列
Flex布局
一种全新的布局方式-Flex布局
- 特点
- 块级布局侧重于垂直方向，行内布局侧重于水平方向，flex布局是与方向无关的
- flex布局可以实现空间自动分配，自动对齐(flexible:弹性，灵活)
- flex适用于简单的线性布局，更复杂的布局应交给grid布局(还没发布)
- 基本概念
-
共10个知识点，具体见下图
flex布局基本概念.PNG
-
- Flex Container属性
- 如下图所示，主要记四个(1 2 4 5)
flex container的属性.png
- Flex iteam属性
-
如下图所示，主要记（1,2,3,5,6）
Flex item属性.png
-
圣杯布局和双飞翼布局现在不重要
