2002 年 5 月 15 日发布了 CSS3 Line 模块，该模块规范了文本行模型。
2002 年 11 月 7 日发布了 CSS3 Lists 模块，该模块规范了列表样式。
2002 年 11 月 7 日还发布了 CSS3 Border 模块，新添加了背景边框功能。该模块后来被合并到了背景模块中。
2003 年 5 月 14 日发布了 CSS3 Generated and Replaced Content 模块，定义了 CSS3 的生成及更换内容功能。
2003 年 8 月 13 日发布了 CSS3 Presentation Levels 模块，定义了演示效果功能。
2003 年 8 月 13 日还发布了 CSS3 Syntax 模块，该模块重新的定义了 CSS 语法基础。
2004 年 2 月 24 日发布了 CSS3 Hyperlink Presentation 模块，重新定义了超链接表示规则。
2004 年 12 月 16 日发布了 CSS3 Speech 模块，该模块重新定义了语音“样式”规则。
2005 年 12 月 15 日发布了 CSS3 Cascading and Inheritance 模块，定义了 CSS 层叠和继承规则。
2007 年 8 月 9 日发布了 CSS3 Basic Box 模块，该模块重新定义了 CSS 基本盒模型规则。
2007 年 9 月 5 日发布了 CSS3 Grid Positioning 模块，定义了 CSS 网格定位规则。
2009 年 3 月 20 日发布了 CSS3 Animations 模块，定义了 CSS 动画模型。
2009 年 3 月 20 日还发布了 CSS3 3D Transforms 模块，定义了 CSS 3D 转换模型。
2009 年 6 月 18 日发布了 CSS3 Fonts 模块，定义了 CSS 字体模式。
2009 年 7 月 23 日发布了 CSS3 Image Values 模块，定义了图像内容显示模型。
2009 年 7 月 23 日还发布了 CSS3 Flexible Box Layout 模块，定义了灵活的框布局模型。
2009 年 12 月 1 日发布了 CSS3 2D Transforms 模块，定义了 2D 转换模型。
2010 年 4 月 29 日发布了 CSS3 Generated Conten for Paged Media 模块，定义了分页媒体内容模型。
2010 年 10 月 5 日发布了 CSS3 Text 模块，定义了文本模型。
2010 年 10 月 5 日还发布了 CSS3 Background and Borders 模块，该模块重新补丁了边框和背景模型
选择器有1. 属性选择器 2. 结构伪类选择器 3. UI元素状态伪类选择器 4. 目标伪类选择器 5. 否定选择器 6. 通用兄弟选择器
input[type='checkbox'] 这个是说在input标签下有一个type属性是checkbox的元素
input[type='checkbox']::after{/* ::after伪元素选择器，这里给是复选框的子体 */
content: ""/* ::after子体内容 */
}
用float是达不到你想要的效果的，因为网格间的间距被定死了，所以当总宽度变化时虽然网格横排个数会减少或增多，但其间距不变。
我的思路是将每个网格显示为inline-block（行内块元素），再设置其父容器的text-align:justify（两端对齐），这样的话每行的网格都会根据父容器宽度自适应个数和间距。一图胜千言：
当改变父容器宽度时：
看看是不是你要的效果。
我们知道，标准流中的，父容器里的多个块级的子元素会默认从上往下排列。但我们如果使用伸缩布局，就可以使子元素们在不脱离标准流的情况下，水平方向上，从左至右排列
flex 布局的优势
1、flex 布局的子元素不会脱离文档流，很好地遵从了“流的特性”。
2、flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范。 flex 非常提供了丰富的属性，非常灵活，让布局的实现更佳多样化，且方便易用。
但flex 的缺点在于，它不支持低版本的 IE 浏览器。
我们来明确几个概念
弹性盒子
弹性盒子指的是使用 display:flex 或 display:inline-flex 声明的父容器。
子元素/弹性元素
子元素/弹性元素指的是父容器里面的子元素们（父元素是弹性盒子）。
使用 display:flex 或 display:inline-flex 声明一个父容器为弹性盒子。此时，这个父容器里的子元素们，会遵循弹性布局。我们一般使用display:flex。
1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
min-width 最小值 min-width: 280px 最小宽度 不能小于 280
max-width: 1280px 最大宽度 不能大于 1280
flex-direction：用于设置盒子中子元素的排列方向。属性值可以是：
flex-direction这个属性默认子元素从左到右排列的。
子盒子如何在父盒子里面水平对齐方式如下所示，
子盒子如何在父盒子里面垂直对齐（单行），如下所示
flex-wrap控制是否换行，如下
flex-flow是flex-direction、flex-wrap的简写形式
align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。必须对父元素设置自由盒属性display:flex，并且设置排列方式为横向排列flex-direction:row并且设置换行，flex-wrap:wrap这样这个属性的设置才会起作用。
