CSS世界的诞生就是为图文信息展示服务的。

1. 流

"流"是CSS中一种基本的定位和布局机制,它引导着HTML中元素的排列和定位。HTML默认采用流体布局，我们也可以通过破坏"流"来实现特殊布局。默认的流向是从左向右、自上而下，但这种流向我们也是可以改变的。

1. 流体布局:

指的是利用元素"流"的特性实现的各类布局效果。因为"流"本身具有自适应特性，所以流体布局是具有自适应性的。(注意: 自适应布局是对具有自适应特性的一类布局的统称，它包括流体布局)

2. <table>标签

"流"的特性对<table>并不适用，因为它不属于CSS。

3. CSS3新特性:

① 布局更丰富:

• 移动端的崛起，催生了CSS3媒介查询、许多响应式布局特性
• 弹性盒子布局(flexible box layout)
• 格栅布局(grid layout)

② 视觉表现长足进步:

• 圆角、阴影和渐变让元素更有质感
• transform变换让元素有更多可能
• filter滤镜和混合模式让Web轻松变为在线的Photoshop
• animation让动画变得简单

由于CSS3设计初衷是为了实现更丰富、更复杂的网页，所以基本上和"流"的关系并不大。

2. CSS的专业术语

1. 属性 (height、color、width等)
2. 值 (整数值、数值、百分比值、长度值、颜色值、字符串值、角度值、频率值、时间值等)
3. 关键字 (transparent、solid、inherit等)
4. 变量 (currentColor等)
5. 长度单位 (相对字体长度单位:em、ex 相对视区长度单位:vh、vw、vmin、vmax 绝对长度单位:px等)
6. 功能符 (rgba、hsla、url、calc、scale等)
7. 属性值
8. 声明、声明块
9. 规则、规则集
10. 选择器 (类选择器、ID选择器、属性选择器、伪类选择器、伪元素选择器、关系选择器: 后代选择器、相邻后代选择器、兄弟选择器、相邻兄弟选择器)
11. @规则

3. 未定义行为

指的是规范顾及不到的细枝末节的实现，就称为"未定义行为"

如: firefox认为:active发生在mousedown事件之后，而IE/Chrome认为:active发生在mousedown事件之前。

4. 流、元素与基本尺寸

我们通常把HTML标签分为两类: 块级元素(block-level element)和内联元素(inline element)

知识点

1. 利用上下边框颜色的叠加实现凹陷效果

border-bottom: 1px solid #b70000;
border-top: 1px solid #de3636;

让我们分析一下为什么会这么神奇:

放大400%后的效果

原来是利用上下边框的颜色深浅差异,给人一种凹陷的错觉。

参考链接：http://demo.cssworld.cn/3/2-3.php

3.2 width/height作用的具体细节

3.2.1 深藏不露的 width:auto

width:auto 包含了4种不同的宽度表现:

• 充分利用可用空间(块级元素的宽度默认100%于父级元素)
• 收缩与包裹(收缩到合适)
• 收缩到最小(文字能断就断: 中文随便断、英文单词不能断)
• 超出容器限制(内容很长的连续的英文或数字、或者内联元素被设置了white-space:nowrap)

充分利用可用空间是唯一的外部尺寸, 其余都是内部尺寸, 而这唯一的外部尺寸,是流的精髓所在。