弹性盒子

● 怪异盒模型（ie7以下） ● 新版盒模型 ○ display:flex设置为弹性盒 ○ flex-direction顺序指定了弹性子元素在父容器中的位置。 ■ row默认在一行内排列 ■ row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。 ■ column：纵向排列。 ■ column-reverse：反转纵向排列，从下往上排，最后一项排在最上面 ○ justify-content 内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐 ■ flex-start默认，顶端对齐 ■ flex-end末端对齐 ■ center居中对齐 ■ space-between两端对齐，中间自动分配 ■ space-around自动分配距离 ○ align-items侧轴对齐方式 ■ flex-strat顶端对齐 ■ flex-end末端对齐 ■ center居中对齐 ○ flex-wrap换行处理 ■ nowrap不换行（默认） ■ wrap换行 ■ wrap-reverse反向换行 ○ align-content行间距对齐方式 ■ flex-start没有行间距 ■ flex-end底对齐没有行间距 ■ center居中没有行间距 ■ space-between两端对齐，中间自动分配 ■ space-around自动分配距离 ○ align-self子元素对齐方式（类似align-items） ■ flex-start没有行间距 ■ flex-end底对齐没有行间距 ■ center居中没有行间距 ○ order:number排序优先级，数字越大越往后排，默认为0，支持负数。 ○ flex：number子元素所占盒模型比例 ○ flex-grow定义弹性盒子元素的扩展比率 ● 旧版盒模型 ○ display:box(必须加前缀)设置弹性盒 ○ box-orient用来确定父容器里子容器的排列方式，是水平还是垂直 ■ horizontal水平排列 ■ vertical垂直排列 ○ box-pack表示父容器里面主轴对齐方式， ■ start 居顶端 ■ end 居末端 ■ center 居中 ■ justify两端对齐，中间自动分配 ○ box-align表示父容器里面子容器侧轴对齐方式， ■ start居顶端 ■ end居末端 ■ center居中 ■ baseline两端对齐，中间自动分配 ■ stretch自动分配 ○ box-direction:reverse反向显示 ○ box-flex子元素显示比例 ● css多列 ● column-count 属性规定元素应该被分隔的列数： ● column-gap 属性规定列之间的间隔大小 ● column-rule 属性设置列之间的宽度、样式和颜色规则 ○ column-rule-color规定列之间规则的颜色。 ○ column-rule-style规定列之间规则的样式。 ○ column-rule-width规定列之间规则的宽度。 ● column-fill:balance(对列进行协调。浏览器应对列长度的差异进行最小化处理。)/auto(自动排列)规定如何对列进行填充 ● column-span规定元素应横跨多少列。 ● column-width规定列的宽度。 ● columns规定设置 column-width 和 column-count 的简写属性。 注释：Internet Explorer 10 和 Opera 支持多列属性。 Firefox 需要前缀 -moz-。 Chrome 和 Safari 需要前缀 -webkit-。 ● Responsive Web Design 响应式设计布局概念 ○ Responsive 设计特点 ■ 集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。 ○ meta标签移动端设置.note ● css3 媒体查询（media queries） ○ @media mediatype and|not|only (media feature) { CSS-Code;} ○ mediatype媒体类型 ■ all全部 ■ screen用于电脑屏幕，平板电脑，智能手机等。 ■ print用于打印机和打印预览 ○ and|not媒体条件 ○ 媒体功能 ■ min-width最小宽度 ■ min-height最小高度 ■ max-width最大宽度 ■ max-height最大高度 ■ orientation：portrait竖屏状态 ■ orientation：landscape横屏状态下 ○ link写法 ○○ 扩展，实际工作中媒体查询经常操作的属性 ■ display：block；display：none ■ float：none ■ width：100% ■ text-align:center使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。